FXUI

# FxSelect 选择器

移动端与PC端交互方式不同，故参数变动较多，移动端请直接参考底部移动端使用方式

当选项过多时，使用下拉菜单展示并选择内容。

# 基础用法&禁用选项

适用广泛的基础单选

         

v-model的值为当前被选中的fx-select的 value 属性值

<template>
  <fx-select
    ref="el1"
    v-model="value"
    :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"
    :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"
    :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: '北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京',
        },
        {
          value: 'Shanghai',
          label: '上海',
          disabled: true,
        },
        {
          value: 'Nanjing',
          label: '南京',
        },
        {
          value: 'Chengdu',
          label: '成都',
        },
        {
          value: 'Shenzhen',
          label: '深圳',
        },
        {
          value: 'Guangzhou',
          label: '广州',
        }]
      }
    },
    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>
显示代码 复制代码

# 禁用状态

选择器不可用状态

为fx-select设置disabled属性，则整个选择器不可用

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

<script>
  export default {
    data() {
      return {
        value: '',
        disabled: true,
        options: [
          {
            value: 'Beijing',
            label: '北京',
          },
          {
            value: 'Shanghai',
            label: '上海',
          }
        ]
      };
    },
  };
</script>
显示代码 复制代码

# 可清空单选

包含清空按钮，可将选择器清空为初始状态

为fx-select设置clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。

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

<script>
  export default {
    data() {
      return {
        value: 'Shanghai',
        options: [
          {
            value: 'Beijing',
            label: '北京',
          },
          {
            value: 'Shanghai',
            label: '上海',
          },
          {
            value: 'Nanjing',
            label: '南京',
          },
          {
            value: 'Chengdu',
            label: '成都',
          },
          {
            value: 'Shenzhen',
            label: '深圳',
          },
          {
            value: 'Guangzhou',
            label: '广州',
          },
        ]
      };
    },
  };
</script>
显示代码 复制代码

# 基础多选

适用性较广的基础多选，用 Tag 展示已选项

为fx-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，您也可以设置collapse-tags属性将它们合并为一段文字。

<template>
  <div style="overflow:hidden;">
    <fx-select
      placeholder="请选择"
      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="请选择"
      v-model="value"
      :options="options"
      multiple
      filterable
      size="medium"
      v-show="show"
      :disabled="disabled"
    ></fx-select>
    <fx-select
      placeholder="请选择"
      v-model="value"
      :options="options"
      multiple
      filterable
      size="small"
      v-show="show"
      :disabled="disabled"
    ></fx-select>
    <fx-select
      placeholder="请选择"
      v-model="value2"
      :options="options"
      multiple
      filterable
      collapse-tags
      @change="onChange"
    >
    </fx-select>
    <fx-select
      placeholder="请选择"
      v-model="value2"
      :options="options"
      size="medium"
      multiple
      filterable
      collapse-tags
    >
    </fx-select>
    <fx-select
      placeholder="请选择"
      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: '北京',
          },
          {
            value: 'Shanghai',
            label: '上海',
          },
          {
            value: 'Nanjing',
            label: '南京',
          },
          {
            value: 'Chengdu',
            label: '成都',
          },
          {
            value: 'Shenzhen',
            label: '深圳',
          },
          {
            value: 'Guangzhou',
            label: '广州',
          },
        ],
        value2: 'Shanghai',
      };
    },
    methods:{
      onChange(val) {
        console.log('change:', val);
      },
    }
  };
</script>
显示代码 复制代码

# 自定义模板

可以自定义备选项

将自定义的 HTML 模板插入fx-select的 slot 中即可。

<template>
  <fx-select placeholder="请选择" 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: '北京',
          },
          {
            value2: 'Shanghai',
            label2: '上海',
          },
          {
            value2: 'Nanjing',
            label2: '南京',
          },
          {
            value2: 'Chengdu',
            label2: '成都',
          }
        ],
      };
    },
    methods:{
      onChange(val) {
        console.log('change:', val,this.value);
      },
    }
  };
</script>
显示代码 复制代码

# 分组

备选项进行分组展示

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

<script>
  export default {
    data() {
      return {
        value: 'Shanghai',
        isOptionGroup: true,
        options: [{
          label: '热门城市',
          options: [{
            value: 'Shanghai',
            label: '上海'
          }, {
            value: 'Beijing',
            label: '北京'
          }]
        }, {
            label: '城市名',
            options: [{
              value: 'Chengdu',
              label: '成都'
            }, {
              value: 'Shenzhen',
              label: '深圳',
              disabled: true
            }, {
              value: 'Guangzhou',
              label: '广州'
            }, {
              value: 'Dalian',
              label: '大连'
            }]
          }]
      };
    },
  };
</script>
显示代码 复制代码

# 创建条目

可以创建并选中选项中不存在的条目

使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。

<template>
  <fx-select
    v-model="value"
    :options="options"
    filterable
    allow-create
    default-first-option
    placeholder="请选择文章标签"
    @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>
显示代码 复制代码

Select Attributes

参数 说明 类型 可选值 默认值
value / v-model 绑定值 string/array — -
options 选项列表，选项属性参见“Option Attributes” array — []
multiple 是否多选 boolean — false
disabled 是否禁用 boolean — false
value-key 作为 value 唯一标识的键名，绑定值为对象类型时必填 string — value
option-value-key 作为options中 value 唯一标识的键名 string — value
size 输入框尺寸 string medium/small/mini —
clearable 是否可以清空选项 boolean — false
collapse-tags 多选时是否将选中值按文字的形式展示 boolean — false
multiple-limit 多选时用户最多可以选择的项目数，为 0 则不限制 number — 0
name select input 的 name 属性 string — —
autocomplete select input 的 autocomplete 属性 string — off
placeholder 占位符 string — 请选择
filterable 是否可搜索 boolean — false
allow-create 是否允许用户创建新条目，需配合 filterable 使用 boolean — false
no-match-text 搜索条件无匹配时显示的文字 string — 无匹配数据
no-data-text 选项为空时显示的文字 string — 无数据
popper-class Select 下拉框的类名 string — —
reserve-keyword 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 boolean — false
default-first-option 在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用 boolean - false
popper-append-to-body 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false boolean - true
automatic-dropdown 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 boolean - false
is-option-group 是否是分组选项 boolean - false
validate-when-options-change 更新options时是否触发验证 boolean - -

Select Events

事件名称 说明 回调参数
change 选中值发生变化时触发，function(val) 当前的选中值
visible-change 下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false
remove-tag 多选模式下移除tag时触发 移除的tag值
clear 可清空的单选模式下用户点击清空按钮时触发 —
blur 当 input 失去焦点时触发 (event: Event)
focus 当 input 获得焦点时触发 (event: Event)

Option Attributes

参数 说明 类型 可选值 默认值
value 选项的值，如果该项为“其他”项，约定其值为"other" string/number — —
label 选项的标签，若不设置则默认与 value 相同 string/number — —
disabled 是否禁用该选项 boolean — false
isOther 标识该项是否为“其他”项。注：is-option-group为true时不支持“其他”选项 boolean - -
isRequired 标识选中“其他”项，输入框是否为必填 boolean - -

Methods

方法名 说明 参数
focus 使 input 获取焦点 -
blur 使 input 失去焦点，并隐藏下拉框 -
before-change 选择值生效前的钩子函数，如果返回false，则选择不生效 -
resetInputHeight 计算组件高度 -

# 移动端 选择器

# 基础用法

参数prevent-click用来关闭click行为。picker组件支持通过点击来选择项，原理是touch事件触发时计算clientY/pageY与picker顶部的偏移值来确定点击的是哪一项，此时默认把picker固定在页面底部。所以当picker不在底部时，计算出的偏移值是不正确的，需要关闭click行为。

<template>
 <fx-select
    :columns="columns"
    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>
# 禁用和默认值

Column.defaultValue设置该列的默认值；Item.disabled设置该项是否禁用。

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],
      }],
    };
  };
};
# 调整每项的高度和每列同时展示的项数
<template>
  <fx-select
    :columns="columns"
    :item-height="30"
    :visible-item-count="7"
    prevent-click
  ></fx-select>
</template>
# 多列联动
<template>
  <fx-select
    :columns="columns"
    @change="onChange"
    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>
# 加载状态

参数show-toolbar控制picker头部的工具栏是否显示

<template>
  <fx-select
    :columns="columns"
    loading
    show-toolbar
    prevent-click
  ></fx-select>
</template>
# API
option description type acceptable values default
columns 每一列数据 Column[] []
item-height 选项高度 Number 36
visible-item-count 同时可见item的数量 Number 5
show-separator 是否展示分隔符 Boolean false
show-toolbar 是否展示头部操作栏 Boolean false
return-object 是否把选中的源object返回，默认只返回选中字符串 Boolean false
prevent-click 关闭click行为 Boolean false
loading 是否显示加载蒙层 Boolean false
cancel-btn-text 取消按钮的文案 String 取消
confirm-btn-text 确定按钮的文案 String 确定
# Column

Column也支持直接传入Item[]

key description type
values 该列数据的枚举值 Item[]
defaultValue 该列数据的默认选中值 String|Number
className 该列DOM根节点的class名 String

columns支持多种格式:

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也支持直接传入String/Number

key description type
value 该项value String|Number
disabled 禁用该项 Boolean
# Value

  • return-object == true时，Value的类型为String|Number。

  • return-object == false时，Value的类型为Item。

# Events
event description params
cancel 点击取消按钮触发 --
confirm 点击确认按钮触发 (values: Value[])
change 选项值发生变化时触发，参数分别为picker实例，当前选中值，此次发生变化的列索引 (picker: Vue, values: Value[], index: number)
# Methods
name description params returns
getValue 获取所有列选中的值 -- Value[]
setValue 设置所有列选中的值，注意这里的入参**values只接受字符串数组或者数值数组**，不接受对象数组（因为深拷贝导致对象匹配不上） (values: String[]|Number[]) --
getColumnValue 获取指定列选中的值 (columnIndex: number) Value
setColumnValue 设置指定列选中的值，注意这里的入参**value只接受字符串或者数值** (columnIndex: number, value: string|number) --
getColumnOptions 获取指定列所有选项枚举值 (columnIndex: number) Column
setColumnOptions 设置指定列所有选项枚举值 (columnIndex: number, column: Column) --
lastUpdate: 5/3/2023, 11:40:26 PM

← 级联选择器 →