TUI

<template>
  <TsSelect v-model="cityValue" :options="cityList" placeholder="请选择城市" @change="changeCity" />
</template>

<script setup lang="ts">
  const cityList = [
    { label: '北京', value: '北京' },
    { label: '上海', value: '上海' },
    { label: '广州', value: '广州' },
    { label: '深圳', value: '深圳' },
  ];
  const cityValue = ref('北京');

  const changeCity = (val: string) => {
    console.log('选中的城市：', val);
  }
</script>

<template>
  <TsSelect v-model="cityValue" clearable :options="cityList" placeholder="请选择城市" @change="changeCity" />
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const cityList = [
    { label: '北京', value: '北京' },
    { label: '上海', value: '上海' },
    { label: '广州', value: '广州' },
    { label: '深圳', value: '深圳' },
  ];
  const cityValue = ref('北京');

  const changeCity = (val: string) => {
    console.log('选中的城市：', val);
  }
</script>

<template>
  <TsSelect v-model="disabledValue" :options="cityList" placeholder="禁用状态" disabled />
  <TsSelect v-model="disabledOptionValue" :options="cityDisabledList" placeholder="请选择城市" />
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const cityList = [
    { label: '北京', value: '北京' },
    { label: '上海', value: '上海' },
    { label: '广州', value: '广州' },
    { label: '深圳', value: '深圳' },
  ];

  const cityDisabledList = [
    { label: '北京', value: '北京' },
    { label: '上海', value: '上海' },
    { label: '广州', value: '广州', disabled: true },
    { label: '深圳', value: '深圳' },
    { label: '重庆', value: '重庆' },
  ];

  const disabledValue = ref('广州');
  const disabledOptionValue = ref('');

</script>

<template>
  <TsSelect style="width: 200px" multiple v-model="multipleValue" :options="cityList" placeholder="请选择城市" />
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const cityList = [
    { label: '北京', value: '北京' },
    { label: '上海', value: '上海' },
    { label: '广州', value: '广州' },
    { label: '深圳', value: '深圳' },
  ];
  const cityValue = ref('北京');

  const changeCity = (val: string) => {
    console.log('选中的城市：', val);
  }
</script>

<template>
  <TsSelect style="width: 200px" filterable v-model="disabledValue" :options="cityDisabledList" placeholder="请选择城市" />
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const cityList = [
    { label: '北京', value: '北京' },
    { label: '上海', value: '上海' },
    { label: '广州', value: '广州' },
    { label: '深圳', value: '深圳' },
  ];
  const cityValue = ref('北京');

  const changeCity = (val: string) => {
    console.log('选中的城市：', val);
  }
</script>

<template>
  <TsSelect v-model="errorValue" :options="cityList" placeholder="请选择城市" error errorText="该字段为必填项" />
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const cityList = [
    { label: '北京', value: '北京' },
    { label: '上海', value: '上海' },
    { label: '广州', value: '广州' },
    { label: '深圳', value: '深圳' },
  ];
  const errorValue = ref('');
</script>

<template>
  <TsSelect v-model="smallValue" :options="cityList" size="small" placeholder="小尺寸" />
  <TsSelect v-model="defaultValue" :options="cityList" size="medium" placeholder="默认尺寸" />
  <TsSelect v-model="largeValue" :options="cityList" size="large" placeholder="大尺寸" />
  <TsSelect v-model="xlargeValue" :options="cityList" size="x-large" placeholder="超大尺寸" />
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const cityList = [
    { label: '北京', value: '北京' },
    { label: '上海', value: '上海' },
    { label: '广州', value: '广州' },
    { label: '深圳', value: '深圳' },
  ];

  const smallValue = ref('');
  const defaultValue = ref('');
  const largeValue = ref('');
  const xlargeValue = ref('');
</script>