vue实现自定义组件样式

创建一个单独的子窗口组件

   1.用自己的样式覆盖组件的样式

   2.父子窗口的属性传递

   3.如果是在vue中需要覆盖第三方UI组件的默认样式 style标签上一定不能加scoped属性

   4.如果是给自己添加的html标签设置样式的话style标签上最好加上scoped属性

<style>
#mydialog /deep/ span.dialog-footer 
{
  color:red;
}
#mydialog /deep/ button.el-button--primary
{
  color:yellow;
}

#mydialog /deep/ .el-dialog
{
  text-align:center;
}
</style>

<template>
  <div id="mydialog">
    <el-button type="primary" icon="el-icon-circle-plus">添加点</el-button>
    <el-dialog :visible.sync="visible"
              @close="$emit('update:show', false)"
              title="提示"
    >
      <span>需要注意的是内容是默认不居中的</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DialogVideoPlay',
  props: {
    // 是否可见
    show: {
      type: Boolean,
      default: false,
    },
    
  },
  watch: {
    show(){
      this.visible = this.show
    }
  },
  data(){
    return {
      visible: this.show,
    }
  },
  methods: {
  }
}
</script>

<style>
#mydialog /deep/ span.dialog-footer 
{
  color:red;
}
#mydialog /deep/ button.el-button--primary
{
  color:yellow;
}

#mydialog /deep/ .el-dialog
{
  text-align:center;
}
</style>

<template>
  <!-- 添加主机记录 -->
  <div>
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="130px" class="demo-dynamic">
     <el-form-item label="选择平台代理节点">
       <el-select v-model="dynamicValidateForm.region" placeholder="请选择代理节点" style="width: 50%;margin-right:10px">
       <el-option label="节点1" value="shanghai"></el-option>
       <el-option label="节点2" value="beijing"></el-option>
      </el-select>
     <el-button type="text" icon="el-icon-circle-plus" @click="visible=!visible">添加平台代理节点</el-button>
    </el-form-item>
  <el-form-item>
     <el-button type="primary" @click="submitForm('dynamicValidateForm')">保存</el-button>
     <el-button @click="addDomain">新增域名</el-button>
     <el-button @click="resetForm('dynamicValidateForm')">取消</el-button>
  </el-form-item>
  </el-form>
    <DialogVideoPlay :show="visible" v-on:update:show="visible = $event"/>
  </div>
</template>

<script>
  import DialogVideoPlay from './testcss'
  export default{
    components: {
      DialogVideoPlay
    },
    data() {
      return {
        dynamicValidateForm:
         {
          domains: [{
            value: ''
          }],
          region: ''
        },
        input:'',
        visible: false,
      };
    },
    props: {},
    mounted () {
      this.$store.commit('updateBreadcrumb', [
        {
          text: '首页',
          path: ''
        },
        {
          text: '资产管理',
          path: '/host/list'
        },
        {
          text: '添加主机',
          path: ''
        }
      ]);
    },
    created() 
    {
    },
    methods: 
    {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleDialogclose()
      {
        console.log("eeee");
        this.visible=false;
      }
    }
  }
</script>

<style>
</style>

<style lang="scss">
  .mydialog 
  {
    
    .el-dialog__header
     {
             text-align: center;
    }
  }
</style>

 

vue组件实现自定义样式

<template>
  <div class="login-container">
    <div class="login-form">
      <h1>运维平台管理系统</h1>
      <el-form label-position="right" label-width="80px" ref="form" :model="form" :rules="rules" @keyup.enter.native="onLogin">
        <el-form-item label="用户名" prop="uid">
          <el-input v-model="form.uid" autocomplete="off" size="medium"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input type="password" v-model="form.pwd" autocomplete="off" size="medium"></el-input>
        </el-form-item>
        <el-form-item size="medium">
          <el-button type="primary" @click="onLogin" :disabled="disableLogin" :loading="disableLogin">{{loginText}}</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

1.必须加上lang="scss" 否则无法覆盖第三方组件的默认样式
<style lang="scss" scoped>
  .login-container {
    height: 100%;
    background-color: red;
    padding-top: 200px;
    .login-form {
      width: 400px;
      margin: 0 auto;
      border: 1px solid #dddddd;
      border-radius: 10px;
      background-color: #f9f9f9;
      h1 {
        text-align: center;
        line-height: 80px;
      }
      .el-input {
        width: 90%;
       border: 1px solid green;
      }
      button {
        &:first-child {
          margin-left: 45px;
          margin-right: 20px;
        }
      }
    }
  }
</style>

 

vue实现对话框展示长文本内容

<bee-table>    
       <template slot="operation2" slot-scope="{scope}">
             <el-button @click.prevent="showcon(scope.row.result)">出参</el-button>
             <el-button @click.prevent="showcon(scope.row.params)">入参</el-button>
          </template>
</bee-table>

{{dialogContent}} 表示填充动态变量内容

 <el-dialog
  title="详细信息"
  :visible.sync="dialogVisible"
  width="70%"
  height="80%"
  :before-close="handleClose">
  <span>{{dialogContent}}</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

    data()
    {
      return {
        dialogVisible: false,
        dialogContent:""
      }
}

methods: {
  showcon(con)
      {
         this.dialogVisible = true;
         this.dialogContent=con;
      },
       handleClose(done) {
        done();
      }
}

 

vue覆盖elementui分页组件的默认样式

        <style lang="scss"> style标签不能加scope属性

<style lang="scss">
  .logscontainer
   {
     margin:8px;

     .el-pagination .el-pagination__jump .el-input__inner{
      height:300px;
     }

    .chart_example{
       margin-left:2px;
       margin-bottom:10px;
       width: 99%;
     }
   }
</style>

logscontainer 是vue视图中最外层的div

    查找默认组件样式名称的原则

       .el-pagination  .el-pagination__jump  .el-input__inner  可以跨级指定样式   不一定要一级一级指定下来 只要是从上级往下级元素查找即可

       .el-pagination .el-input__inner    两个条件搜索的元素可能不一样
     

 

vue配合原生js动态设置组件样式

      gettbdata()
      {
        this.tbflag=true;
        return this.$http.getelogsdata({
            "startTime":this.startTime,
            "endTime":this.endTime,
            "pageIndex":this.currentPage,
            "pageSize":this.pageSize,
            "quercon":this.highinput
           },{notify:true})
          .then((data) => {
             this.tbList=data.list;
             this.total=data.total;
             this.loadBarchart(data.bars);
          }).finally(()=>{
            this.tbflag=false;
            let div=document.getElementById("logscontainer");
            let a=div.getElementsByClassName("el-pagination");
            let b=a[0].getElementsByClassName("el-pagination__jump");
            let c=b[0].getElementsByClassName("el-input__inner");
            c[0].readOnly=true; 
          });
      }

<style lang="scss">
  .logscontainer
   {
     margin:8px;

     .el-pagination .el-pagination__jump .el-input__inner{
        ime-mode:disabled;
     }

     .chart_example{
       margin-left:2px;
       margin-bottom:10px;
       width: 99%;
    }
   }

</style>

 修改样式实例2

    把默认的边框样式去掉

 

 

    <div class="blmonthdiv" style="margin-left:30px">
      选择年份:&nbsp;&nbsp;
         <el-select v-model="svalue" placeholder="请选择" style="width:400px">
         <el-option
           v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
       </el-select>
      &nbsp;&nbsp;&nbsp;&nbsp;
    <el-button type="primary" @click="handleQuery">查询</el-button>
      <div style="margin-top:10px">
       <el-table
           :data="tableData"
           style="width:100%">
          <el-table-column
            prop="date"
            label="月份"
            align="center"
            width="190">
          </el-table-column>
          <el-table-column label="清单打印"  align="center">
            <el-table-column
              prop="name"
              label="打印份数"
              align="center"
              width="150">
            </el-table-column>
            <el-table-column label="人数"  align="center" width="150">
            </el-table-column>
          </el-table-column>
          <el-table-column label="申诉"  align="center">
            <el-table-column
              prop="name"
              label="申诉次数"
              align="center"
              width="150">
            </el-table-column>
            <el-table-column label="人数"  align="center" width="150">
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

<style lang="scss">
  .blmonthdiv
  {
    .el-table--group, .el-table--border
    {
       border:0px solid #EBEEF5
    }
  }
</style>

 

去掉默认样式的一条横线

  原样式

 

 

修改后样式

 

 

 

<style lang="scss">
  .fwmonthdiv
  {
    .el-table--group, .el-table--border
    {
       border:0px solid #EBEEF5
    }

    .el-table::before
    {
      position:relative;
    }
  }
</style>