更新记录

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>