沃梦达 / IT编程 / 前端开发 / 正文

Select 选择器显示内容为icon图标选项(Ant Design of Vue)

templatediva-select size=large placeholder=请选择图标 style=width: 200px @change=handleChangea-select-optionv-for=i in seleiconlist:key=i.keya-icon :type=i.value style=font-siz...

<template>
  <div>
    <a-select size="large" placeholder="请选择图标" style="width: 200px" @change="handleChange">
      <a-select-option
        v-for="i in seleiconlist"
        :key="i.key"
      ><a-icon :type="i.value" style="font-size: 18px;"/></a-select-option>
    </a-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      seleiconlist:[
        {key:"account-book",value:"account-book"},
        {key:"appstore",value:"appstore"},
        {key:"bank",value:"bank"},
        {key:"book",value:"book"},
        {key:"clock-circle",value:"clock-circle"},
        {key:"snippets",value:"snippets"}
      ]
    };
  },
  mounted() {},
  methods: {
    handleChange(value) {
      console.log(`Selected: ${value}`);
    },
  }
};
</script>
<style scoped>
</style>

本文标题为:Select 选择器显示内容为icon图标选项(Ant Design of Vue)