在uni-app中使用组件库的Checkbox复选框,需要先引入组件库,并注册组件。
首先,在页面的<script>
标签中引入组件库:
import { Checkbox, CheckboxGroup } from '组件库名称';
然后,在components
中注册Checkbox组件:
export default { components: { Checkbox, CheckboxGroup }, // ... }
接下来就可以在页面中使用Checkbox组件了。
<template> <view> <checkbox-group v-model="selectedFruits"> <checkbox value="apple">苹果</checkbox> <checkbox value="banana">香蕉</checkbox> <checkbox value="orange" disabled>橙子</checkbox> </checkbox-group> </view> </template>
在上面的代码中,我们创建了一个CheckboxGroup组件,并使用v-model
来绑定选中的值。
CheckboxGroup中的每个Checkbox组件都使用value
属性来表示选项的值。当用户勾选或取消勾选该选项时,selectedFruits
的值会自动更新。
如果需要设置默认选中的选项,可以在data
中定义selectedFruits
的初始值。例如:
export default { data() { return { selectedFruits: ['apple', 'banana'] } }, // ... }
这样,在页面加载时,苹果和香蕉的复选框就会被默认选中。
Checkbox组件也支持disabled
属性来禁用某个选项。
以上就是uni-app中使用组件库的Checkbox复选框的基本使用方法。具体的样式和事件处理可以参考组件库的文档或示例代码。