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>