button同时多选,同时取消选择

主要实现多个按钮同时被选中,并可随时取消选中,此处的按钮实质为checkBox

图1:展示按钮未被选中


图2:展示按钮被选中

CSS代码

                .dayCheck {
			background: #1B9AF7;
			width: 50px;
			height: 40px;
			border-radius: 5px;
			color: #FFFFFF;
		      }
		.dayUnCheck {
			background: #90C7F0;
			width: 50px;
			height: 40px;
			border-radius: 5px;
			color: #FFFFFF;
		}
		.dayCheckBox {
			width: 100%;
			height: 100%;
			margin: -10px 0px 0px;
			opacity: 0;
		}
		.dayTxt {
			ma
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用Vant4中的`Cascader`组件来生成多选级联选择器。这个组件允许您在一个单独的组件中展示多个级联选择器,每个级联选择器之间可以进行联动。以下是一个简单的示例代码: ```html <template> <van-cascader :options="options" v-model="value" :active-item-class="activeItemClass" :item-height="itemHeight" :height="height" :visible-item-count="visibleItemCount" :placeholder="placeholder" :toolbar-position="toolbarPosition" :close-on-click-outside="closeOnClickOutside" :close-on-click-overlay="closeOnClickOverlay" :lazy-render="lazyRender" :expand-trigger="expandTrigger" :cascade="cascade" :border="border" :readonly="readonly" :disabled="disabled" :title="title" :columns-top="columnsTop" :columns-bottom="columnsBottom" :option-render="optionRender" :option-disabled="optionDisabled" :format="format" :before-confirm="beforeConfirm" :confirm-button-text="confirmButtonText" :cancel-button-text="cancelButtonText" @confirm="onConfirm" @cancel="onCancel" @change="onChange" /> </template> <script> export default { data() { return { options: [ { text: 'Fruit', value: 'fruit', children: [ { text: 'Apple', value: 'apple' }, { text: 'Banana', value: 'banana' }, { text: 'Orange', value: 'orange' } ] }, { text: 'Drink', value: 'drink', children: [ { text: 'Water', value: 'water' }, { text: 'Tea', value: 'tea' }, { text: 'Coffee', value: 'coffee' } ] } ], value: [], activeItemClass: '', itemHeight: 44, height: 220, visibleItemCount: 5, placeholder: 'Please select', toolbarPosition: 'bottom', closeOnClickOutside: true, closeOnClickOverlay: true, lazyRender: true, expandTrigger: 'click', cascade: true, border: true, readonly: false, disabled: false, title: '', columnsTop: [], columnsBottom: [], optionRender: '', optionDisabled: '', format: '', beforeConfirm: '', confirmButtonText: 'OK', cancelButtonText: 'Cancel' }; }, methods: { onConfirm(value) { console.log(value); }, onCancel() { console.log('cancel'); }, onChange(value) { console.log(value); } } }; </script> ``` 在这个示例中,`options`是一个包含所有级联选择器选项的数组,`value`是一个数组,其中包含用户选择的所有选项的值。您可以使用`@change`事件来监听用户选择的选项,`onConfirm()`方法会在用户点击确认按钮时触发,`onCancel()`方法会在用户取消选择时触发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值