更新记录

0.0.11（2024-05-21）

修复readme文档；

0.0.10（2024-05-21）

修复readme文档；

0.0.9（2024-05-21）

修复readme文档；

平台兼容性

uni-app

uni-app x

bsyy-uni-component-ts

指南

快速开始

下载插件并导入 HBuilderX

引入样式

• App.vue：

@import "@/uni_modules/bsyy-uni-components-ts/styles/style.scss";

注册组件

easycom 方式

• 配置 package.json：

{
    "easycom": {
        "custom": {
            "^bsyy-([^-].*)": "bsyy-uni-components-ts/components/bsyy-$1/bsyy-$1.vue"
        }
    }
}

• 使用 xxx.vue：

  <bsyy-dialog>Hello Dialog!</bsyy-dialog>

组件

Overview 总览

以下是 bsyy-uni-components-ts 提供的所有组件。

• Dialog 弹出框
• Picker 选择器
• Popup 弹出层
• ...正在开发中

点我查看效果

Dialog 弹出框

基本用法

<script lang="ts" setup>
    const show = ref(true);
</script>

<template>
    <button @click="show = true">打开 Dialog</button>
    <bsyy-dialog v-model:show="show">
        <view class="dialog">Hello Dialog!</view>
    </bsyy-dialog>
</template>

API

Attributes

Slots

Events

Picker 选择器

基本用法

<script lang="ts" setup>
    const modelValue = ref([0]);
    const columns = reactive([
        [
            { label: "汽车", value: 1 },
            { label: "高铁", value: 2 },
            { label: "飞机", value: 3 },
        ],
    ]);
</script>

<template>
    <bsyy-picker v-model="modelValue" :columns="columns" />
</template>

多选用法

<script lang="ts" setup>
    const modelValue = ref([0, 1]);
    const columns = reactive([
        [
            { label: "汽车", value: 1 },
            { label: "高铁", value: 2 },
            { label: "飞机", value: 3 },
        ],
        [
            { label: "矿泉水", value: 1 },
            { label: "汽水", value: 2 },
            { label: "果汁", value: 3 },
        ],
    ]);
</script>

<template>
    <bsyy-picker v-model="modelValue" :columns="columns" />
</template>

级联用法

<script lang="ts" setup>
    const citys = [
        {
            label: "北京",
            code: "0",
            children: [
                {
                    label: "北京市",
                    code: "00",
                    children: [
                        { label: "东城区", code: "000" },
                        { label: "西城区", code: "001" },
                        { label: "崇文区", code: "002" },
                    ],
                },
            ],
        },
        {
            label: "浙江省",
            code: "1",
            children: [
                {
                    label: "杭州市",
                    code: "10",
                    children: [
                        { label: "上城区", code: "100" },
                        { label: "下城区", code: "101" },
                    ],
                },
                {
                    label: "宁波市",
                    code: "11",
                    children: [
                        { label: "海曙区", code: "110" },
                        { label: "江东区", code: "111" },
                    ],
                },
            ],
        },
    ];
const citys = [
    {
        label: "北京",
        code: "0",
        children: [
            {
                label: "北京市",
                code: "00",
                children: [
                    { label: "东城区", code: "000" },
                    { label: "西城区", code: "001" },
                    { label: "崇文区", code: "002" },
                ],
            },
        ],
    },
    {
        label: "浙江省",
        code: "1",
        children: [
            {
                label: "杭州市",
                code: "10",
                children: [
                    { label: "上城区", code: "100" },
                    { label: "下城区", code: "101" },
                ],
            },
            {
                label: "宁波市",
                code: "11",
                children: [
                    { label: "海曙区", code: "110" },
                    { label: "江东区", code: "111" },
                ],
            },
        ],
    },
];
    const modelValue = ref([0, 0, 0]);
    const columns: { label: string; value: string }[][] = reactive([[], [], []]);
    columns[0] = citys.map((v) => ({ label: v.label, value: v.code }));
    const change = (e: { selectedValues: string[]; selectedOptions: { label: string; value: string }[][]; selectedIndexes: number[]; columnIndex: number }) => {
        if (e.columnIndex == 0) {
            modelValue.value[1] = 0;
            modelValue.value[2] = 0;
        } else if (e.columnIndex == 1) {
            modelValue.value[2] = 0;
        }
        countColumns();
    };
    countColumns();
    function countColumns() {
        columns[1] = citys[modelValue.value[0]].children.map((v) => ({ label: v.label, value: v.code }));
        columns[2] = citys[modelValue.value[0]].children[modelValue.value[1]].children.map((v) => ({ label: v.label, value: v.code }));
    }
</script>

<template>
    <bsyy-picker v-model="modelValue" :columns="columns" @change="change($event)" />
</template>

API

Attributes

Events

Popup 弹出层

基本用法

<script lang="ts" setup>
    const show = ref(true);
</script>

<template>
    <button @click="show = true">打开 Popup</button>
    <bsyy-popup v-model:show="show">
        <view class="popup">Hello Popup!</view>
    </bsyy-popup>
</template>

API

Attributes

Slots

Events

更多

欢迎提出在留言区提出你需要的功能或 bug。