You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
4.5 KiB
159 lines
4.5 KiB
<template>
|
|
<view>
|
|
<uni-card is-full>
|
|
<text class="uni-h6">通过数据驱动的单选框和复选框，可直接通过连接 uniCloud 获取数据，同时可以配合表单组件 uni-forms 使用</text>
|
|
</uni-card>
|
|
<uni-section title="单选" type="line">
|
|
<view class="uni-px-5 uni-pb-5">
|
|
<view class="text">单选选中：{{JSON.stringify(radio1)}}</view>
|
|
<uni-data-checkbox v-model="radio1" :localdata="sex"></uni-data-checkbox>
|
|
</view>
|
|
</uni-section>
|
|
<uni-section title="多选" subTitle="使用multiple属性开启多选" type="line">
|
|
<view class="uni-px-5 uni-pb-5">
|
|
<view class="text">多选选中：{{JSON.stringify(checkbox1)}}</view>
|
|
<uni-data-checkbox multiple v-model="checkbox1" :localdata="hobby"></uni-data-checkbox>
|
|
</view>
|
|
</uni-section>
|
|
|
|
<uni-section title="最大最小值" subTitle="使用 min / max 设置多选的最大最小值,单选无效">
|
|
<view class="uni-px-5 uni-pb-5">
|
|
<view class="text">选中：{{JSON.stringify(checkbox6)}}</view>
|
|
<uni-data-checkbox min="1" max="2" multiple v-model="checkbox6" :localdata="hobby"></uni-data-checkbox>
|
|
</view>
|
|
</uni-section>
|
|
|
|
<uni-section title="更多样式 - button" subTitle="使用mode=button属性使用按钮样式" type="line">
|
|
<view class="uni-px-5">
|
|
<view class="text">单选选中：{{JSON.stringify(radio2)}}</view>
|
|
<uni-data-checkbox mode="button" v-model="radio2" :localdata="sex"></uni-data-checkbox>
|
|
</view>
|
|
<view class="uni-px-5 uni-pb-5">
|
|
<view class="text">多选选中：{{JSON.stringify(checkbox2)}}</view>
|
|
<uni-data-checkbox mode="button" multiple v-model="checkbox2" :localdata="hobby"></uni-data-checkbox>
|
|
</view>
|
|
</uni-section>
|
|
|
|
<uni-section title="更多样式 - tag" subTitle="使用mode=tag属性使用标签样式" type="line">
|
|
<view class="uni-px-5">
|
|
<view class="text">单选选中：{{JSON.stringify(radio3)}}</view>
|
|
<uni-data-checkbox mode="tag" v-model="radio3" :localdata="sex"></uni-data-checkbox>
|
|
</view>
|
|
<view class="uni-px-5 uni-pb-5">
|
|
<view class="text">多选选中：{{JSON.stringify(checkbox3)}}</view>
|
|
<uni-data-checkbox mode="tag" multiple v-model="checkbox3" :localdata="hobby"></uni-data-checkbox>
|
|
</view>
|
|
</uni-section>
|
|
|
|
<uni-section title="禁用" subTitle="数据中使用 disable 属性实现单独禁用,组件使用 disable 属性实现全部禁用" type="line">
|
|
<view class="uni-px-5">
|
|
<view class="text">单选选中：{{JSON.stringify(radio4)}}</view>
|
|
<uni-data-checkbox mode="button" v-model="radio4" :localdata="sex1"></uni-data-checkbox>
|
|
</view>
|
|
<view class="uni-px-5 uni-pb-5">
|
|
<view class="text">多选选中：{{JSON.stringify(checkbox4)}}</view>
|
|
<uni-data-checkbox mode="button" multiple v-model="checkbox4" :localdata="hobby2">
|
|
</uni-data-checkbox>
|
|
</view>
|
|
</uni-section>
|
|
|
|
|
|
|
|
<uni-section title="自定义高亮颜色" subTitle="使用 selectedColor 属性修改颜色" type="line">
|
|
<view class="uni-px-5">
|
|
<view class="text">单选选中：{{JSON.stringify(radio5)}}</view>
|
|
<uni-data-checkbox selectedColor="red" v-model="radio5" :localdata="sex1"></uni-data-checkbox>
|
|
</view>
|
|
<view class="uni-px-5 uni-pb-5">
|
|
<view class="text">多选选中：{{JSON.stringify(checkbox5)}}</view>
|
|
<uni-data-checkbox selectedColor="red" multiple v-model="checkbox5" :localdata="hobby2">
|
|
</uni-data-checkbox>
|
|
</view>
|
|
</uni-section>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
radio1: 0,
|
|
radio2: 0,
|
|
radio3: 0,
|
|
radio4: 0,
|
|
radio5: 0,
|
|
radio6: 0,
|
|
checkbox1: [0],
|
|
checkbox2: [0],
|
|
checkbox3: [0],
|
|
checkbox4: [0],
|
|
checkbox5: [0],
|
|
checkbox6: [0],
|
|
sex: [{
|
|
text: '男',
|
|
value: 0
|
|
}, {
|
|
text: '女',
|
|
value: 1
|
|
}, {
|
|
text: '未知',
|
|
value: 2
|
|
}],
|
|
sex1: [{
|
|
text: '男',
|
|
value: 0
|
|
}, {
|
|
text: '女',
|
|
value: 1,
|
|
disable: true
|
|
}, {
|
|
text: '未知',
|
|
value: 2
|
|
}],
|
|
hobby: [{
|
|
text: '足球',
|
|
value: 0
|
|
}, {
|
|
text: '篮球',
|
|
value: 1
|
|
}, {
|
|
text: '游泳',
|
|
value: 2
|
|
}],
|
|
hobby2: [{
|
|
text: '足球',
|
|
value: 0,
|
|
disable: true
|
|
}, {
|
|
text: '篮球',
|
|
value: 1,
|
|
disable: true
|
|
}, {
|
|
text: '游泳',
|
|
value: 2
|
|
}],
|
|
}
|
|
},
|
|
onLoad() {},
|
|
onReady() {},
|
|
methods: {}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.text {
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.uni-px-5 {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.uni-pb-5 {
|
|
padding-bottom: 10px;
|
|
}
|
|
</style>
|
|
|