前言
为虹口等地区用户提供了全套网页设计制作服务，及虹口网站建设行业解决方案。主营业务为做网站、网站建设、虹口网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
在用户使用过程中提出一键导入的功能，需求如下:点击导入按钮显示提示框，然后是单选框以及上传按钮。pc端常使用element-ui组件，但是这个项目是vue1的老项目，并且没有element-ui组件。所以需要自己动手实现单选功能和上传功能。
radio 属性及方法
name： 用于定义同一类型的 radio 同一 name 的 radio 只能选中一个(单选实现)
// html// 暂定的数据 data(){ return { weekSelectList: [ { label: '周一', value: '2018-12', id: 1 }, { label: '周二', value: '2018-13', id: 2 }, { label: '周三', value: '2018-14', id: 3 }, { label: '周四', value: '2018-15', id: 4 }, { label: '周五', value: '2018-16', id: 5 } ] }, selectedDay: '2018-12', }
通过 v-model 绑定 selectedDay，匹配到相同的值会将该 radio 选中,当改变 radio 的选择，selectedDay 也会动态的变更成选中的 radio 的 value
上传文件
属性
accept 属性接受一个(多个值时)逗号分隔的字符串 如:accept="image/png, image/jpeg"
缺点
解决方式
methods:{ onUploadClick() { if (!this.isUploaded) { this.$els.upload.click() } }, onFileChange(e) { const file = e.target.files[0] if (file === undefined) { return } this.fileName = file.name const result = /[xls|xlsx]$/.test(this.fileName) if (result) { this.isUploaded = true this.showAlert('上传成功') this.$els.upload.value = null } else { this.showAlert('文件格式错误，请确认后重试。') } }, }
当点击上传按钮触发 onUploadClick 事件后，获取到 upload 绑定的 DOM (由于是老的项目使用的是$els,vue2 使用 ref)手动触发 click 事件并且可以在change事件中默认接收一个文件信息对象其中target.files[0]包含文件的更多信息，如下图:
判断文件类型
可以看到 change 事件的返回值包含着文件属性，这里我们需要判断是文件名是否为 excel，使用正则的 test 方法。
重置change事件
在最后 this.$refs.uploadFile.value = null; 移除文件，可以保证上传同样的文件时，也会触发 change 事件
优化样式
至此关于表单方面的功能都已经实现了，由于原始的radio样式比较丑，而且不能更改。下面我们就想办法将它做的漂亮些。
// template
// data
data() {
return {
radioList: [
{
linkLabel: 'label1',
value: '1',
isDisabled: false,
isFocus: false,
label: '标签1'
},
{
linkLabel: 'label2',
value: '2',
isDisabled: false,
isFocus: false,
label: '标签2'
},
{
linkLabel: 'label3',
value: '3',
isDisabled: true,
isFocus: false,
label: '标签3'
}
],
selectedRadio: '1'
}效果如下:
其实radio__replace类名对应的标签就是我们自定义的radio，其中的白色原点是通过伪类生成的css代码放在最后,感兴趣可以看下
伪类样式修改
如果想通过类名来改变白色原点的样式，可以通过权重来改变。如下通过isShow来给外层添加test类名 而起始的时候设置的权重为两层，之后添加一层可以起到修改样式的效果。(ps:伪类不能通过预先设定好的类名来修改样式)
例子代码如下:
.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; } }
总结
以上所述是小编给大家介绍的基于element-ui组件手动实现单选和上传功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！