基础使用

基础用法

SunlightCascader 是基于 Element Plus Cascader 的增强型级联选择器组件，支持单选、多选、可查询等功能。

当前选择值：暂无选择

<script setup lang="ts">
import { ref } from "vue";
import { SunlightCascader } from "sunlight-ui";

// 基础用法示例数据
const cascaderValue = ref("");
const options = [
  {
    value: 'zhinan',
    label: '指南',
    children: [
      {
        value: 'shejiyuanze',
        label: '设计原则',
        children: [
          { value: 'yizhi', label: '一致' },
          { value: 'fankui', label: '反馈' },
          { value: 'xiaolu', label: '效率' }
        ]
      },
      {
        value: 'daohang',
        label: '导航',
        children: [
          { value: 'cexiangdaohang', label: '侧向导航' },
          { value: 'dingbudaohang', label: '顶部导航' }
        ]
      }
    ]
  },
  {
    value: 'zujian',
    label: '组件',
    children: [
      {
        value: 'basic',
        label: 'Basic',
        children: [
          { value: 'layout', label: 'Layout 布局' },
          { value: 'color', label: 'Color 色彩' }
        ]
      },
      {
        value: 'form',
        label: 'Form',
        children: [
          { value: 'radio', label: 'Radio 单选框' },
          { value: 'checkbox', label: 'Checkbox 多选框' }
        ]
      }
    ]
  }
];
</script>

<template>
  <div>
    <div style="margin-bottom: 20px;">
      <SunlightCascader 
        v-model="cascaderValue" 
        :item="{
          placeholder: '请选择内容...',
          clearable: true,
          options: options,
          showAllLevels: true,
          separator: '/',
          wrapperStyle: {
            borderColor: '#c0c4cc',
            focusBorderColor: '#409eff'
          }
        }" 
      />
    </div>
    <div style="margin-top: 20px;">
      <p>当前选择值：{{ cascaderValue || '暂无选择' }}</p>
    </div>
  </div>
</template>

<style scoped>
</style>

隐藏源代码

可查询功能

通过设置 filterable: true 开启可查询功能，支持根据输入关键词过滤选项。

当前选择值：暂无选择

<script setup lang="ts">
import { ref } from "vue";
import { SunlightCascader } from "sunlight-ui";

// 可查询功能示例数据
const cascaderValue = ref("");
const options = [
  {
    value: 'zhinan',
    label: '指南',
    children: [
      {
        value: 'shejiyuanze',
        label: '设计原则',
        children: [
          { value: 'yizhi', label: '一致' },
          { value: 'fankui', label: '反馈' },
          { value: 'xiaolu', label: '效率' }
        ]
      },
      {
        value: 'daohang',
        label: '导航',
        children: [
          { value: 'cexiangdaohang', label: '侧向导航' },
          { value: 'dingbudaohang', label: '顶部导航' }
        ]
      }
    ]
  },
  {
    value: 'zujian',
    label: '组件',
    children: [
      {
        value: 'basic',
        label: 'Basic',
        children: [
          { value: 'layout', label: 'Layout 布局' },
          { value: 'color', label: 'Color 色彩' }
        ]
      }
    ]
  }
];
</script>

<template>
  <div>
    <div style="margin-bottom: 20px;">
      <SunlightCascader 
        v-model="cascaderValue" 
        :item="{
          placeholder: '请输入关键词搜索...',
          clearable: true,
          filterable: true,
          options: options,
          showAllLevels: true,
          wrapperStyle: {
            borderColor: '#c0c4cc',
            focusBorderColor: '#409eff'
          }
        }" 
      />
    </div>
    <div style="margin-top: 20px;">
      <p>当前选择值：{{ cascaderValue || '暂无选择' }}</p>
    </div>
  </div>
</template>

<style scoped>
</style>

隐藏源代码

自定义分隔符

通过设置 separator 属性可以自定义级联选择器的分隔符，默认分隔符为 /。

默认分隔符 (/)：指南/设计原则/一致

竖线分隔符 (|)：指南|设计原则|一致

箭头分隔符 (→)：指南→设计原则→一致

点分隔符 (.)：指南.设计原则.一致

<script setup lang="ts">
import { ref } from "vue";
import { SunlightCascader } from "sunlight-ui";

// 自定义分隔符示例数据
const cascaderValue1 = ref("");
const cascaderValue2 = ref("");
const cascaderValue3 = ref("");
const cascaderValue4 = ref("");
const options = [
  {
    value: 'zhinan',
    label: '指南',
    children: [
      {
        value: 'shejiyuanze',
        label: '设计原则',
        children: [
          { value: 'yizhi', label: '一致' },
          { value: 'fankui', label: '反馈' },
          { value: 'xiaolu', label: '效率' }
        ]
      },
      {
        value: 'daohang',
        label: '导航',
        children: [
          { value: 'cexiangdaohang', label: '侧向导航' },
          { value: 'dingbudaohang', label: '顶部导航' }
        ]
      }
    ]
  },
  {
    value: 'zujian',
    label: '组件',
    children: [
      {
        value: 'basic',
        label: 'Basic',
        children: [
          { value: 'layout', label: 'Layout 布局' },
          { value: 'color', label: 'Color 色彩' }
        ]
      },
      {
        value: 'form',
        label: 'Form',
        children: [
          { value: 'radio', label: 'Radio 单选框' },
          { value: 'checkbox', label: 'Checkbox 多选框' }
        ]
      }
    ]
  }
];
</script>

<template>
  <div>
    <div style="margin-bottom: 20px">
      <div style="margin-bottom: 8px">默认分隔符 (/)：指南/设计原则/一致</div>
      <SunlightCascader
        v-model="cascaderValue1"
        :item="{
          placeholder: '请选择内容...',
          clearable: true,
          options: options,
          showAllLevels: true,
          separator: '/',
        }"
      />
    </div>

    <div style="margin-bottom: 20px">
      <div style="margin-bottom: 8px">竖线分隔符 (|)：指南|设计原则|一致</div>
      <SunlightCascader
        v-model="cascaderValue2"
        :item="{
          placeholder: '请选择内容...',
          clearable: true,
          options: options,
          showAllLevels: true,
          separator: '|',
        }"
      />
    </div>

    <div style="margin-bottom: 20px">
      <div style="margin-bottom: 8px">箭头分隔符 (→)：指南→设计原则→一致</div>
      <SunlightCascader
        v-model="cascaderValue3"
        :item="{
          placeholder: '请选择内容...',
          clearable: true,
          options: options,
          showAllLevels: true,
          separator: '→',
        }"
      />
    </div>

    <div style="margin-bottom: 20px">
      <div style="margin-bottom: 8px">点分隔符 (.)：指南.设计原则.一致</div>
      <SunlightCascader
        v-model="cascaderValue4"
        :item="{
          placeholder: '请选择内容...',
          clearable: true,
          options: options,
          showAllLevels: true,
          separator: '.',
        }"
      />
    </div>
  </div>
</template>

隐藏源代码

文档说明

SunlightCascader Props 配置项

属性名	说明	类型	默认值
modelValue	绑定值，支持双向数据绑定	string number array	null
item	级联选择器配置对象，包含各种属性和样式配置	object	{}

item 配置对象

属性名	说明	类型	默认值
disabled	是否禁用级联选择器	boolean	false
clearable	是否显示清除按钮	boolean	false
placeholder	级联选择器占位符	string	'请选择'
size	级联选择器尺寸	string	'default'
options	选项数据数组	array	[]
filterable	是否可查询	boolean	false
multiple	是否支持多选	boolean	false
showAllLevels	是否显示完整路径	boolean	true
collapseTags	多选时是否折叠标签	boolean	false
separator	选项分隔符	string	'/'
customClass	自定义样式类	string	-
customStyle	自定义内联样式	object	-
wrapperStyle	边框和样式配置对象	object	-
config	额外属性配置，支持传入任意属性	object	{}
eventFunction	事件处理函数对象	object	{}
slotNames	插槽名称数组	array	[]

wrapperStyle 配置对象

属性名	说明	类型	默认值
borderColor	级联选择器边框颜色	string	'#c0c4cc'
borderRadius	级联选择器圆角大小	string	'4px'
backgroundColor	级联选择器背景色	string	'#ffffff'
boxShadow	级联选择器阴影效果	string	'none'
focusBorderColor	聚焦时边框颜色	string	'#409eff'
focusBoxShadow	聚焦时阴影效果	string	'0 0 0 3px rgba(64, 158, 255, 0.15)'

相关链接

• Element Plus Cascader 文档