修改elementui默认样式,vue element实现自定义步骤条
本文主要介绍了在Vue中使用Elementui修改默认的最快方法，有很好的参考价值。希望对大家有帮助。来和边肖一起看看吧。
相信大家都需要。在Vue中使用Elementui时，最痛苦的问题就是修改默认样式，然后直奔主题；
//模板
El-进展
:text-inside=true
:笔画宽度=26
:百分比=70
/El-进度
默认样式
方法1
1.找到默认添加的类名。
2.去掉作用域。作用域是Vue，它限制独立组件中的CSS样式溢出到全局使用！
//样式。El-进度条_ _内部{
背景：# 000；
}
//这两个酌情使用。El-进度条_ _内部{
背景：#000！重要；
}
//!重要是css选择器中的一个属性，默认权重是无线！
总结：这个方法会生效，但是会影响全局；
方法2，
使用Vue中的深度范围选择器！这个符号
样式范围。El-进度条_ _内部{
背景：# 000；
}
/风格
总结：使用Vue的深度选择器，可以完美解决！
注意：有些预处理程序如Sass不能正确解析。
在这种情况下，可以使用/deep/or: v-deep运算符代替别名——，两者都可以正常工作。
附上官方网站的地址：https://vue-loader.vuejs.org/zh/guide/scoped-css.html#是本地和全球风格的混合体
补充知识：Vue Element Upload组件自定义上传行为及值回填
问题
因为项目使用的是element-ui，那么默认的上传方式upload就不支持我们现有的接口。参考官方API和相关博客，解决了自己存在的问题。
解决方式
用户定义的上传：上传组件提供一个http-request属性。官方的描述是：覆盖默认的上传行为，可以自定义上传的实现。
值回填：上传组件提供了一个文件列表属性，它描述了上传文件的列表。
#特定代码实现
自定义上传行为
这里以图片上传为例。
template部分
El-上传
action=https://up-z2.qbox.me
list-type=图片卡
:http-request=uploadImg
:on-success=uploadImgSuccess
:on-remove=handleRemove
i class=el-icon-plus/i
/El-上传
以上是模板部分，我们实现了三个属性：http-request、on-success和on-remove。
script部分
方法：{
上传(f) {
This.axios.get(。/gettoken’)。然后((响应)={//获取令牌
let param=new FormData()；//创建一个表单对象
param.append(file ，f . file)；//通过append向表单对象添加数据
param.append(token ，response . data . token)；//通过append向表单对象添加数据
param.append(key ，response . data . key)；//在表单中添加其他数据
让配置={
标题：{ Content-Type : multipart/form-data }
};//添加请求标头
This.axios.post (f.action，param，config)//上传图片。然后(response={
f.onSuccess(response.data)
})。catch(({err})={
f.onError()
})
})。catch(()={
f.onError()
})
},
uploadImgSuccess(响应、文件、文件列表){
//缓存接口调用所需的文件路径
Console.log(“文件上传成功”)
},
handleRemove(文件，文件列表){
//更新缓存文件
Console.log(“文件删除”)
}
}
值回填
以同样的图片上传为例。
template部分
El-上传
action=https://up-z2.qbox.me
list-type=图片卡
:http-request=uploadImg
:on-remove=handleRemove
:on-change=handleImgChange
:file-list=imgList
i class=el-icon-plus/i
/El-上传
script部分
data() {
返回{
ImgList: [{url:初始回填图片的url ，状态：已完成 }]
}
},
方法：{
上传(f) {
This.axios.get(。/gettoken’)。然后((响应)={//获取令牌
let param=new FormData()；//创建一个表单对象
param.append(file ，f . file)；//通过append向表单对象添加数据
param.append(token ，response . data . token)；//通过append向表单对象添加数据
param.append(key ，response . data . key)；//在表单中添加其他数据
让配置={
标题：{ Content-Type : multipart/form-data }
};//添加请求标头
This.axios.post (f.action，param，config)//上传图片。然后(response={
f.onSuccess(response.data)
})。catch(({err})={
f.onError()
})
})。catch(()={
f.onError()
})
},
HandleimgChange (file，file list){//这里可以打印文件查看数据结构。
If (file.response) {//判断上传是否成功。
this . imglist . push({ URL:this . tools . cdn(file . response . key)，状态：已完成 })//上传成功后将值添加到img list中。
}
},
HandleRemove (file，fileList) {//这里可以打印fileList来查看数据结构。
This.imgList=fileList//删除图片时重新为imgList赋值。
}
}
写在最后
我一直想把这个写下来，但是我很懒。好久没写博客了。因为是我们项目里改的，所以demo还没写。如有疑问，请指教。
在Vue中使用Elementui修改默认的最快方法是边肖共享的所有内容。希望给大家一个参考，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。