elment上传pdf文件至服务器,基于element-ui组件手动实现单选和上传功能.pdf

基基于于element-ui组组件件手手动动实实现现单单选选和和上上传传功功能能

在用户使用过程中提出一键导入的功能，需求如下:点击导入按钮显示提示框，然后是单选框以及上传按钮。这篇

文章 要介绍了基于element-ui组件手动实现单选和上传功能,需要的朋友可以参考下

前前言言

在用户使用过程中提出一键导入的功能，需求如下:点击导入按钮显示提示框，然后是单选框以及上传按钮。pc端常

使用element-ui组件，但是这个项目是vue1的老项目，并且没有element-ui组件。所以需要自己动手实现单选功能和

上传功能。

radio 属属性性及及方方法法

name ： 用于定义同一类型的 radio 同一 name 的 radio 只能选中一个(单选实现)

id ： 用于和 label 标签关联起来 实现点击 label 标签内的元素也能选中 radio

value ：单选按钮的值，选中某个单选按钮相当于拿到 value 值 tip ：用于识别组中的哪个单选按钮被选中。

checked 用于设置默认选中的 radio

v-model 创建双向数据绑定。 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例

的数据作为数据来源。

// html

:key="day.id"

class="select__day">

name="week"

:id="day.label"

:val e="day.val e"

v-model="selectedDay">

{{day.label}}({{day.val e}})

// 暂定的数据

data(){

ret rn {

weekSelectList: [

{ label: '周一', val e: '2018-12', id: 1 },

{ label: '周二', val e: '2018-13', id: 2 },

{ label: '周三', val e: '2018-14 ', id: 3 },

{ label: '周四', val e: '2018-15', id: 4 },

{ label: '周五', val e: '2018-16', id: 5 }

]

},

selectedDay: '2018-12',

}

通过 v-model 绑定 selectedDay，匹配到相同的值会将 radio 选中,当改变 radio 的选择，selectedDay 也会动态的

变更成选中的 radio 的 value

上上传文文件件

属属性性

accept 属性接受一个(多个值时)逗号分隔的字符串 如:accept="image png, image j peg"

id

name

注意 ：accept 属性并不会验证选中文件的类型只是在用户浏览时只显示指定文件类型

缺缺点点

在未上传文件时，显示"未选择文件"，用户界面不友好，不可配置

同一个文件名即使内容改变了，重新上传也不会触发 change 事件

用户如果在上传过程中点击了“取消”，已经上传的文件会被移除

解解决决方方式式

:class="{' pload__b tton-- ploaded':isUploaded}"

@click="onUploadClick">点击上传