Element-UI
Element-UI有什么用?
给谁用?
这是一套专门为开发者,设计师和产品经理准备的基于Vue2.0的组件库,提供配套设计资源,帮助网站快速成型
有什么特点?
- 一致性:与生活一致,与界面一致
- 反馈Feedback
- 效率Efficiency
- 可控Controllability
如何修改Element-UI的样式
- 建立一张单独的样式表,一般建在src/assert/style中,用于在全局引入,适合对Element-ui的整体修改,比如整体配色的修改
- 在原本的组件上多添加一个style标签,这样也可以修改样式,但是需要特别注意的是当你给不同组件实例中添加的类名相同,修改的时候同一个样式有可能会发生冲突【因为修改的是全局的样式】
- 通过/deep/强制修改Element-ui的默认样式,也可以应用到scoped中,不会和其他页面发生冲突
- 通过内联样式或者绑定类样式覆盖默认样式【局限性太大,不推荐使用】
- 内联样式:
<el-button :style="test">默认样式</el-button>
<script>
export default{
data(){
return{
test:{
color:'white',
.....
}
}
}
}
</script>
- 绑定类样式覆盖:
<el-button :class="[test]"></el-button>
<script>
export default{
data(){
return{
test:'test'
};
}
}
</script>
<style scoped>
.test{
color:'white';
....
}
</style>