这里使用遍历的方式在data中定义多个radio，在前面我们讲到过radio的基本用法，使用label的for属性和input的for属性实现关联起来。(这里我将input放在label内，这样点击整个label都会选中，没有label和radio元素之间的间隙)。
name相同的radio会实现单选效果，tabindex代表使用"Tab"键的遍历顺序 ,value是选中时v-model绑定的selectedRadio也就会跟着变更
实现个性化样式的关键在于结构就是用一个类名content__input标签将类名radio__replace和radio包起来。设置定位层级(相当于radio被覆盖了，然而只要点击到labelradio就会被选中)
通过selectedRadio选中的值和当前radio值做对比，以及isDisabled这些Boolean值来动态绑定class实现我们自定义的radio样式切换
效果如下:
其实radio__replace类名对应的标签就是我们自定义的radio，其中的白色原点是通过伪类生成的css代码放在最后,感兴趣可以看下
伪类样式修改
如果想通过类名来改变白色原点的样式，可以通过权重来改变。如下通过isShow来给外层添加test类名 而起始的时候设置的权重为两层，之后添加一层可以起到修改样式的效果。(ps:伪类不能通过预先设定好的类名来修改样式)
例子代码如下:
<div :class="{test:isShow}" @click="onRedClick"> <div></div> </div> .text__item { &:after { content: ''; width: 30px; height: 30px; background-color: #f00; position: absolute; bottom: 20px; } } .test { .text__item { &:after { background-color: #ff0; } } } // css .radio { &__replace { border: 1px solid #dcdfe6; border-radius: 100%; width: 14px; height: 14px; background-color: #fff; position: relative; cursor: pointer; display: inline-block; box-sizing: border-box; z-index: 999; transition: 0.15s ease-in; &--checked { border-color: #409eff; background-color: #409eff; } &--disable { cursor: not-allowed; } &:after { width: 4px; height: 4px; border-radius: 100%; background-color: #fff; content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } } &__button { opacity: 0; outline: none; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; margin: 0; } }
总结
介绍了radio基本属性，使用案例并优化了radio的样式
原始上传文件元素的缺点以及改善方法
以上所述是小编给大家介绍的基于element-ui组件手动实现单选和上传功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: