自做业务网站,上海比较好的设计院,高端企业网站 程序,用QQ群做网站排名何时使用
在一组可选项中进行多项选择时#xff1b; 单独使用可以表示两种状态之间的切换#xff0c;和 switch 类似。区别在于切换 switch 会直接触发状态改变#xff0c;而 checkbox 一般用于状态标记#xff0c;需要和提交操作配合。
案例#xff1a;多选框组件
核心…何时使用
在一组可选项中进行多项选择时 单独使用可以表示两种状态之间的切换和 switch 类似。区别在于切换 switch 会直接触发状态改变而 checkbox 一般用于状态标记需要和提交操作配合。
案例多选框组件
核心代码
templatea-checkbox v-model:checkedcheckedCheckbox/a-checkbox
/template
script setup
import { ref } from vue;
const checked ref(false);
/scriptvue3示例
script setup
import {ref} from vue;const isAgree ref(false)
/script
templatediv classp-8 bg-indigo-50 text-centera-checkbox v-model:checkedisAgree同意协议/a-checkboxa-divider/a-typography-title{{ isAgree}}/a-typography-title/div
/template 案例全选
在实现全选效果时你可能会用到 indeterminate 属性
核心代码
templatediva-checkboxv-model:checkedstate.checkAll:indeterminatestate.indeterminatechangeonCheckAllChangeCheck all/a-checkbox/diva-divider /a-checkbox-group v-model:valuestate.checkedList :optionsplainOptions /
/template
script setup
import { reactive, watch } from vue;
const plainOptions [Apple, Pear, Orange];
const state reactive({indeterminate: true,checkAll: false,checkedList: [Apple, Orange],
});
const onCheckAllChange e {Object.assign(state, {checkedList: e.target.checked ? plainOptions : [],indeterminate: false,});
};
watch(() state.checkedList,val {state.indeterminate !!val.length val.length plainOptions.length;state.checkAll val.length plainOptions.length;},
);
/script第一步定义全选组件
a-checkboxv-model:checkedstate.checkAll:indeterminatestate.indeterminatechangeonCheckAllChangeCheck all
/a-checkbox第二步定义选项组组件
a-checkbox-group v-model:valuestate.checkedList :optionsplainOptions /第三步定义选项组内容
const plainOptions [Apple, Pear, Orange];第四步定义全选状态
indeterminate是否选中checkAll是否全选checkedList选中列表
const state reactive({indeterminate: true,checkAll: false,checkedList: [Apple, Orange],
});第五步监听选中事件
const onCheckAllChange e {Object.assign(state, {checkedList: e.target.checked ? plainOptions : [],indeterminate: false,});
};第六步监听已选中列表
watch(() state.checkedList,val {state.indeterminate !!val.length val.length plainOptions.length;state.checkAll val.length plainOptions.length;},
);vue3示例
script setup
import {reactive, ref, watch} from vue;const checkAll ref(false)
const checkList [Python, Golang, JavaScript]
const checkState reactive({indeterminate: true,checkAll: false,checkedList: [Python, JavaScript]
})
const onCheckAllChange e {Object.assign(checkState, {checkedList: e.target.checked ? checkList : [],indeterminate: false,})
}
watch(() checkState.checkedList,val {checkState.indeterminate !!val.length val.length checkList.lengthcheckState.checkAll val.length checkList.length}
)
/script
templatediv classp-8 bg-indigo-50 text-centera-checkboxv-model:checkedcheckState.checkAll:indeterminatecheckState.indeterminatechangeonCheckAllChange全选/a-checkboxa-divider/a-checkbox-groupv-model:valuecheckState.checkedList:optionscheckList//div
/template
