基于元素用户界面组件手动实现单选和上传功能

前言

在用户使用过程中，提出了一键导入的功能。要求如下：点击导入按钮显示提示框，然后是单选框和上传按钮。pc中经常用到Element-ui组件，但是这个项目是vue1的老项目，没有element-ui组件。所以需要自己实现电台功能和上传功能。

无线电属性和方法

名称：只能选择一个同名的收音机来定义相同类型的收音机(单个收音机实现)

Id:用于与标签标签关联。单击标签标签中的元素也可以选择单选按钮的值。选择单选按钮相当于获取值提示：用于标识选择了组中的哪个单选按钮。选中用于设置默认选择的无线电v-model，以创建双向数据绑定。忽略所有表单元素的value、checked和selected属性的初始值，始终使用Vue实例的数据作为数据源。//html div V-for=' day in weekSelectList ' : key=' day . id ' class=' select _ _ day '输入类型=' radio ' name=' week ' : id=' day . label ' : value=' day . value ' V-model=' selected day ' label : for=' day '。标签“{day。标签}} ({{day。value } })/label/div//暂定数据(){ return { week select list :[{label : '星期一'，value :' 2018-12 '，id : 1}，{label : '星期二'，value: '2018-13 '，id: 2}，{ label : '星期三'，value:' 2018-14 '，id : { 3 }Id : 5}]}，selectedDay:' 2018-12 '，} bind selectedDay通过v-model，匹配相同值的电台将被选中，当电台选择发生变化时，selectedDay也会动态变化为选中电台的值。

上传文件

属性

accept属性接受逗号分隔的字符串(当有多个值时)，例如： accept=“image/png，image/JPEG”

Id名称注意：accept属性不会验证所选文件的类型，而只会在用户浏览时显示指定文件类型的缺点

文件未上传时，显示‘未选择文件’，用户界面不友好，无法配置相同文件名。即使内容更改，重新上传也不会触发更改事件。如果用户在上传过程中点击“取消”，上传的文件将被删除。解决办法

div class=' upload _ _ button ' : class=' { ' upload _ _ button-uploaded ' : is uploaded } ' @ click=' onupload click '单击上传/div输入类型=' file ' class=' upload _ _ file ' v-El : upload accept=' application/vnd . openxmlformats-office document . spreadsheetml . sheet，application/vnd . ms-excel ' @ change=' onfileChange '/methods : { onupload click(){ 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]$/。测试(this . filename)if(result){ this . is ploded=true this . show alert('已成功上载')这一点。$ els . upload . value=null } else { this . show alert('文件格式错误，请确认后重试。)}}，}点击上传按钮触发onuploadclick事件后，获取Upload绑定的DOM(因为旧项目使用$els，vue2使用ref)，手动触发click事件，在change事件中默认接收一个文件信息对象，其中target.files[0]包含文件的更多信息，如下图3360所示。

确定文件类型

您可以看到变更事件的返回值包含文件属性。这里需要判断文件名是否为excel，使用常规的测试方法。

重置更改事件

最后。$ refs . upload file . value=null；删除文件可以确保在上传同一文件时也会触发更改事件

优化样式

到目前为止，关于形式的功能已经实现，因为原来的收音机样式很丑，无法改变。让我们努力让它变得美丽。

//单选列表“:键=”项。“=”项的值“:”。链接标签' :访问键='索引' span class=' content _ _ input ' span class=' radio _ _ replace ' : class=' { ' radio _ _ replace-checked ' : elected radio=' item。值'，' radio _ _ replace-disable ' :项。is disabled }“/span输入v-model=”中的模板标签v-for='标签1' }，{ linkLabel: 'label2 '，value: '2 '，isDisabled: false，isFocus: false，Label: '标签2' }，{ linkLabel: 'label3 '，value: '3 '，isDisabled: true，isFocus: false，Label: '标签3' } ],选择无线电： '1' }这里使用遍历的方式在数据中定义多个无线电，在前面我们讲到过收音机的基本用法，使用标签的为属性和投入的为属性实现关联起来。(这里我将投入放在标签内，这样点击整个标签都会选中，没有标签和收音机元素之间的间隙)。名字相同的收音机会实现单选效果，tabindex代表使用制表符键的遍历顺序，值是选中时v型绑定的选择无线电也就会跟着变更实现个性化样式的关键在于结构就是用一个类名内容_ _输入标签将类名收音机_ _更换和收音机包起来。设置定位层级（相当于收音机被覆盖了，然而只要点击到labelradio就会被选中)通过选择无线电选中的值和当前收音机值做对比，以及isDisabled这些布尔代数学体系的值来动态绑定班级实现我们自定义的收音机样式切换效果如下：

其实收音机_ _更换类名对应的标签就是我们自定义的无线电，其中的白色原点是通过伪类生成的钢性铸铁代码放在最后，感兴趣可以看下

伪类样式修改

如果想通过类名来改变白色原点的样式，可以通过权重来改变。如下通过是否显示来给外层添加试验类名而起始的时候设置的权重为两层，之后添加一层可以起到修改样式的效果(ps:伪类不能通过预先设定好的类名来修改样式)

例子代码如下：

div : class=' { test : is show } ' @ click=' onreadclick ' div class=' text _ _ item '/div/div。text _ _ item { : }之后{内容： }；宽度： 30px高度： 30px背景-颜色： # f00绝对位置：bottom: 20px}}。测试{。{底色： # ff0 }后的text _ _ item { :} }}//css .收音机{ _ _更换{ border: 1px固态# dcdfe6边界半径： 100%;宽度： 14px高： 14px背景-color : # fff；相对位置：光标：指针；显示器：内联块；盒子尺寸：边框盒子；z指数： 999；过渡： 0.15秒轻松进入；-选中{边框颜色： # 409 eff背景色： # 409 eff} -禁用cursor:不允许；} : after { width : 4px x8 : 4px边界半径： 100%;背景-color : # fff；内容： " "；绝对位置：左侧： 50%;前：名50%；transform: translate(-50%，-50%)；} } _ _按钮{ opa city 3360 0；大纲：无；绝对位置：z指数：-1;top : 0；左： 0；右： 0；底部： 0；保证金： 0；} }总结

介绍了收音机基本属性，使用案例并优化了收音机的样式原始上传文件元素的缺点以及改善方法以上所述是小编给大家介绍的基于元素用户界面组件手动实现单选和上传功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！