Input in element.eleme.io

Input

Input data using mouse or keyboard.
Input is a controlled component, it always shows Vue binding value.
Under normal circumstances, input event should be handled. Its handler should update component's binding value (or use v-model). Otherwise, input box's value will not change.
Do not support v-model modifiers.

Basic usage

<el-input placeholder="Please input" v-model="input"></el-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>
Hide

Disabled

Disable the Input with the disabled attribute.
<el-input
  placeholder="Please input"
  v-model="input"
  :disabled="true">
</el-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

Clearable

Make the Input clearable with the clearable attribute.
<el-input
  placeholder="Please input"
  v-model="input"
  clearable>
</el-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

Password box

Make a toggleable password Input with the show-password attribute.
<el-input placeholder="Please input password" v-model="input" show-password></el-input>

<script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
</script>

Input with icon

Add an icon to indicate input type.
Using attributes
Using slots
To add icons in Input, you can simply use prefix-icon and suffix-icon attributes. Also, the prefix and suffix named slots works as well.
<div class="demo-input-suffix">
  <span class="demo-input-label">Using attributes</span>
  <el-input
    placeholder="Pick a date"
    suffix-icon="el-icon-date"
    v-model="input1">
  </el-input>
  <el-input
    placeholder="Type something"
    prefix-icon="el-icon-search"
    v-model="input2">
  </el-input>
</div>
<div class="demo-input-suffix">
  <span class="demo-input-label">Using slots</span>
  <el-input
    placeholder="Pick a date"
    v-model="input3">
    <i slot="suffix" class="el-input__icon el-icon-date"></i>
  </el-input>
  <el-input
    placeholder="Type something"
    v-model="input4">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </el-input>
</div>

<style>
  .demo-input-label {
    display: inline-block;
    width: 130px;
  }
</style>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      input4: ''
    }
  }
}
</script>

Textarea

Resizable for entering multiple lines of text information. Add attribute type="textarea" to change input into native textarea.
Control the height by setting the rows prop.
<el-input
  type="textarea"
  :rows="2"
  placeholder="Please input"
  v-model="textarea">
</el-input>

<script>
export default {
  data() {
    return {
      textarea: ''
    }
  }
}
</script>

Autosize Textarea

Setting the autosize prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to autosize to specify the minimum and maximum number of lines the textarea can automatically adjust.
<el-input
  type="textarea"
  autosize
  placeholder="Please input"
  v-model="textarea1">
</el-input>
<div style="margin: 20px 0;"></div>
<el-input
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 4}"
  placeholder="Please input"
  v-model="textarea2">
</el-input>

<script>
export default {
  data() {
    return {
      textarea1: '',
      textarea2: ''
    }
  }
}
</script>

Mixed input

Prepend or append an element, generally a label or a button.
Http://
.com
Use slot to distribute elements that prepend or append to Input.
<div>
  <el-input placeholder="Please input" v-model="input1">
    <template slot="prepend">Http://</template>
  </el-input>
</div>
<div style="margin-top: 15px;">
  <el-input placeholder="Please input" v-model="input2">
    <template slot="append">.com</template>
  </el-input>
</div>
<div style="margin-top: 15px;">
  <el-input placeholder="Please input" v-model="input3" class="input-with-select">
    <el-select v-model="select" slot="prepend" placeholder="Select">
      <el-option label="Restaurant" value="1"></el-option>
      <el-option label="Order No." value="2"></el-option>
      <el-option label="Tel" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
</div>

<style>
  .el-select .el-input {
    width: 110px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      select: ''
    }
  }
}
</script>

Sizes

Add size attribute to change the size of Input. In addition to the default size, there are three other options: large, small and mini.
<div class="demo-input-size">
  <el-input
    placeholder="Please Input"
    v-model="input1">
  </el-input>
  <el-input
    size="medium"
    placeholder="Please Input"
    v-model="input2">
  </el-input>
  <el-input
    size="small"
    placeholder="Please Input"
    v-model="input3">
  </el-input>
  <el-input
    size="mini"
    placeholder="Please Input"
    v-model="input4">
  </el-input>
</div>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      input4: ''
    }
  }
}
</script>

Autocomplete

You can get some recommended tips based on the current input.
list suggestions when activated
list suggestions on input
Autocomplete component provides input suggestions. The fetch-suggestions attribute is a method that returns suggested input. In this example, querySearch(queryString, cb) returns suggestions to Autocomplete via cb(data) when suggestions are ready.
<el-row class="demo-autocomplete">
  <el-col :span="12">
    <div class="sub-title">list suggestions when activated</div>
    <el-autocomplete
      class="inline-input"
      v-model="state1"
      :fetch-suggestions="querySearch"
      placeholder="Please Input"
      @select="handleSelect"
    ></el-autocomplete>
  </el-col>
  <el-col :span="12">
    <div class="sub-title">list suggestions on input</div>
    <el-autocomplete
      class="inline-input"
      v-model="state2"
      :fetch-suggestions="querySearch"
      placeholder="Please Input"
      :trigger-on-focus="false"
      @select="handleSelect"
    ></el-autocomplete>
  </el-col>
</el-row>
<script>
  export default {
    data() {
      return {
        links: [],
        state1: '',
        state2: ''
      };
    },
    methods: {
      querySearch(queryString, cb) {
        var links = this.links;
        var results = queryString ? links.filter(this.createFilter(queryString)) : links;
        // call callback function to return suggestions
        cb(results);
      },
      createFilter(queryString) {
        return (link) => {
          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "vue", "link": "https://github.com/vuejs/vue" },
          { "value": "element", "link": "https://github.com/ElemeFE/element" },
          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
          { "value": "babel", "link": "https://github.com/babel/babel" }
         ];
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.links = this.loadAll();
    }
  }
</script>

Custom template

Customize how suggestions are displayed.
Use scoped slot to customize suggestion items. In the scope, you can access the suggestion object via the item key.
<el-autocomplete
  popper-class="my-autocomplete"
  v-model="state"
  :fetch-suggestions="querySearch"
  placeholder="Please input"
  @select="handleSelect">
  <i
    class="el-icon-edit el-input__icon"
    slot="suffix"
    @click="handleIconClick">
  </i>
  <template slot-scope="{ item }">
    <div class="value">{{ item.value }}</div>
    <span class="link">{{ item.link }}</span>
  </template>
</el-autocomplete>

<style>
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .value {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .link {
        font-size: 12px;
        color: #b4b4b4;
      }
    }
  }
</style>

<script>
  export default {
    data() {
      return {
        links: [],
        state: ''
      };
    },
    methods: {
      querySearch(queryString, cb) {
        var links = this.links;
        var results = queryString ? links.filter(this.createFilter(queryString)) : links;
        // call callback function to return suggestion objects
        cb(results);
      },
      createFilter(queryString) {
        return (link) => {
          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "vue", "link": "https://github.com/vuejs/vue" },
          { "value": "element", "link": "https://github.com/ElemeFE/element" },
          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
          { "value": "babel", "link": "https://github.com/babel/babel" }
         ];
      },
      handleSelect(item) {
        console.log(item);
      },
      handleIconClick(ev) {
        console.log(ev);
      }
    },
    mounted() {
      this.links = this.loadAll();
    }
  }
</script>
Search data from server-side.
<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="Please input"
  @select="handleSelect"
></el-autocomplete>
<script>
  export default {
    data() {
      return {
        links: [],
        state: '',
        timeout:  null
      };
    },
    methods: {
      loadAll() {
        return [
          { "value": "vue", "link": "https://github.com/vuejs/vue" },
          { "value": "element", "link": "https://github.com/ElemeFE/element" },
          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
          { "value": "babel", "link": "https://github.com/babel/babel" }
         ];
      },
      querySearchAsync(queryString, cb) {
        var links = this.links;
        var results = queryString ? links.filter(this.createFilter(queryString)) : links;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createFilter(queryString) {
        return (link) => {
          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.links = this.loadAll();
    }
  };
</script>

Limit length

0/10
0/30
maxlength and minlength are attributes of native input, they declare a limit on the number of characters a user can input. The "number of characters" is measured using JavaScript string length.Setting the maxlength prop for a text or textarea type of Input can limit the length of input value, allows you to show word count by setting show-word-limit to true at the same time.
<el-input
  type="text"
  placeholder="Please input"
  v-model="text"
  maxlength="10"
  show-word-limit
>
</el-input>
<div style="margin: 20px 0;"></div>
<el-input
  type="textarea"
  placeholder="Please input"
  v-model="textarea"
  maxlength="30"
  show-word-limit
>
</el-input>

<script>
export default {
  data() {
    return {
      text: '',
      textarea: ''
    }
  }
}
</script>

Input Attributes

AttributeDescriptionTypeAccepted ValuesDefault
typetype of inputstringtext, textarea and other native input typestext
value / v-modelbinding valuestring / number——
maxlengthsame as maxlength in native inputnumber——
minlengthsame as minlength in native inputnumber——
show-word-limitwhether show word count，only works when type is 'text' or 'textarea'boolean—false
placeholderplaceholder of Inputstring——
clearablewhether to show clear buttonboolean—false
show-passwordwhether to show toggleable password inputboolean—false
disabledwhether Input is disabledboolean—false
sizesize of Input, works when type is not 'textarea'stringmedium / small / mini—
prefix-iconprefix icon classstring——
suffix-iconsuffix icon classstring——
rowsnumber of rows of textarea, only works when type is 'textarea'number—2
autosizewhether textarea has an adaptive height, only works when type is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }boolean / object—false
autocompletesame as autocomplete in native inputstringon/offoff
auto-complete@DEPRECATED in next major versionstringon/offoff
namesame as name in native inputstring——
readonlysame as readonly in native inputboolean—false
maxsame as max in native input———
minsame as min in native input———
stepsame as step in native input———
resizecontrol the resizabilitystringnone, both, horizontal, vertical—
autofocussame as autofocus in native inputboolean—false
formsame as form in native inputstring——
labellabel textstring——
tabindexinput tabindexstring--
validate-eventwhether to trigger form validationboolean-true

Input slots

NameDescription
prefixcontent as Input prefix, only works when type is 'text'
suffixcontent as Input suffix, only works when type is 'text'
prependcontent to prepend before Input, only works when type is 'text'
appendcontent to append after Input, only works when type is 'text'

Input Events

Event NameDescriptionParameters
blurtriggers when Input blurs(event: Event)
focustriggers when Input focuses(event: Event)
changetriggers only when the input box loses focus or the user presses Enter(value: string | number)
inputtriggers when the Input value change(value: string | number)
cleartriggers when the Input is cleared by clicking the clear button—

Input Methods

MethodDescriptionParameters
focusfocus the input element—
blurblur the input element—
selectselect the text in input element—

Autocomplete Attributes

AttributeDescriptionTypeOptionsDefault
placeholderthe placeholder of Autocompletestring——
clearablewhether to show clear buttonboolean—false
disabledwhether Autocomplete is disabledboolean—false
value-keykey name of the input suggestion object for displaystring—value
iconicon namestring——
valuebinding valuestring——
debouncedebounce delay when typing, in millisecondsnumber—300
placementplacement of the popup menustringtop / top-start / top-end / bottom / bottom-start / bottom-endbottom-start
fetch-suggestionsa method to fetch input suggestions. When suggestions are ready, invoke callback(data:[]) to return them to AutocompleteFunction(queryString, callback)——
popper-classcustom class name for autocomplete's dropdownstring——
trigger-on-focuswhether show suggestions when input focusboolean—true
namesame as name in native inputstring——
select-when-unmatchedwhether to emit a select event on enter when there is no autocomplete matchboolean—false
labellabel textstring——
prefix-iconprefix icon classstring——
suffix-iconsuffix icon classstring——
hide-loadingwhether to hide the loading icon in remote searchboolean—false
popper-append-to-bodywhether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to falseboolean-true
highlight-first-itemwhether to highlight first item in remote search suggestions by defaultboolean—false

Autocomplete Slots

NameDescription
prefixcontent as Input prefix
suffixcontent as Input suffix
prependcontent to prepend before Input
appendcontent to append after Input

Autocomplete Scoped Slot

NameDescription
—Custom content for input suggestions. The scope parameter is { item }

Autocomplete Events

Event NameDescriptionParameters
selecttriggers when a suggestion is clickedsuggestion being clicked

Autocomplete Methods

MethodDescriptionParameters
focusfocus the input element—

评论

发表评论

此博客中的热门博文

XML, XSL, HTML

The code in this section is that an XSLT transform is used to translate XML input data to HTML output. Ref: https://docs.oracle.com/javase/tutorial/jaxp/xslt/transformingXML.html Note - The article1a.xsl , which is from in XSLT examples . The following code is for joy.  import java.awt.Desktop; import java.io.*; import java.net.URISyntaxException; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.parsers.ParserConfigurationException; import javax.xml.transform.Transformer; import javax.xml.transform.TransformerConfigurationException; import javax.xml.transform.TransformerException; import javax.xml.transform.TransformerFactory; import javax.xml.transform.dom.DOMSource; import javax.xml.transform.stream.StreamResult; import javax.xml.transform.stream.StreamSource; // For write operation import org.w3c.dom.Document; import org.w3c.dom.Element; import org.xml.sax.SAXException; public class Stylizer {    
阅读全文

How do I load binary image data using Javascript and XMLHttpRequest?

Ref：http://stackoverflow.com/questions/1095102/how-do-i-load-binary-image-data-using-javascript-and-xmlhttprequest Ref：http://emilsblog.lerch.org/2009/07/javascript-hacks-using-xhr-to-load.html // one-time code if ( /msie/ i . test ( navigator . userAgent ) && ! /opera/ i . test ( navigator . userAgent )) { var IEBinaryToArray_ByteStr_Script = "<!-- IEBinaryToArray_ByteStr -->\r\n" + "<script type='text/vbscript'>\r\n" + "Function IEBinaryToArray_ByteStr(Binary)\r\n" + " IEBinaryToArray_ByteStr = CStr(Binary)\r\n" + "End Function\r\n" + "Function IEBinaryToArray_ByteStr_Last(Binary)\r\n" + " Dim lastIndex\r\n" + " lastIndex = LenB(Binary)\r\n" + " if lastIndex mod 2 Then\r\n" + " IEBinaryToArray_ByteStr_Last = Chr( AscB( MidB( Binary, lastIndex, 1 ) ) )\r\n" + " Else\r\n&q
阅读全文