Appearance

iuiDesign
100%
02:32
本页目录

用于一组预设数据中的选择。

基本使用 ​

通过 options 属性设置选择器的选项，通过 v-model:visible 控制选择器的显示。

html
<iui-picker v-model:visible="visible" :options="single"></iui-picker>

<script setup>
  import { ref, onMounted } from "vue";

  // 单列数据
  const single = ["Beijing", "Shanghai", "Guangdong", "Fujian", "Hebei"];
  const visible = ref(false);

  onMounted(() => {
    visible.value = true;
  });
</script>
<iui-picker v-model:visible="visible" :options="single"></iui-picker>

<script setup>
  import { ref, onMounted } from "vue";

  // 单列数据
  const single = ["Beijing", "Shanghai", "Guangdong", "Fujian", "Hebei"];
  const visible = ref(false);

  onMounted(() => {
    visible.value = true;
  });
</script>

函数调用 ​

通过 ref 获取选择器实例，调用 open 方法打开选择器。

html
<iui-picker ref="picker"></iui-picker>

<script setup>
  import { ref, onMounted } from "vue";

  // 定义多列数据
  const multiple = [
    [
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
      "Sunday",
    ],
    ["Morning", "Afternoon", "Evening"],
  ];
  const picker = ref(false);

  onMounted(() => {
    picker.value.open({
      options: multiple,
    });
  });
</script>
<iui-picker ref="picker"></iui-picker>

<script setup>
  import { ref, onMounted } from "vue";

  // 定义多列数据
  const multiple = [
    [
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
      "Sunday",
    ],
    ["Morning", "Afternoon", "Evening"],
  ];
  const picker = ref(false);

  onMounted(() => {
    picker.value.open({
      options: multiple,
    });
  });
</script>

级联选择 ​

html
<iui-picker ref="picker" @change="onChange"></iui-picker>

<script setup>
  import { ref, onMounted } from "vue";

  const cascadeOptions = ["Fujian", "Sichuan", "Hainan"];

  const cities = [
    [
      "Fuzhou",
      "Xiamen",
      "Quanzhou",
      "Putian",
      "Sanming",
      "Nanping",
      "Zhangzhou",
      "Longyan",
      "Ningde",
    ],
    [
      "Chengdu",
      "Zigong",
      "Panzhihua",
      "Luzhou",
      "Deyang",
      "Mianyang",
      "Guangyuan",
      "Suining",
      "Neijiang",
      "Leshan",
      "Nanchong",
      "Meishan",
      "Yibin",
    ],
    [
      "Haikou",
      "Sanya",
      "Sansha",
      "Wuzhishan",
      "Qionghai",
      "Wenchang",
      "Wanning",
    ],
  ];
  const picker = ref(false);

  onMounted(() => {
    picker.value.open({
      options: cascadeOptions,
    });
  });

  const onChange = (e) => {
    if (e.changedCol == 0) {
      // 根据第一列的值，更新第二列的选项
      picker.value.setOptions(1, cities[e.index[0]]);
    }
  };
</script>
<iui-picker ref="picker" @change="onChange"></iui-picker>

<script setup>
  import { ref, onMounted } from "vue";

  const cascadeOptions = ["Fujian", "Sichuan", "Hainan"];

  const cities = [
    [
      "Fuzhou",
      "Xiamen",
      "Quanzhou",
      "Putian",
      "Sanming",
      "Nanping",
      "Zhangzhou",
      "Longyan",
      "Ningde",
    ],
    [
      "Chengdu",
      "Zigong",
      "Panzhihua",
      "Luzhou",
      "Deyang",
      "Mianyang",
      "Guangyuan",
      "Suining",
      "Neijiang",
      "Leshan",
      "Nanchong",
      "Meishan",
      "Yibin",
    ],
    [
      "Haikou",
      "Sanya",
      "Sansha",
      "Wuzhishan",
      "Qionghai",
      "Wenchang",
      "Wanning",
    ],
  ];
  const picker = ref(false);

  onMounted(() => {
    picker.value.open({
      options: cascadeOptions,
    });
  });

  const onChange = (e) => {
    if (e.changedCol == 0) {
      // 根据第一列的值，更新第二列的选项
      picker.value.setOptions(1, cities[e.index[0]]);
    }
  };
</script>

API ​

<Picker>props
参数描述类型默认值
modelValue (v-model)当前选中项Array[]
options选项列表Array[]
visible (v-model)是否显示Booleanfalse
title标题String-
radius圆角Number6
<Picker>events
事件名描述参数
confirm点击确定按钮时触发modelValue: Array
change选中值变化时触发(value: Array, index: Array, changeCol: Number)
close面板关闭时触发-
<Picker>methods
方法名描述参数
open打开面板props: Object
setOptions设置选项列表(col: Number, options: Array)