浅谈Vue使用Elementui修改默认的最快方法


Posted in Vue.js onDecember 05, 2020

相信大家都需要过,在Vue中使用Elementui的时候,遇到最多也最蛋疼的问题就是修改默认样式,接下来直奔主题;

// template
 <el-progress 
 :text-inside="true" 
 :stroke-width="26" 
 :percentage="70"
 ></el-progress>

默认样式

浅谈Vue使用Elementui修改默认的最快方法

方法1

1、找默认添加的类名

浅谈Vue使用Elementui修改默认的最快方法

2、去掉scoped,scoped是Vue是限制独立组件中的CSS样式不被溢出到全局使用!

// style
.el-progress-bar__inner{
 background: #000 ;
}
// 这两种酌情使用。
.el-progress-bar__inner{
 background: #000 !important;
}
// !important是css选择器中的属性,默认权重无线大!

总结:这种方法会生效,但是会影响到全局;

浅谈Vue使用Elementui修改默认的最快方法

方法2,

使用Vue中的深度作用域选择器! 这个符号哦 >>>

<style scoped>
>>> .el-progress-bar__inner{
 background: #000 ;
}
</style>

总结:使用Vue的深度选择器,就可以完美的解决!

浅谈Vue使用Elementui修改默认的最快方法

注意:有些像 Sass 之类的预处理器无法正确解析 >>>。

这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名,同样可以正常工作。

给大家附上官网地址:https://vue-loader.vuejs.org/zh/guide/scoped-css.html#混用本地和全局样式

补充知识:Vue Element Upload组件自定义上传行为及值回填

问题

由于项目使用element-ui,然后upload默认上传方式不支持我们现有接口。参照了一下官方API及相关博客,解决了我现有问题。

解决方式

自定义上传:upload组件提供了一个http-request属性,官方给的描述是:覆盖默认的上传行为,可以自定义上传的实现

值的回填:upload组件提供了一个file-list属性,描述:上传的文件列表

#具体代码实现

自定义上传行为

这里使用图片上传作为实例

template部分

<el-upload
 action="https://up-z2.qbox.me"
 list-type="picture-card"
 :http-request="uploadImg"
 :on-success="uploadImgSuccess"
 :on-remove="handleRemove">
 <i class="el-icon-plus"></i>
</el-upload>

以上是template部分,我们实现了http-request, on-success, on-remove三个属性

script部分

methods: {
 uploadImg (f) {
  this.axios.get('./getToken').then((response) => {//获取token
   let param = new FormData(); //创建form对象
   param.append('file',f.file);//通过append向form对象添加数据
   param.append('token',response.data.token);//通过append向form对象添加数据
   param.append('key',response.data.key);//添加form表单中其他数据
   let config = {
    headers:{'Content-Type':'multipart/form-data'}
   }; //添加请求头
   this.axios.post(f.action,param,config)//上传图片
   .then(response=>{
    f.onSuccess(response.data)
   })
   .catch(({err}) => {
    f.onError()
   })  
  })
  .catch(() => {
   f.onError()
  })
 },
 uploadImgSuccess(response, file, fileList) {
  // 缓存接口调用所需的文件路径
  console.log('文件上传成功')
 },
 handleRemove(file, fileList) {
  // 更新缓存文件
  console.log('文件删除')
 }
}

值回填

同样以图片上传为例

template部分

<el-upload
  action="https://up-z2.qbox.me"
  list-type="picture-card"
  :http-request="uploadImg"
  :on-remove="handleRemove"
  :on-change="handleImgChange"
  :file-list="imgList">
  <i class="el-icon-plus"></i>
 </el-upload>

script部分

data() {
 return {
 imgList: [{url: '初始需回填的图片url', status: 'finished'}]
 }
},
methods: {
 uploadImg (f) {
   this.axios.get('./getToken').then((response) => {//获取token
     let param = new FormData(); //创建form对象
     param.append('file',f.file);//通过append向form对象添加数据
     param.append('token',response.data.token);//通过append向form对象添加数据
     param.append('key',response.data.key);//添加form表单中其他数据
     let config = {
      headers:{'Content-Type':'multipart/form-data'}
     }; //添加请求头
     this.axios.post(f.action,param,config)//上传图片
     .then(response=>{
      f.onSuccess(response.data)
     })
     .catch(({err}) => {
      f.onError()
     })  
    })
    .catch(() => {
     f.onError()
    })
   },
   handleImgChange (file, fileList) {// 这里可以打印file查看数据结构
    if (file.response) {//判断是否上传成功
     this.imgList.push({url: this.tools.cdn(file.response.key), status: 'finished'})//上传成功之后把值添加到imglist中
    }
 },
  handleRemove (file, fileList) {// 这里可以打印filelist查看数据结构
   this.imgList = fileList//删除某张图片时重新对imglist赋值
  }
}

写在最后

一直想把这个记下来,比较懒惰一看好久没有写博客了。由于是在我们工程里改的,暂时还没有写demo。如有问题,请大家指教

以上这篇浅谈Vue使用Elementui修改默认的最快方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
ant design vue的form表单取值方法
Jun 01 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 #Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 #Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 #Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 #Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 #Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 #Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 #Vue.js
You might like
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
JS常用算法实现代码
2016/11/14 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
python从入门到精通(DAY 3)
2015/12/20 Python
Python类的动态修改的实例方法
2017/03/24 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
上海中网科技笔试题
2012/02/19 面试题
网络宣传方案
2014/03/15 职场文书
秸秆管理实施方案
2014/03/15 职场文书
委托书范本
2014/04/02 职场文书
业务员自荐信范文
2014/04/20 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python