dropdown

无数据

ykc-dropdown 没有数据，点击选择框 下拉框会显示无数据。

无数据

<template>   
    <ykc-dropdown :data="[]" v-model="val0"></ykc-dropdown>
</template>

<script>
  export default {
     data() {
      return {
        val0: '',
      };
    },
  };
</script>

显示代码 复制代码 复制代码

单选下拉 绑定了change事件的

无数据

<template>
  <ykc-dropdown :data="data" v-model="val1" @change="selectChange"></ykc-dropdown>
</template>

<script>
  export default {
    data() {
      return {
        val1: '2',
        // 组件使用数据源
        data: [
          {
            id: '1',
            name: '江苏',
          },
          {
            id: '2',
            name: '浙江',
          },
          {
            id: '3',
            name: '安徽',
          },
          {
            id: '4',
            name: '上海',
          },
          {
            id: '5',
            name: '山东',
          },
          {
            id: '6',
            name: '广东',
          },
          {
            id: '7',
            name: '每座城市都很美丽，你最喜欢哪座城市呢',
          },
        ],
      };
    },
    methods: {
      /**
       * 组件change方法调用信息提示
       */
      selectChange: e => {
        this.$message(`选择id为${e}的按钮`);
      },
    },
  }
</script>

显示代码 复制代码 复制代码

多选下拉

无数据

<template>
  <ykc-dropdown
    :data="data"
    :multiple="true"
    v-model="val2"></ykc-dropdown>
</template>

<script>
  export default {
    data() {
      return {
        val2: ['2', '4', '6'],
        // 组件使用数据源
        data: [
          {
            id: '1',
            name: '江苏',
          },
          {
            id: '2',
            name: '浙江',
          },
          {
            id: '3',
            name: '安徽',
          },
          {
            id: '4',
            name: '上海',
          },
          {
            id: '5',
            name: '山东',
          },
          {
            id: '6',
            name: '广东',
          },
          {
            id: '7',
            name: '每座城市都很美丽，你最喜欢哪座城市呢',
          },
        ],
      };
    },
  };
</script>

显示代码 复制代码 复制代码

多选下拉 显示多行

无数据

<template>
  <ykc-dropdown
    :data="data"
    :multiple="true"
    :isMultiLine="true"
    v-model="val3"></ykc-dropdown>
</template>

<script>
   export default {
    data() {
      return {
        val3: ['1', '3', '5'],
        // 组件使用数据源
        data: [
          {
            id: '1',
            name: '江苏',
          },
          {
            id: '2',
            name: '浙江',
          },
          {
            id: '3',
            name: '安徽',
          },
          {
            id: '4',
            name: '上海',
          },
          {
            id: '5',
            name: '山东',
          },
          {
            id: '6',
            name: '广东',
          },
          {
            id: '7',
            name: '每座城市都很美丽，你最喜欢哪座城市呢',
          },
        ],
      };
    },
  };
</script>

显示代码 复制代码 复制代码

单选联想下拉

ykc-dropdown 单选联想下拉并设置渲染的最大条数

<template>
  <ykc-dropdown
    :data="data"
    :remote="true"
    :clearable="true"
    v-model="val4"
    :searchMaxLength="2"></ykc-dropdown>
</template>

<script>
   export default {
    data() {
      return {
        val4: '',
        // 组件使用数据源
        data: [
          {
            id: '1',
            name: '江苏',
          },
          {
            id: '2',
            name: '浙江',
          },
          {
            id: '3',
            name: '安徽',
          },
          {
            id: '4',
            name: '上海',
          },
          {
            id: '5',
            name: '山东',
          },
          {
            id: '6',
            name: '广东',
          },
          {
            id: '7',
            name: '每座城市都很美丽，你最喜欢哪座城市呢',
          },
        ],
      };
    },
  };
</script>

显示代码 复制代码 复制代码

单选联想下拉 取object值

ykc-dropdown 单选联想下拉 通过change方法获取的值是object

<template>
  <ykc-dropdown
    :data="data"
    :isObject="true"
    :remote="true"
    v-model="val5"></ykc-dropdown>
</template>

<script>
  export default {
    data() {
      return {
        val5: '',
        // 组件使用数据源
        data: [
          {
            id: '1',
            name: '江苏',
          },
          {
            id: '2',
            name: '浙江',
          },
          {
            id: '3',
            name: '安徽',
          },
          {
            id: '4',
            name: '上海',
          },
          {
            id: '5',
            name: '山东',
          },
          {
            id: '6',
            name: '广东',
          },
          {
            id: '7',
            name: '每座城市都很美丽，你最喜欢哪座城市呢',
          },
        ],
      };
    },
    methods: {
      /**
       * 组件change方法调用信息提示
       */
      selectChange(e) {
        this.$message(`选择id为${e}的按钮`);
      },
    },
  };
</script>

显示代码 复制代码 复制代码

多选联想下拉

<template>
  <ykc-dropdown
    :data="data"
    :multiple="true"
    :remote="true"
    :searchMaxLength="2"
    v-model="val6"></ykc-dropdown>
</template>

<script>
   export default {
    data() {
      return {
        val6: [],
        // 组件使用数据源
        data: [
          {
            id: '1',
            name: '江苏',
          },
          {
            id: '2',
            name: '浙江',
          },
          {
            id: '3',
            name: '安徽',
          },
          {
            id: '4',
            name: '上海',
          },
          {
            id: '5',
            name: '山东',
          },
          {
            id: '6',
            name: '广东',
          },
          {
            id: '7',
            name: '每座城市都很美丽，你最喜欢哪座城市呢',
          },
        ],
      };
    },
  };
</script>

显示代码 复制代码 复制代码

单选联想下拉 设置默认值

<template>
  <ykc-dropdown :data="data" :remote="true" v-model="val7"></ykc-dropdown>
</template>

<script>
  export default {
    data() {
      return {
        val7: '3',
        // 组件使用数据源
        data: [
          {
            id: '1',
            name: '江苏',
          },
          {
            id: '2',
            name: '浙江',
          },
          {
            id: '3',
            name: '安徽',
          },
          {
            id: '4',
            name: '上海',
          },
          {
            id: '5',
            name: '山东',
          },
          {
            id: '6',
            name: '广东',
          },
          {
            id: '7',
            name: '每座城市都很美丽，你最喜欢哪座城市呢',
          },
        ],
      };
    },
  };
</script>

显示代码 复制代码 复制代码

多选联想下拉 设置默认值

<template>
  <ykc-dropdown
    :data="data"
    :remote="true"
    :multiple="true"
    :clearable="true"
    v-model="val8"></ykc-dropdown>
</template>

<script>
   export default {
    data() {
      return {
        val8: ['6'],
        // 组件使用数据源
        data: [
          {
            id: '1',
            name: '江苏',
          },
          {
            id: '2',
            name: '浙江',
          },
          {
            id: '3',
            name: '安徽',
          },
          {
            id: '4',
            name: '上海',
          },
          {
            id: '5',
            name: '山东',
          },
          {
            id: '6',
            name: '广东',
          },
          {
            id: '7',
            name: '每座城市都很美丽，你最喜欢哪座城市呢',
          },
        ],
      };
    },
  };
</script>

显示代码 复制代码 复制代码

带前后置自定义文本的下拉框

ykc-dropdown 带前置自定义文本的下拉、带后置自定义文本的下拉

月

月份

<template>
  <ykc-dropdown
    :data="data"
    :remote="true"
    :multiple="true"
    :clearable="true"
    v-model="val9">
    <template slot="prepend">月</template>
  </ykc-dropdown>
   <ykc-dropdown :data="data" :remote="true" v-model="val10">
    <template slot="append">月份</template>
  </ykc-dropdown>
</template>

<script>
   export default {
    data() {
      return {
        val9: ['1', '7'],
        val10: '1',
        // 组件使用数据源
        data: [
          {
            id: '1',
            name: '江苏',
          },
          {
            id: '2',
            name: '浙江',
          },
          {
            id: '3',
            name: '安徽',
          },
          {
            id: '4',
            name: '上海',
          },
          {
            id: '5',
            name: '山东',
          },
          {
            id: '6',
            name: '广东',
          },
          {
            id: '7',
            name: '每座城市都很美丽，你最喜欢哪座城市呢',
          },
        ],
      };
    },
  };
</script>

显示代码 复制代码 复制代码

Attributes

参数	必填	说明	类型	可选值	默认值	备注
data	是	数据源	Array	—	[]	[ {name:"xxx",id:"xxx" }, ] name,id:对应的值
v-model	是	绑定值	Boolean / String / Number	—	—	—
placeholder	是	占位符	String	—	请选择	—
multiple	否	是否多选	Boolean	true/false	false	—
isMultiLine	否	是否多行	Boolean	true/false	false	—
remote	否	是否为远程搜索	Boolean	true/false	false	—
remote-method	否	远程搜索方法	function	—	—	—
searchMaxLength	否	远程搜索/大数据量搜索 渲染的最大条数	Number	—	1000	—
clearable	否	是否可以清空 即是否出现x清除所选数据	Boolean	true/false	false	—
isObject	否	通过change方法获取的值是object还是id单个值	Boolean	true/false	false	—
multipleLimit	否	多选时用户最多可以选择的项目数，为 0 则不限制 多选下拉使用	Number	—	—	—
noMatchText	否	搜索条件无匹配时显示的文字	String	—	无匹配数据	—
noDataText	否	选项为空时显示的文字	String	—	无数据	—
reserveKeyword	否	多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词	Boolean	true/false	false	—
configSet	否	配置选项，具体看备注说明	object	—	value,id	配置项为Object,配置数据key,包含label,value属性，列如：{label:'value',value:'id'}

Events

事件名称	说明	回调参数
change	选中值发生变化时触发	目前的选中值
blur	当 input 失去焦点时触发	(event: Event)
focus	当 input 失去焦点时触发	(event: Event)