基础单选

<template>
  <view class="page">
    <view class="card">
      <label>单选</label>
      <ex-input-select
        v-model="selectVal"
        :list="list"
        @change="change"
      ></ex-input-select>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectVal: 1,
      list: [
        {
          label: "选项1",
          value: 1,
        },
        {
          label: "选项2",
          value: 2,
        },
        {
          label: "选项3",
          disabled: true,
          value: 3,
        },
        {
          label: "选项4",
          disabled: true,
          value: 4,
        },
        {
          label: "选项5",
          disabled: true,
          value: 5,
        },
        {
          label: "选项6",
          value: 6,
        },
        {
          label: "选项7",
          value: 7,
        },
        {
          label: "选项8",
          value: 8,
        },
        {
          label: "选项9",
          value: 9,
        },
      ],
    };
  },
  methods: {
    change(data) {
      console.log(this.selectVal, "select---------");
      console.log(data, "data-------");
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 40rpx;
}

.card {
  margin-top: 40rpx;
}
</style>

基础多选

<template>
  <view class="page">
    <view class="card">
      <label>多选</label>
      <ex-input-select
        v-model="selectVal"
        :list="list"
        multiple
      ></ex-input-select>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectVal: ["输入的选项反显", 1, 2],
      list: [
        {
          label: "选项1",
          value: 1,
        },
        {
          label: "选项2",
          value: 2,
        },
        {
          label: "选项3",
          disabled: true,
          value: 3,
        },
        {
          label: "选项4",
          disabled: true,
          value: 4,
        },
        {
          label: "选项5",
          disabled: true,
          value: 5,
        },
        {
          label: "选项6",
          value: 6,
        },
        {
          label: "选项7",
          value: 7,
        },
        {
          label: "选项8",
          value: 8,
        },
        {
          label: "选项9",
          value: 9,
        },
      ],
    };
  },
  methods: {
    change(data) {
      console.log(this.selectVal, "select---------");
      console.log(data, "data-------");
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 40rpx;
}

.card {
  margin-top: 40rpx;
}
</style>

属性

属性名	类型	默认值	可选值	说明
list	Array	Array<String,Number,Object>		选项列表
placeholder	String			请选择
emptyTips	String	无选项		空列表提示
clear	Boolean	false		是否显示输入框后面清除按钮
labelKey	String	label		列表为数组对象形式显示 key
valueKey	String,Number			列表为数组对象绑定 valueKey
placeholderStyle	String	color:#B2B2B2;font-size:24rpx		placeholder 样式
textAlign	String	left	left,right	输入框文字对齐方式
listPostion	String	left	left,right	列表相对输入框的对齐方式
listOffset	String	0px		list 选项相对输入框的偏移量
listWidth	String	100%	left,right	list 的宽度,默认继承父元素的宽度 100%
zIndex	Number	1000		层级
multiple	Boolean	false	true,false	是否多选
maxNum	Number	Infinity		最大选中数量, 仅多选有效
maxNumToast	String	超出最大选中数量		超出最大选中数量的提示信息
disabledArr	Array	[]		禁用选项(同按钮组使用方式)
selectedStyle	Object	color: '#409eff'		下拉选项选中样式
unSelectedStyle	Object	color: '#4D4D4D'		下拉选项未选中样式
disabledStyle	Object	color: '#80808050'		下拉选项禁用的样式
selectedIconColor	String	#409eff		下拉选项选中时图标样式

list 配置项

属性名	类型	默认值	可选值	说明
label	String,Number			显示的字段 ke
value	绑定的 key
disabled	Boolean	false		是否禁用选项 true 禁用

事件

事件名	说明
change	选中项更改事件