在用户使用过程中提出一键导入的功能,需求如下:点击导入按钮显示提示框,然后是单选框以及上传按钮.pc端常使用element-ui组件,但是这个项目是vue1的老项目,并且没有element-ui组件,所以需要自己动手实现单选功能和上传功能。
//html
& lt; div)=皐eekSelectList天”
:关键=" day.id "
类=皊elect__day”比;
& lt;输入类型=肮悴ァ?
name="周"
:id=癲ay.label”
:value=" https://www.yisu.com/zixun/day.value "
v模型=皊electedDay”比;
& lt;标签:=" day.label "在{{day.label}} ({{day.value}}) & lt;/label>
& lt;/div>//暂定的数据
数据(){
返回{
weekSelectList:(
{标签:“周一”,值:2018 - 12,id: 1},
{标签:“周二”,值:2018 - 13,id: 2},
{标签:“周三”,值:2018 - 14,id: 3},
{标签:“周四”,值:2018 - 15,id: 4},
{标签:“周五”,值:2018 - 16,id: 5}
]
}，
selectedDay: 2018 - 12,
}
通过v模型绑定selectedDay,匹配到相同的值会将该选电台中,当改变收音机的选择,selectedDay也会动态的变更成选中的无线电的价值
<强>属性
接受属性接受一个(多个值时)逗号分隔的字符串如:接受=巴枷?png图像/jpeg”
-
<李> id
<李>名称
<李>注意:接受属性并不会验证选中文件的类型只是在用户浏览时只显示指定文件类型李
-
<李>在未上传文件时,显示“未选择文件”,用户界面不友好,不可配置李
<李>同一个文件名即使内容改变了,重新上传也不会触发改变事件
<李>用户如果在上传过程中点击了“取消”,已经上传的文件会被移除李
,
可以看到改变事件的返回值包含着文件属性,这里我们需要判断是文件名是否为excel,使用正则的测试方法。
在最后<代码> refs.uploadFile美元。值=https://www.yisu.com/zixun/null;>
至此关于表单方面的功能都已经实现了,由于原始的无线电样式比较丑,而且不能更改。下面我们就想办法将它做的漂亮些。
