Fxiaoke Developer Manual
Table of Contents

Select

# FxSelect

Mobile and desktop interactions differ, so props vary a lot. For mobile usage, go straight to the mobile section below.

When there are many options, use a dropdown to display and select.

# Basic Usage & Disabled Options

Common single select.

         

v-model holds the value of the currently selected fx-select

<template>
  <fx-select
    ref="el1"
    v-model="value"
    placeholder="Please select"
    :el-style="selectStyle"
    :options="options"
    :before-change="beforeChange"
    @change="change"
    @focus="focus"
  ></fx-select>
  &nbsp;&nbsp;&nbsp;&nbsp;
  
  <fx-select
    ref="el2"
    :el-style="{width:'200px'}"
    v-model="value"
    width="200"
    placeholder="Please select"
    :options="options"
    filterable
    size="medium"
    :before-change="beforeChange"
    @change="change"
    @focus="focus"
  ></fx-select>
  &nbsp;&nbsp;&nbsp;&nbsp;
  
  <fx-select
    ref="el3"
    v-model="value"
    width="200"
    placeholder="Please select"
    :options="options"
    filterable
    size="small"
    :before-change="beforeChange"
    @change="change"
    @focus="focus"
  ></fx-select>
  <!-- <fx-button @click="getValue">getValue()</fx-button> -->
  <!-- <fx-button @click="setValue">setValue()</fx-button> -->
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        selectStyle:{width:'300px'},
        options: [{
          value: 'Beijing',
          label: 'Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing Beijing',
        },
        {
          value: 'Shanghai',
          label: 'Shanghai',
          disabled: true,
        },
        {
          value: 'Nanjing',
          label: 'Nanjing',
        },
        {
          value: 'Chengdu',
          label: 'Chengdu',
        },
        {
          value: 'Shenzhen',
          label: 'Shenzhen',
        },
        {
          value: 'Guangzhou',
          label: 'Guangzhou',
        }]
      }
    },
    methods:{
      beforeChange(val,oldVal){
        console.log('beforeChange...',val,oldVal)
        // if (val==='Shanghai') {
        //   return false;
        // }
      },
      getValue(){
        let v=this.$refs.el1.getValue();
        console.log(v,this.value);
      },
      setValue(){
        this.$refs.el1.setValue('Chengdu')
      },
      change(val) {
        console.log('change:', val,this.value);
      },
      focus(event) {
        console.log('focus:', event);
      },
    },
    created(){
    }
  };
</script>
Expand Copy

# Disabled State

Make the select unavailable.

Set disabled on fx-select to disable the control

<template>
  <fx-select v-model="value" :options="options" placeholder="Please select" disabled></fx-select>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        disabled: true,
        options: [
          {
            value: 'Beijing',
            label: 'Beijing',
          },
          {
            value: 'Shanghai',
            label: 'Shanghai',
          }
        ]
      };
    },
  };
</script>
Expand Copy

# Clearable Single Select

Includes a clear button to reset to the initial state.

Set clearable on fx-select to allow clearing. This prop only works for single select.

<template>
  <fx-select placeholder="Please select" v-model="value" placeholder="Please select" :options="options" clearable filterable></fx-select>
</template>

<script>
  export default {
    data() {
      return {
        value: 'Shanghai',
        options: [
          {
            value: 'Beijing',
            label: 'Beijing',
          },
          {
            value: 'Shanghai',
            label: 'Shanghai',
          },
          {
            value: 'Nanjing',
            label: 'Nanjing',
          },
          {
            value: 'Chengdu',
            label: 'Chengdu',
          },
          {
            value: 'Shenzhen',
            label: 'Shenzhen',
          },
          {
            value: 'Guangzhou',
            label: 'Guangzhou',
          },
        ]
      };
    },
  };
</script>
Expand Copy

# Basic Multiple Select

General multi-select showing selections as tags.

Set multiple on fx-select to enable multi-select. v-model becomes an array of selected values. By default, selections render as tags; set collapse-tags to condense them into text.

<template>
  <div style="overflow:hidden;">
    <fx-select
      placeholder="Please select"
      v-model="value"
      :options="options"
      multiple
      filterable
      clearable
      v-show="show"
      :disabled="disabled"
    >
    <!-- <span slot="tag" slot-scope="props">{{ props.data.currentLabel }},222</span> -->
    </fx-select>
    <fx-select
      placeholder="Please select"
      v-model="value"
      :options="options"
      multiple
      filterable
      size="medium"
      v-show="show"
      :disabled="disabled"
    ></fx-select>
    <fx-select
      placeholder="Please select"
      v-model="value"
      :options="options"
      multiple
      filterable
      size="small"
      v-show="show"
      :disabled="disabled"
    ></fx-select>
    <fx-select
      placeholder="Please select"
      v-model="value2"
      :options="options"
      multiple
      filterable
      collapse-tags
      @change="onChange"
    >
    </fx-select>
    <fx-select
      placeholder="Please select"
      v-model="value2"
      :options="options"
      size="medium"
      multiple
      filterable
      collapse-tags
    >
    </fx-select>
    <fx-select
      placeholder="Please select"
      v-model="value2"
      :options="options"
      size="small"
      multiple
      filterable
      collapse-tags
    >
    </fx-select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // value: ['Shanghai','Shanghai2','Chengdu','Shenzhen'],
        value: [],
        disabled:false,
        show:true,
        options: [
          {
            value: 'Beijing',
            label: 'Beijing',
          },
          {
            value: 'Shanghai',
            label: 'Shanghai',
          },
          {
            value: 'Nanjing',
            label: 'Nanjing',
          },
          {
            value: 'Chengdu',
            label: 'Chengdu',
          },
          {
            value: 'Shenzhen',
            label: 'Shenzhen',
          },
          {
            value: 'Guangzhou',
            label: 'Guangzhou',
          },
        ],
        value2: 'Shanghai',
      };
    },
    methods:{
      onChange(val) {
        console.log('change:', val);
      },
    }
  };
</script>
Expand Copy

# Custom Option Template

Customize how options render.

Insert custom HTML into the fx-select slot.

<template>
  <fx-select placeholder="Please select" v-model="value" :options="options" @change="onChange" option-value-key="value2">
    <template slot="options" slot-scope="slotProps">
      <span style="float: left">{{ slotProps.data.label2 }}</span>
      <span style="float: right; color: #8492a6;">{{ slotProps.data.value2 }}</span>
    </template>
  </fx-select>

</template>

<script>
  export default {
    data() {
      return {
        value: 'Shanghai',
        options: [
          {
            value2: 'Beijing',
            label2: 'Beijing',
          },
          {
            value2: 'Shanghai',
            label2: 'Shanghai',
          },
          {
            value2: 'Nanjing',
            label2: 'Nanjing',
          },
          {
            value2: 'Chengdu',
            label2: 'Chengdu',
          }
        ],
      };
    },
    methods:{
      onChange(val) {
        console.log('change:', val,this.value);
      },
    }
  };
</script>
Expand Copy

# Grouped Options

Display options in groups.

<template>
  <fx-select placeholder="Please select" v-model="value" is-option-group :options="options"></fx-select>
</template>

<script>
  export default {
    data() {
      return {
        value: 'Shanghai',
        isOptionGroup: true,
        options: [{
          label: 'Popular Cities',
          options: [{
            value: 'Shanghai',
            label: 'Shanghai'
          }, {
            value: 'Beijing',
            label: 'Beijing'
          }]
        }, {
            label: 'City Names',
            options: [{
              value: 'Chengdu',
              label: 'Chengdu'
            }, {
              value: 'Shenzhen',
              label: 'Shenzhen',
              disabled: true
            }, {
              value: 'Guangzhou',
              label: 'Guangzhou'
            }, {
              value: 'Dalian',
              label: 'Dalian'
            }]
          }]
      };
    },
  };
</script>
Expand Copy

# Create New Entries

Create and select options that do not yet exist.

Use allow-create to create new entries by typing. filterable must be true. This example also uses default-first-option; when enabled, pressing Enter selects the first option in the list without mouse or arrow keys.

<template>
  <fx-select
    v-model="value"
    :options="options"
    filterable
    allow-create
    default-first-option
    placeholder="Please select article tags"
    @change="onChange">
  </fx-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: 'HTML',
          label: 'HTML'
        }, {
          value: 'CSS',
          label: 'CSS'
        }, {
          value: 'JavaScript',
          label: 'JavaScript'
        }],
        value: []
      }
    },
    methods:{
      onChange(val) {
        console.log('change:', val);
      },
    }
  }
</script>
Expand Copy

Select Attributes

Prop Description Type Accepted Values Default
value / v-model Bound value string/array — -
options Option list, see “Option Attributes” array — []
multiple Enable multiple selection boolean — false
disabled Disable the select boolean — false
value-key Key used as the unique identifier when bound value is an object string — value
option-value-key Key used as the unique identifier of option value string — value
size Input size string medium/small/mini —
clearable Allow clearing boolean — false
collapse-tags Show selected values as text in multi-select boolean — false
multiple-limit Max selectable items in multi-select; 0 means unlimited number — 0
name `name` attribute of the input string — —
autocomplete `autocomplete` attribute of the input string — off
placeholder Placeholder text string — Please select
filterable Enable search boolean — false
allow-create Allow creating new items; requires `filterable` boolean — false
no-match-text Text shown when no match string — No matching data
no-data-text Text shown when there is no data string — No data
popper-class Class name of the dropdown string — —
reserve-keyword Keep current keyword after selection when filterable & multiple boolean — false
default-first-option Press Enter to select the first match; requires filterable or remote boolean - false
popper-append-to-body Append dropdown to body. Set false if positioning is incorrect boolean - true
automatic-dropdown For non-searchable select, open menu on focus boolean - false
is-option-group Enable grouped options boolean - false
validate-when-options-change Trigger validation when options update boolean - -

Select Events

Event Description Callback Params
change Emitted when the selected value changes, function(val) Current selected value
visible-change Emitted when dropdown appears/disappears true for show, false for hide
remove-tag Emitted when a tag is removed in multi-select Removed tag value
clear Emitted when clicking clear in clearable single select —
blur Emitted when input loses focus (event: Event)
focus Emitted when input gains focus (event: Event)

Option Attributes

Prop Description Type Accepted Values Default
value Option value; if this is an “Other” item, its value should be "other" string/number — —
label Option label; defaults to value if not set string/number — —
disabled Disable this option boolean — false
isOther Marks this option as “Other”. Note: not supported when is-option-group is true boolean - -
isRequired When “Other” is selected, whether the input is required boolean - -

Methods

Method Description Params
focus Focus the input -
blur Blur the input and hide dropdown -
before-change Hook before value applies; return false to cancel selection -
resetInputHeight Recalculate component height -

# Mobile Select

# Basic Usage

The prevent-click prop disables click behavior. The picker supports selecting by click: on touch it computes clientY/pageY offset from the top of the picker to decide which item is clicked. By default the picker is fixed at the bottom of the page. If the picker is not at the bottom, the offset is incorrect, so disable click in that case.

<template>
 <fx-select
    :columns="columns"
    placeholder="Please select"
    prevent-click
  ></fx-select>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        [0, 1, 2, 3, 4, 5, 6, 7, 8],
        ['a', 'b', 'c', 'd'],
        [11, 12, 13, 14, 15, 16],
      ],
    };
  };
};
</script>
# Disabled and Default Values

Column.defaultValue sets the default value of a column; Item.disabled disables an item.

export default {
  data() {
    return {
      columns: [{
        values: [0, 1, 2, 3, 4, 5, 6, 7, 8],
      }, {
        values: ['a', 'b', 'c', 'd'],
        defaultValue: 'c',
      }, {
        values: [11, 12, 13, 14, { value: 15, disabled: true }, 16],
      }],
    };
  };
};
# Item Height and Visible Count
<template>
  <fx-select
    :columns="columns"
    :item-height="30"
    placeholder="Please select"
    :visible-item-count="7"
    prevent-click
  ></fx-select>
</template>
# Linked Columns
<template>
  <fx-select
    :columns="columns"
    @change="onChange"
    placeholder="Please select"
    prevent-click
    show-toolbar
  ></fx-select>
</template>

<script>
export default {
  computed: {
    columns(): object[] {
      return [{
        values: Object.keys(this.cols),
      }, {
        values: this.cols.a,
      }];
    },
  },
  methods: {
    onChange(picker: any, values: any) {
      picker.setColumnOptions(1, (this.cols as any)[values[0]]);
    },
  },
  data() {
    return {
      cols: {
        'a': [11, 12, 13, 14, 15],
        'b': [21, 22, 23, 24, 25],
        'c': [31, 32, 33, 34, 35],
      },
    };
  };
};
</script>
# Loading State

The show-toolbar prop controls whether the picker header toolbar shows.

<template>
  <fx-select
    :columns="columns"
    loading
    show-toolbar
    placeholder="Please select"
    prevent-click
  ></fx-select>
</template>
# API
option description type acceptable values default
columns Data for each column Column[] []
item-height Row height Number 36
visible-item-count Number of visible items Number 5
show-separator Show separators Boolean false
show-toolbar Show header toolbar Boolean false
return-object Return the source object (default returns selected string) Boolean false
prevent-click Disable click behavior Boolean false
loading Show loading overlay Boolean false
cancel-btn-text Cancel button text String Cancel
confirm-btn-text Confirm button text String Confirm
# Column

Column also supports passing Item[] directly

key description type
values Enum values of the column Item[]
defaultValue Default selected value of the column String|Number
className Class name of the column root DOM String

columns supports multiple formats:

columns: ['a', 'b', 'c'];  
columns: [['a1', 'a2', 'a3'], ['b1', 'b2'], ['c1', 'c2']];  
columns: [{ value: 'a', disabled: true }, 'b', 'c'];  
columns: [{ values: ['a1', 'a2'] }, { values: ['b1', 'b2'] }];
# Item

Item also supports passing String/Number directly

key description type
value Item value String|Number
disabled Disable this item Boolean
# Value

  • When return-object == true, Value type is String|Number.

  • When return-object == false, Value type is Item.

# Events
event description params
cancel Triggered when clicking cancel --
confirm Triggered when clicking confirm (values: Value[])
change Triggered when values change; params are picker instance, current values, changed column index (picker: Vue, values: Value[], index: number)
# Methods
name description params returns
getValue Get selected values of all columns -- Value[]
setValue Set selected values of all columns; values only accepts string[] or number[], not object arrays (deep copy causes mismatch) (values: String[]|Number[]) --
getColumnValue Get selected value of a column (columnIndex: number) Value
setColumnValue Set selected value of a column; value only accepts string or number (columnIndex: number, value: string|number) --
getColumnOptions Get all option values of a column (columnIndex: number) Column
setColumnOptions Set all option values of a column (columnIndex: number, column: Column) --
Input Number
Cascader

← Cascader→