更新记录

0.0.5（2024-05-09）

更新文档；

0.0.4（2024-05-09）

更新效果演示；

0.0.3（2024-05-09）

新增弹出层； 新增选择器； 文档新增效果预览；

平台兼容性

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>

<style>
    .dialog {
        width: 200rpx;
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 10rpx;
        box-shadow: 0 0 3rpx 1rpx royalblue;
    }
</style>

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", children: [] },
                        { label: "西城区", code: "001", children: [] },
                        { label: "崇文区", code: "002", children: [] },
                    ],
                },
            ],
        },
        {
            label: "浙江省",
            code: "1",
            children: [
                {
                    label: "杭州市",
                    code: "10",
                    children: [
                        {
                            label: "上城区",
                            code: "100",
                            children: [],
                        },
                    ],
                },
            ],
        },
    ];
    const modelValue3 = ref([0, 0, 0]);
    const columns3: { label: string; value: string }[][] = reactive([[], [], []]);
    columns3[0] = citys.map((v) => ({ label: v.label, value: v.code }));
    const countColumns3 = () => {
        modelValue3.value[2] = modelValue3.value[1] = 0;
        columns3[1] = citys[modelValue3.value[0]].children.map((v) => ({ label: v.label, value: v.code }));
        columns3[2] = citys[modelValue3.value[0]].children[modelValue3.value[1]].children.map((v) => ({ label: v.label, value: v.code }));
    };
    countColumns3();
</script>

<template>
    <bsyy-picker v-model="modelValue" :columns="columns" @change="countColumns($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>

<style lang="scss" scoped>
    .popup {
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 10rpx;
        box-shadow: 0 0 3rpx 1rpx royalblue;
    }
</style>

API

Attributes

Slots

Events

更多

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