vue中使用定義好的變數設定css樣式詳解

2022-03-05 16:01:18

前言

在做專案的時候，通常會遇到需要在 HTML 標籤上繫結變數來設定樣式，對於這種需求，共有兩種情況。

實現

第一種情況

如果是對於程式碼中實實在在存在的 HTML 標籤，我們可以直接繫結變數來設定樣式，比如改變表格的邊框。

先設定一個表格邊框樣式的 JS 變數（table_border）。
再在 HTML 標籤的 style 屬性上繫結該 JS 變數。

<template>
  <div class="app-container">
    <template>
      <el-table
        :data="tableData"
        :style="table_border"
      >
        <el-table-column
          prop="date"
          label="日期"
          width="180"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
      </el-table>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表格資料
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1516 弄'
      }],
      table_border: 'border: 1px solid red'// 設定表格邊框樣式
    }
  }
}
</script>

效果如下：

第二種情況

如果我想手動改變表格表頭的邊框顏色，有時候由於一些 UI 框架的元件是封裝好的，實際的 HTML 標籤程式碼中並不能直接設定，這時候就需要在 css 中進行設定，那麼怎麼在 css 中使用變數呢。

語法

首先，我們要搞明白在 css 中如何宣告一個 css 變數，如下：

--color: red

如何使用該 css 變數，如下：

.className{
    color: var(--color)
}

方法一

基於以上語法，我們來實現設定表格表頭的邊框，如下：

先設定樣式，一個表格邊框樣式的 JS 變數（table_border）及一個表頭邊框樣式的 JS 變數（table_header_border）。
再在 computed 中定義一個引數（setStyles），其返回值為 css 樣式集。其中鍵為 css 變數名，值為 css 樣式屬性值。
將該引數（setStyles）繫結到 HTML 標籤的 Style 屬性上。
最後在 style 中使用，找到需要改變或者設定樣式的 HTML 標籤的 className，將 css 變數進行繫結即可。

<template>
  <div class="app-container">
    <template>
      <el-table
        :data="tableData"
        :style="setStyles"
      >
        <el-table-column
          prop="date"
          label="日期"
          width="180"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
      </el-table>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表格資料
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1516 弄'
      }],

      table_border: '1px solid red', // 設定表格邊框樣式
      table_header_border: '3px solid green'// 設定表頭邊框樣式
    }
  },
  computed: {
    setStyles() {
      return {
        '--tableBorder': this.table_border,
        '--tableHeaderBorder': this.table_header_border
      }
    }
  }
}
</script>
<style lang="scss">
  .el-table--fit{
    border: var(--tableBorder);
  }
  .el-table__header-wrapper{
    border: var(--tableHeaderBorder);
  }
</style>

效果如下：

方法二

對於第二種情況，除了以上方法以外，我們還可以在 HTML 標籤上使用 ref 屬性來實現，如下：

先設定樣式，一個表格邊框樣式的 JS 變數（table_border）及一個表頭邊框樣式的 JS 變數（table_header_border）。
在 HTML 標籤上設定屬性 ref 為 tableStyle。
再在 methods 中定義一個方法 setStyles，該方法通過 this.refs.tableStyle.refs.tableStyle.refs.tableStyle.el.style.setProperty 來手動將定義好的 JS 變數值繫結到對應的 css 變數上。
在 mounted 中呼叫 setStyles 方法。
最後在 style 使用，找到需要改變或者設定樣式的 HTML 標籤的 className，將 css 變數進行繫結即可。

<template>
  <div class="app-container">
    <template>
      <el-table
        ref="tableStyle"
        :data="tableData"
      >
        <el-table-column
          prop="date"
          label="日期"
          width="180"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
      </el-table>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表格資料
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1516 弄'
      }],

      table_border: '1px solid red', // 設定表格邊框樣式
      table_header_border: '3px solid green'// 設定表頭邊框樣式
    }
  },
  mounted() {
    this.setStyles()
  },
  methods: {
    setStyles() {
      this.$nextTick(() => {
        this.$refs.tableStyle.$el.style.setProperty('--tableBorder', this.table_border) // 給變數賦值
        this.$refs.tableStyle.$el.style.setProperty('--tableHeaderBorder', this.table_header_border) // 給變數賦值
      })
    }
  }
}
</script>
<style lang="scss">
  .el-table--fit{
    border: var(--tableBorder);
  }
  .el-table__header-wrapper{
    border: var(--tableHeaderBorder);
  }
</style>

效果如下：