更新记录

1.0.2（2024-12-21） 下载此版本

把单位改成rpx

1.0.1（2024-12-20） 下载此版本

修改readme

1.0.0（2024-12-20） 下载此版本

第一版，在chrome和小程序开发工具测试了一下。

平台兼容性

w-checkbox

这是一个简单的checkbox组件，以MIT许可开源。

<template>
    <view>
        <view class="block">
            <w-checkbox :checked="agree" @change="(checked)=> agree = checked"></w-checkbox> 同意杨庆荣开源许可MIT
            <view v-if="agree">已经同意</view>
            <view>agree:{{agree}} </view>
        </view>
        <view  class="block">
            <view>

                <w-checkbox :checked="langs_are_checked" @change="langs_are_checked_OnChange"></w-checkbox> 全选
            </view>
            <view v-for="(lang,index) in langs" class="checkbox">
                <w-checkbox   :checked="lang.checked" @change="(checked)=>lang_item_change(lang,index,checked)"  ></w-checkbox> {{lang.text}}

            </view>
            <view class="code">
                全选: {{langs_are_checked}}
            </view>
            <view class="code">
                json: {{langs}}
            </view>
            <view class="code">
                selected_values: {{selected_values}}
            </view>

            <view @click="get_selected_values()">获取选中值</view>
        </view>
    </view>

</template>

<script>
    export default {
        data() {
            return {
                agree: false,
                langs_are_checked: false,
                langs:[
                    {
                        checked:true,
                        value:'php',
                        text:'PHP语言',
                    },
                    {
                        checked:true,
                        value:'es',
                        text:'ECMAScript语言',
                    },
                    {
                        checked:true,
                        value:'rs',
                        text:'Rust语言',
                    },
                    {
                        checked:false,
                        value:'wudimei',
                        text:'wudimei模板语言',
                    },
                ],
                selected_values:''
            }
        },
        onLoad() {

        },
        methods: {
            langs_are_checked_OnChange(checked){
                this.langs_are_checked = checked;
                this.langs.forEach(item=>item.checked=this.langs_are_checked);
            },
            lang_item_change(lang,index,checked){
                lang.checked = checked;
                this.langs_are_checked = !this.langs.some(item=>item.checked===false); 
            },

            get_selected_values(){
                this.selected_values = this.langs.filter(item=>item.checked===true).map(item=>item.value).join(',');
            }
        }
    }
</script>

<style>
    .block{

        padding:10px;
    }
    .code{
        margin-top: 10px;
        color:#666;
    }
    .checkbox{
         display: inline-block;
        margin-right: 5px;
    }

</style>