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


Posted in Javascript onDecember 06, 2018

前言

在用户使用过程中提出一键导入的功能,需求如下:点击导入按钮显示提示框,然后是单选框以及上传按钮。pc端常使用element-ui组件,但是这个项目是vue1的老项目,并且没有element-ui组件。所以需要自己动手实现单选功能和上传功能。

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

radio 属性及方法

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

  • id: 用于和 label 标签关联起来 实现点击 label 标签内的元素也能选中 radio
  • value:单选按钮的值,选中某个单选按钮相当于拿到 value 值 tip:用于识别组中的哪个单选按钮被选中。
  • checked 用于设置默认选中的 radio
  • v-model 创建双向数据绑定。 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。
// html
 <div v-for="day in weekSelectList"
 :key="day.id"
 class="select__day">
 <input type="radio"
  name="week"
  :id="day.label"
  :value="day.value"
  v-model="selectedDay">
 <label :for="day.label">{{day.label}}({{day.value}})</label>
 </div>
// 暂定的数据
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"

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

缺点

  1. 在未上传文件时,显示"未选择文件",用户界面不友好,不可配置
  2. 同一个文件名即使内容改变了,重新上传也不会触发 change 事件
  3. 用户如果在上传过程中点击了“取消”,已经上传的文件会被移除

解决方式

 

<div class="upload__button"
 :class="{'upload__button--uploaded':isUploaded}"
 @click="onUploadClick">点击上传</div>
 <input type="file"
 class="upload__file"
 v-el:upload
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
 @change="onFileChange" />
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]包含文件的更多信息,如下图:

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

判断文件类型

可以看到 change 事件的返回值包含着文件属性,这里我们需要判断是文件名是否为 excel,使用正则的 test 方法。

重置change事件

在最后 this.$refs.uploadFile.value = null; 移除文件,可以保证上传同样的文件时,也会触发 change 事件

优化样式

至此关于表单方面的功能都已经实现了,由于原始的radio样式比较丑,而且不能更改。下面我们就想办法将它做的漂亮些。

// template
 <label v-for="(item,index) in radioList"
  :key="item.value"
  :for="item.linkLabel"
  :accesskey="index">
  <span class="content__input">
   <span class="radio__replace"
   :class="{'radio__replace--checked':selectedRadio===item.value,'radio__replace--disable':item.isDisabled}">
   </span>
   <input v-model="selectedRadio"
   type="radio"
   class="radio__button"
   name="radio"
   :id="item.linkLabel"
   :tabindex="index"
   :value="item.value"
   :disabled="item.isDisabled"
   @focus="item.isFocus = true"
   @blur="item.isFocus = false" />
  </span>
  <span class="content__text">{{item.label}}</span>
  </label>
// 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'
 }
  • 这里使用遍历的方式在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样式切换

效果如下:

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

其实radio__replace类名对应的标签就是我们自定义的radio,其中的白色原点是通过伪类生成的css代码放在最后,感兴趣可以看下

伪类样式修改

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

例子代码如下:

<div :class="{test:isShow}"
  @click="onRedClick">
  <div class="text__item"></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;
  }
  }

总结

  1. 介绍了radio基本属性,使用案例并优化了radio的样式
  2. 原始上传文件元素的缺点以及改善方法

以上所述是小编给大家介绍的基于element-ui组件手动实现单选和上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
js 浏览器事件介绍
Mar 30 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 #Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 #Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 #Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 #Javascript
微信小程序实现图片滚动效果示例
Dec 05 #Javascript
详解vue中的computed的this指向问题
Dec 05 #Javascript
使用rollup打包JS的方法步骤
Dec 05 #Javascript
You might like
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
php之curl设置超时实例
2014/11/03 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
python3设计模式之简单工厂模式
2017/10/17 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis
Java 超详细讲解hashCode方法
2022/04/07 Java/Android