Select 下拉框

基本使用

<template>
  <lii-select :options="options"></lii-select>
</template>

<script setup>
import { reactive } from "vue";
const state = reactive({
  options: [
    {
      label: "选项一",
      value: "0",
    },
    {
      label: "选项二",
      value: "1",
    },
    {
      label: "选项三",
      value: "2",
    }
  ],
});
const { options } = state;
</script>

禁用状态

<template>
  <lii-select
    :options="options"
    filedLabel="name"
    filedValue="id"
  ></lii-select>
</template>

<script setup>
import { reactive } from "vue";
const state = reactive({
  options: [
    {
      name: "选项一",
      id: "0",
    },
    {
      name: "选项二",
      id: "1",
    },
    {
      name: "选项三",
      id: "2",
    }
  ],
});
const { options } = state;
</script>

默认选中

<template>
  <lii-select
    :options="options"
    filedLabel="name"
    filedValue="id"
    @change="getSelect"
  ></lii-select>
</template>

<script setup>
import { reactive, ref } from "vue";
const selVal=ref('0');
const state = reactive({
  options: [
    {
      name: "选项一",
      id: "0",
    },
    {
      name: "选项二",
      id: "1",
    },
    {
      name: "选项三",
      id: "2",
    }
  ],
});
const { options } = state;
const getSelect = (v) => {
  console.log(v);
};
</script>

属性

参数	说明	类型	可选值	默认值
options	渲染选项数据	Boolean	——	true
disabled	选框是否可用	Boolean	——	true
filedLabel	选择选项名	String	——	label
filedValue	选择选项值	String	——	value
placeholder	选框默认值	String	——	请选择

事件

事件名称	说明	回调参数	示例
change	选项发生变化时触发	(event: Value)	change=(value)=>{console.log(value)}