浅谈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组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
详解Vue router路由
Nov 20 Vue.js
Vue Element plus使用方法梳理
Dec 24 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
2006/10/09 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
护理专业应届毕业生推荐信
2013/11/15 职场文书
敬老院标语
2014/06/27 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
2014年财务部工作总结
2014/11/11 职场文书
元旦主持词开场白
2015/05/29 职场文书
初中政教处工作总结
2015/08/12 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技