更新记录

1.0.0（2023-09-16） 下载此版本

1、添加选中包装盒组件 2、添加示例

平台兼容性

uni-app

cc-packing-box 选中包装盒组件

主要用于选中状态标识。

基本用法

• 设置 color 属性，可以设置选中时外部包裹颜色
• 设置 borderWidth 属性，可以设置边框宽度
• 设置 round 属性，可以设置圆角
• 设置 active 属性，可以设置选中状态

<template>
    <view>
        <view class="list">
            <cc-packing-box color="#316ffe" borderWidth="2rpx" round="10rpx" :active="currentArry.includes(index)"
                @click="select($event, index)" v-for="(item, index) in dataList" :key="index">
                <view class="box">
                    <text>{{item.name}}</text>
                </view>
            </cc-packing-box>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                currentArry: [],
                dataList: [{
                    name: '语文'
                }, {
                    name: '数学'
                }, {
                    name: '英语'
                }, {
                    name: '物理'
                }]
            }
        },
        onLoad() {},
        methods: {
            select(e, index) {
                const i = this.currentArry.findIndex(item => item == index)
                if (i != -1) {
                    this.currentArry.splice(i, 1)
                } else {
                    this.currentArry.push(index)
                }
            }
        }
    }
</script>

<style>
    .list {
        display: flex;
    }

    .box {
        width: 120rpx;
        height: 50rpx;
        background: #ff6c17;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10rpx;
    }

    .cc-packing-box {
        margin: 24rpx;
    }
</style>