支持取消单选组件vue版
支持取消单选组件vue版
原生的单选就是<input type="radio"/>
,正常情况在name
相同的单选之间只能选一个,如果只有一个单选框的情况下,一经选中是无法自己取消的,和checkbox不一样。但是有时我们的需求是需要有一个radio,并且还要支持能选中和取消的。
当radio的被选中的时候,其实它的checked
属性是true
,取消时为false
。并且如果直接设置checked
属性的值也能直接改变radio的选中与否。
我们也可以依此写成个简单的vue组件。
<template>
<input
type="radio"
:id="label"
ref="radio"
@click="onClick"
:value="innerChecked"
/>
</template>
<script>
export default {
name: 'RadioToggle',
props: {
value: Boolean,
label: String
},
data() {
return {
innerChecked: false
};
},
mounted() {
this.innerChecked = this.value;
},
methods: {
onClick() { // 支持单个单选框选中/取消相互切换,选中态与isChecked保持一致
this.innerChecked = !this.innerChecked;
},
updateCheck() {
this.$refs.radio.checked = this.innerChecked;
this.$emit('input', this.innerChecked);
},
},
watch: {
value() {
this.innerChecked = !!this.value;
},
innerChecked() {
this.updateCheck();
}
}
}
</script>
一个简单的vue双向绑定组件就完成了。
- 分类:
- Web前端
相关文章
element-ui表单源码解析之el-input
关于表单校验el-input做的主要工作就是跟el-form-item交互,把input的相关事件发送给el-form-item,上一篇已经讲到在el-form-item的mounted的生命周期里 阅读更多…
Vue在chrome44偶现点击子元素事件无法冒泡
公司的一个项目大致是这样的:一个左侧列表,点击左侧列表的文章标题,右侧展开该文章对应的内容的。 现在的问题出现在极少部分客户有时左侧的标题,无法打开对应的右侧的内容,给人的改进就是‘卡’、点不动、点 阅读更多…
vue内置组件keep-alive源码解析
很简单,我们直接看vue的源码即可。 keep-alive 组件支持三个属性。 props: { include: patternTypes, exclude: patter 阅读更多…
vue多语言的解决方案不只是 vue-i18n,前端+后端完整解决方案
网上搜很多vue多语言的,一般都是介绍vue-i18n怎么使用,当然这是不错的,但是我们如果只是讲这个的话,只是解决了静态文字的多语言化。 这一部分我们也简单讲一下 npm install 阅读更多…
用个数组来理解vue的diff算法(一)
原文地址: 道招网 的 用个数组来理解vue的diff算法(一) Vue使用的diff算法,我相信用vue的估计都听过,并且看到源码的也不在少数。 先对下面的代码做下说明: 由于这里用 阅读更多…
2021年的一点工作总结(一)迁移React技术栈
2021年全年的工作总结起来很简单,算是做苦力的一年吧。。。 2021年春节后就开始邮件项目从Vue迁移到React的工作以及富文本编辑器由wangEditor替换成CKEditor。 其实自己 阅读更多…