ElementUI修改默认样式

1、修改全局（主颜色或者样式）//自定义主题 http://element.eleme.io/#/zh-CN/component/custom-theme //修改样式在App.vue文件中引入import 'css/override-element-ui.css';（外部样式）//override-element-ui是自己新建的css或者（内部样式）// el-tabs__item 是F12

方白羽

32204人浏览 · 2018-05-14 17:37:59

方白羽 · 2018-05-14 17:37:59 发布

  1、修改全局（主颜色或者样式） 

  //自定义主题 

 
   
 http://element.eleme.io/#/zh-CN/component/custom-theme 

  //修改样式 

  在App.vue文件中引入 

import 'css/override-element-ui.css';（外部样式）//override-element-ui是自己新建的css

或者（内部样式）// el-tabs__item 是F12检查页面代码时可以看到elementui组件tabs对应的样式

<style>
.el-tabs__item{
   padding:0 10px;
}
</style>

  2、修改局部（样式）组件demo.vue 

<template>
 <div class="market_out">
     <el-tabs v-model="activeName"  class="tabs_title">
          <el-tab-pane :label="$t('text.all')" name="first"></el-tab-pane>
          <el-tab-pane :label="$t('market.optional')" name="second"></el-tab-pane>
      </el-tabs>
  </div>
</template>
<style scoped>
market_out.el-tabs__item{
   padding:0 10px;
}
</style>

  //局部修改 
 market_out  
 .el-tabs__item 这种写法，不影响其他组件使用默认的tabs控件 

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^