更新记录

1.0.0(2020-09-21) 下载此版本

1.0.0


平台兼容性

基本使用


<template>
    <view class="content">
        <text class="title">基本1:</text>

        <view class="row">
            <template v-for="item in list">
                <status-tag class="tag" :key="item.key" :value="item.state" :valueMaps="[[0, '警告'], [1, '正常']]" :bgMaps="[[0, '#FFB27D'], [1, '#0CD096']]"></status-tag>
            </template>
        </view>

        <text class="title">基本2:</text>
        <view class="row">
            <template v-for="item in list2">
                <status-tag class="tag" :key="item.key" :value="item.state" :valueMaps="[[0, `${item.name}禁用`], [1, `${item.name}正常`]]" :bgMaps="[[0, '#808080'], [1, '#0CD096']]"></status-tag>
            </template>
        </view>

        <text class="title">静态文本:</text>
        <view class="row">
            <template v-for="item in list2">
                <status-tag class="tag" :key="item.key" :value="item.state"  staticText="在线状态" :bgMaps="[[0, '#808080'], [1, '#0CD096']]"></status-tag>
            </template>
        </view>

        <text class="title">点状(默认大小):</text>
        <view class="row">
            <template v-for="item in list2">
                <status-tag class="tag" dot :key="item.key" :value="item.state" :bgMaps="[[0, '#808080'], [1, '#0CD096']]"></status-tag>
            </template>
        </view>

        <text class="title">点状(small):</text>
        <view class="row">
            <template v-for="item in list2">
                <status-tag class="tag" dot small :key="item.key" :value="item.state" :bgMaps="[[0, '#808080'], [1, '#0CD096']]"></status-tag>
            </template>
        </view>

        <text class="title">点状(large):</text>
        <view class="row">
            <template v-for="item in list2">
                <status-tag class="tag" dot large :key="item.key" :value="item.state" :bgMaps="[[0, '#808080'], [1, '#0CD096']]"></status-tag>
            </template>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    key: 1,
                    state: 1
                },
                {
                    key: 2,
                    state: 0
                }
            ],
            list2: [
                {
                    key: 1,
                    state: 1,
                    name: '钱包'
                },
                {
                    key: 2,
                    state: 0,
                    name: '支付功能'
                }
            ]
        }
    },
    onLoad() {},
    methods: {}
}
</script>

<style lang="scss" scoped>
.content {
    flex: 1;
    padding: 30rpx;
}

.title {
    color: $uni-text-color;
    font-size: $uni-font-size-base;
    margin-bottom: 10px;
}

.row{
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}
.tag{
    margin-right: 10px;
}
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问