更新记录

1.0.1（2022-04-01）

插槽名修改

1.0.0（2022-03-25）

蓝星软件-分类选择

平台兼容性

bluestar-TreeSelect

分类选择

引入

在script标签中引入组件

//使用HBuilderX导入插件
import TreeSelect from "@/uni_modules/bluestar-TreeSelect/components/bluestar-TreeSelect/bluestar-TreeSelect.vue"

//使用npm install
import TreeSelect from "bluestar-treeselect/components/bluestar-TreeSelect/bluestar-TreeSelect.vue"

代码演示

<template>
    <view class="test">
        <TreeSelect color="#36D6B6" :left-items="leftItems" :right-items="rightItems" @click-nav="clickNav">
            <!--自定义左侧显示字段名-->
            <template #left="slotProps">
                {{ slotProps.value.text }}
            </template>
            <!--自定义右侧模板-->
            <template #right="slotProps">
                <view class="card">{{ slotProps.value.text }}</view>
            </template>
        </TreeSelect>
    </view>
</template>

<script setup lang="ts">
import {reactive} from "vue"

const leftItems = reactive([
    {
        text : '左侧选项一',
    },
    {
        text : '左侧选项二',
    },
    {
        text : '左侧选项三',
        disabled : true
    },
])
const rightItems = reactive([
    {
        text : '右侧选项一',
    },
    {
        text : '右侧选项二',
    },
    {
        text : '右侧选项三',
    },
    {
        text : '右侧选项四',
    },
    {
        text : '右侧选项五',
    },
    {
        text : '右侧选项六',
    },
])

const clickNav = (value : any, index : number) => {
    console.log(value)
    console.log(index)
}
</script>

<style lang="scss" scoped>
.card {
    width: 100%;
    height: vw(100);
    border: vw(2) solid #e1e1e1;
    border-radius: vw(10);
    margin: 0 0 vw(20) 0;
}
</style>

API

Props

Events

Slots

left-items数据结构

考虑到现有业务范围和接口返回模型，暂未提供子选项children渲染右侧数组。

[
  {
    // 禁用选项
    "disabled": false
  }
]

作者