Sard Uniapp

Appearance

在新窗口打开⤴

CascaderPopout级联弹出框1.16+

介绍 ​

组合了级联选择、弹出框组件，实现了便捷快速的级联选择功能。

引入 ​

js
import CascaderPopout from 'sard-uniapp/components/cascader-popout/cascader-popout.vue'

代码演示 ​

基础使用 ​

使用 v-model 双向绑定当前值，使用 v-model:visible 控制弹出框显隐。

vue
<template>
  <sar-cascader-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择省市区"
    :options="regionData"
    :field-keys="{ label: 'name', value: 'code' }"
    @change="onChange"
  />

  <sar-list card>
    <sar-list-item>
      <sar-button @click="visible = true">
        {{ value ? value : '请选择' }}
      </sar-button>
    </sar-list-item>
    <sar-list-item
      title="设置为：440111 (广东省/广州市/白云区)"
      arrow
      hover
      @click="value = 440111"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getRegionData } from 'region-data'
import { type CascaderOption } from 'sard-uniapp'

const regionData = getRegionData()
const visible = ref(false)
const value = ref<number | undefined>(150102)

const onChange = (value: any, selectedOptions: CascaderOption[]) => {
  console.log('change', value, selectedOptions)
}
</script>
vue
<template>
  <sar-cascader-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择省市区"
    :options="regionData"
    :field-keys="{ label: 'name', value: 'code' }"
    @change="onChange"
  />

  <sar-list card>
    <sar-list-item>
      <sar-button @click="visible = true">
        {{ value ? value : '请选择' }}
      </sar-button>
    </sar-list-item>
    <sar-list-item
      title="设置为：440111 (广东省/广州市/白云区)"
      arrow
      hover
      @click="value = 440111"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
import { getRegionData } from "region-data";
const regionData = getRegionData();
const visible = ref(false);
const value = ref(150102);
const onChange = (value2, selectedOptions) => {
  console.log("change", value2, selectedOptions);
};
</script>

多选 ​

设置 multiple 可进行多选。

vue
<template>
  <sar-cascader-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择省市区"
    :options="regionData"
    :field-keys="{ label: 'name', value: 'code' }"
    multiple
    all-levels
    check-strictly
    @change="onChange"
  />

  <sar-list card>
    <sar-list-item
      :title="value ? JSON.stringify(value) : '请选择'"
      arrow
      hover
      @click="visible = true"
    />
    <sar-list-item
      title="设置为：[[440000, 440100, 440106], [440000, 440100, 440111]] ([天河区, 白云区])"
      arrow
      hover
      @click="
        value = [
          [440000, 440100, 440106],
          [440000, 440100, 440111],
        ]
      "
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getRegionData } from 'region-data'
import { type CascaderOption, type CascaderValue } from 'sard-uniapp'

const regionData = getRegionData()
const visible = ref(false)
const value = ref<CascaderValue | undefined>([
  [440000, 440100, 440106],
  [440000, 440100, 440111],
])

const onChange = (value: any, selectedOptions: CascaderOption[]) => {
  console.log('change', value, selectedOptions)
}
</script>
vue
<template>
  <sar-cascader-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择省市区"
    :options="regionData"
    :field-keys="{ label: 'name', value: 'code' }"
    multiple
    all-levels
    check-strictly
    @change="onChange"
  />

  <sar-list card>
    <sar-list-item
      :title="value ? JSON.stringify(value) : '请选择'"
      arrow
      hover
      @click="visible = true"
    />
    <sar-list-item
      title="设置为：[[440000, 440100, 440106], [440000, 440100, 440111]] ([天河区, 白云区])"
      arrow
      hover
      @click="
        value = [
          [440000, 440100, 440106],
          [440000, 440100, 440111],
        ]
      "
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
import { getRegionData } from "region-data";
const regionData = getRegionData();
const visible = ref(false);
const value = ref([
  [44e4, 440100, 440106],
  [44e4, 440100, 440111]
]);
const onChange = (value2, selectedOptions) => {
  console.log("change", value2, selectedOptions);
};
</script>

API ​

CascaderPopoutProps ​

继承 CascaderProps 并有以下额外属性：

属性描述类型默认值
popout-class弹窗框根元素类名string-
popout-style弹窗框根元素样式StyleValue-
visible (v-model)是否显示弹出框boolean-
title弹出框标题string-
show-confirm是否显示确定按钮，隐藏按钮可用于快捷选择booleantrue
validate-event是否触发表单验证booleantrue
resettable 1.23.3+关闭弹出框后，是否可复位弹出框值booleanfalse

CascaderPopoutSlots ​

继承 CascaderSlots

CascaderPopoutEmits ​

事件描述类型
update:model-value级联输入组件值改变时触发(value: string | number, selectedOptions: CascaderOption[]) => void
change级联输入组件值改变时触发(value: string | number, selectedOptions: CascaderOption[]) => void
select选择级联选择某一项时触发(option: CascaderOption, tabIndex: number) => void
update:visible弹出框显隐时触发(visible: boolean) => void
confirm 1.22.1+点击确定按钮时触发() => void
visible-hook 1.22.1+入场/退场动画状态改变时触发(name: TransitionHookName) => void
before-enter 1.22.1+入场动画开始前触发() => void
enter 1.22.1+入场动画开始时触发() => void
after-enter 1.22.1+入场动画结束时触发() => void
enter-cancelled 1.22.1+入场动画取消时触发() => void
before-leave 1.22.1+退场动画开始前触发() => void
leave 1.22.1+退场动画开始时触发() => void
after-leave 1.22.1+退场动画结束时触发() => void
leave-cancelled 1.22.1+退场动画取消时触发() => void

Released under the MIT License.

Copyright © 2023-present wuzhitao