Elementui如何在Vue中使用?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
在Vue中使用Elementui的时候,遇到最多也最蛋疼的问题就是修改默认样式,接下来直奔主题;
//模板 & lt; el-progress :文本=皌rue" :笔划宽度=?6”; :比例=?0”; 祝辞& lt;/el-progress>
<强>默认样式
//风格
.el-progress-bar__inner {
背景:# 000;
}//这两种酌情使用。
.el-progress-bar__inner {
背景:# 000 !重要;
}//!重要的是css选择器中的属性,默认权重无线大!
总结:这种方法会生效,但是会影响到全局;
& lt;风格scoped>
在在在.el-progress-bar__inner {
背景:# 000;
}
& lt;/style>
总结:使用Vue的深度选择器,就可以完美的解决!
& lt; el-upload
action=癶ttps://up-z2.qbox.me"
列表类型=皃icture-card"
:http请求=皍ploadImg"
:成功=皍ploadImgSuccess"
:“移动”=癶andleRemove"比;
& lt;我类=癳l-icon-plus"祝辞& lt;/i>
& lt;/el-upload>
以上是模板部分,我们实现了http请求,>方法:{ uploadImg (f) { this.axios.get (& # 39;。/getToken& # 39;),然后((响应)=比;{//获取令牌 让参数=new FormData ();//创建形式对象 param.append(& # 39;文件# 39;,f.file);//通过追加向形式对象添加数据 param.append(& # 39;标记# 39;,response.data.token);//通过追加向形式对象添加数据 param.append(& # 39;关键# 39;,response.data.key);//添加形式表单中其他数据 让配置={ 标题:{& # 39;内容类型# 39;:& # 39;多部分/格式# 39;} };//添加请求头 this.axios.post (f.action、参数、配置)//上传图片 不要犹豫(响应=祝辞{ f.onSuccess (response.data) }） .catch(({犯错})=比;{ f.onError () }） }） .catch(()=比;{ f.onError () }） }, uploadImgSuccess(响应文件,文件列表){//缓存接口调用所需的文件路径 console.log(& # 39;文件上传成功& # 39;) }, handleRemove(文件,文件列表){//更新缓存文件 console.log(& # 39;文件删除& # 39;) } }
<>强值回填
同样以图片上传为例
<强>模板部分
<强>脚本部分
