Fxiaoke Developer Manual
Table of Contents

Input

# FxInput

Due to different interaction methods between mobile and PC, there are many parameter variations. For mobile usage, please refer directly to the mobile section at the bottom.

For entering characters via mouse or keyboard.

:::warning Input is a controlled component that always displays the Vue bound value.

Normally, you should handle the input event and update the component's bound value (or use v-model). Otherwise, the displayed value in the input box won't change.

Does not support v-model modifiers. :::

# Basic Usage

The default decimal places decimalPlaces is 2.

22 %123.00 $123 
<fx-row style="margin-bottom:10px;">
  <fx-col :span="8">
    <label class="label">text: </label>
    <fx-input v-model="input" placeholder="Please input" maxlength="10" @change="onChange"></fx-input>
  </fx-col>
  <fx-col :span="8">
    <label class="label">number: </label>
    <fx-input v-model="input_number" type="number" placeholder="Please input" @change="onChange"></fx-input>{{input_number}}
  </fx-col>
  <fx-col :span="8">
    <label class="label">percent: </label>
    <fx-input v-model="percent" type="percent" :decimal-places="4" placeholder="percent">
      <span class="el-input__icon" slot="suffix">%</span>
    </fx-input>{{percent}}
  </fx-col>
</fx-row>
<fx-row style="margin-bottom:10px;">
  <fx-col :span="12">
    <label class="label">currency: </label>
    <fx-input v-model="currency" type="currency" placeholder="currency">
      <span class="el-input__icon" slot="suffix">$</span>
    </fx-input>{{currency}}
  </fx-col>
</fx-row>

<script>
export default {
  data() {
    return {
      input: '',
      input_number:22,
      currency:123.0,
      percent:'123.00',
    }
  },
  methods:{
    onChange(val){
      console.log('onChange...',val)
    }
  }
}
</script>
Expand Copy

# Input Value Displayed as Tags

  
<fx-input
  placeholder="Please input"
  v-model="tagInput"
  :collapse-tags="true"
  @change="onChange"
  width="240px"
  >
</fx-input>
&nbsp;&nbsp;

<script>
export default {
  data() {
    return {
      tagInput:[]
    }
  },
  methods: {
    onChange(val){
      console.log('onChange...',val,this.tagInput)
    }
  }
}
</script>
Expand Copy

# Disabled State

Disable the input component with the disabled attribute

<fx-input
  placeholder="Please input"
  v-model="input"
  :disabled="true">
</fx-input>

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

# Clearable

Use the clearable attribute to get a clearable input field

<fx-input
  placeholder="Please input"
  v-model="input"
  clearable>
</fx-input>

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

# Password Box

Use the show-password attribute to get a toggleable password input

<fx-input placeholder="Please enter password" v-model="input" show-password></fx-input>

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

# Input with Icon

Display input type with icon markers

Via attributes:
Via slots:

Add icons at the beginning or end of the input using prefix-icon and suffix-icon attributes, or place icons via slots.

<div class="demo-input-suffix">
  Via attributes:
  <fx-input
    placeholder="Pick a date"
    suffix-icon="el-icon-date"
    v-model="input1">
  </fx-input>
  <fx-input
    placeholder="Please input"
    prefix-icon="el-icon-search"
    v-model="input2">
  </fx-input>
</div>
<div class="demo-input-suffix">
  Via slots:
  <fx-input
    placeholder="Pick a date"
    v-model="input3">
    <i slot="suffix" class="el-input__icon el-icon-date"></i>
  </fx-input>
  <fx-input
    placeholder="Please input"
    v-model="input4">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </fx-input>
</div>

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

# Textarea

For multi-line text input by setting type to textarea.

Control textarea height via rows attribute

<fx-input
  type="textarea"
  :rows="2"
  placeholder="Please input"
  v-model="textarea">
</fx-input>

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

# Autosizing Textarea

Set autosize to make textarea height adjust automatically based on content. autosize can also accept an object specifying min/max rows.

<fx-input
  type="textarea"
  autosize
  placeholder="Please input"
  v-model="textarea1">
</fx-input>
<div style="margin: 20px 0;"></div>
<fx-input
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 4}"
  placeholder="Please input"
  v-model="textarea2">
</fx-input>

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

# Composite Input

Add elements before or after, typically labels or buttons

Use slots to prepend or append content to input.

<div>
  <fx-input placeholder="Please input" v-model="input1">
    <template slot="prepend">Http://</template>
  </fx-input>
</div>
<div style="margin-top: 15px;">
  <fx-input placeholder="Please input" v-model="input2">
    <template slot="append">.com</template>
  </fx-input>
</div>
<div style="margin-top: 15px;">
  <fx-input placeholder="Please input" v-model="input3" class="input-with-select">
    <fx-select v-model="select" :options="options" slot="prepend" placeholder="Select"></fx-select>
    <fx-button slot="append" icon="el-icon-search"></fx-button>
  </fx-input>
</div>
<style>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      select: '',
      options: [{
        value: 'Beijing',
        label: 'Beijing',
      },
      {
        value: 'Shanghai',
        label: 'Shanghai',
        disabled: true,
      },
      {
        value: 'Nanjing',
        label: 'Nanjing',
      }]
    }
  }
}
</script>
Expand Copy

# Sizes

Specify input size via size attribute. Besides default size, large, small and mini are available.

<div class="demo-input-size">
  <fx-input
    placeholder="Please input"
    suffix-icon="el-icon-date"
    v-model="input1">
  </fx-input>
  <fx-input
    size="medium"
    placeholder="Please input"
    suffix-icon="el-icon-date"
    v-model="input2">
  </fx-input>
  <fx-input
    size="small"
    placeholder="Please input"
    suffix-icon="el-icon-date"
    v-model="input3">
  </fx-input>
  <fx-input
    size="mini"
    placeholder="Please input"
    suffix-icon="el-icon-date"
    v-model="input4">
  </fx-input>
</div>

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

# Input Suggestions

Show input suggestions based on input content

List suggestions on focus
List suggestions on input

autocomplete is an input component with suggestions. fetch-suggestions is a method that returns suggestions. When suggestions are ready, invoke callback(data) to return them to autocomplete.

<fx-row class="demo-autocomplete">
  <fx-col :span="12">
    <div class="sub-title">List suggestions on focus</div>
    <fx-autocomplete
      class="inline-input"
      v-model="state1"
      :fetch-suggestions="querySearch"
      placeholder="Please input"
      @select="handleSelect"
    ></fx-autocomplete>
  </fx-col>
  <fx-col :span="12">
    <div class="sub-title">List suggestions on input</div>
    <fx-autocomplete
      class="inline-input"
      v-model="state2"
      :fetch-suggestions="querySearch"
      placeholder="Please input"
      :trigger-on-focus="false"
      @select="handleSelect"
    ></fx-autocomplete>
  </fx-col>
</fx-row>
<script>
  export default {
    data() {
      return {
        restaurants: [],
        state1: '',
        state2: ''
      };
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "Sanquan Fresh Food (Beixinjing Store)", "address": "144 Xinyu Road, Changning District" },
          { "value": "Hot honey Seoul Fried Chicken (Xianxia Road)", "address": "661 Songhong Road, Changning District, Shanghai" }
        ];
      },
      handleSelect(item) {
        console.log(item,this.state1);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  }
</script>
Expand Copy

# Custom Template

Customize how suggestions are displayed

Use scoped slot to customize suggestion templates. The scope parameter is item, representing the current suggestion object.

<fx-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="name">{{ item.value }}</div>
    <span class="addr">{{ item.address }}</span>
  </template>
</fx-autocomplete>

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

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>

<script>
  export default {
    data() {
      return {
        restaurants: [],
        state: ''
      };
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "Sanquan Fresh Food (Beixinjing Store)", "address": "144 Xinyu Road, Changning District" }
        ];
      },
      handleSelect(item) {
        console.log(item);
      },
      handleIconClick(ev) {
        console.log(ev);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  }
</script>
Expand Copy

Search data from server

<fx-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="Please input"
  @select="handleSelect"
></fx-autocomplete>
<script>
  export default {
    data() {
      return {
        restaurants: [],
        state: '',
        timeout:  null
      };
    },
    methods: {
      loadAll() {
        return [
          { "value": "Sanquan Fresh Food (Beixinjing Store)", "address": "144 Xinyu Road, Changning District" }
        ];
      },
      querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

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

# Input Length Limit

maxlength and minlength are native attributes to limit input length. For text or textarea types, use show-word-limit to display character count.

<fx-input
  type="text"
  placeholder="Please input"
  v-model="text"
  maxlength="10"
  show-word-limit
>
</fx-input>
<div style="margin: 20px 0;"></div>
<fx-input
  type="textarea"
  placeholder="Please input"
  v-model="textarea"
  maxlength="30"
  show-word-limit
>
</fx-input>

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

# Input Attributes

Attribute Description Type Options Default
type Input type string text, textarea and other native input types (opens new window) text
value / v-model Bound value. When collapse-tags is true, value is array string / number/array — —
maxlength Native attribute, max input length number — —
minlength Native attribute, min input length number — —
show-word-limit Whether to show word count, only works when type="text" or type="textarea" boolean — false
placeholder Input placeholder string — —
clearable Whether to show clear button boolean — false
show-password Whether to show password toggle icon boolean — false
disabled Whether to disable boolean — false
size Input size, doesn't work when type="textarea" string medium / small / mini —
prefix-icon Prefix icon class string — —
suffix-icon Suffix icon class string — —
rows Number of rows for textarea number — 2
autosize Whether textarea has an adaptive height, can accept an object like { minRows: 2, maxRows: 6 } boolean / object — false
autocomplete Native attribute string on, off off
auto-complete Deprecated in next major version string on, off off
name Native attribute string — —
readonly Native attribute boolean — false
max Native attribute — — —
min Native attribute — — —
step Native attribute — — —
resize Control whether the input can be resized by user string none, both, horizontal, vertical —
autofocus Native attribute boolean true, false false
form Native attribute string — —
label Associated label text string — —
tabindex Input tabindex string - -
validate-event Whether to trigger validation when inputting boolean - true
collapse-tags Whether to display input values as tags (value should be array) boolean - false
is-blur-fold When collapse-tags is true, whether to fold after blur boolean - true
validate-when-input Trigger validation when inputting boolean - true
validate-when-blur Trigger validation when blurring boolean - false

# Input Slots

Name Description
prefix Prepend content, only works when type="text"
suffix Append content, only works when type="text"
prepend Prepend content, only works when type="text"
append Append content, only works when type="text"

# Input Events

Event Name Description Parameters
blur Triggers when Input loses focus (event: Event
Checkbox
Input Number

← Input Number→