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

Posted on by

前言

在做項目的時候，通常會遇到需要在 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>

效果如下：

總結

對於在 css 中定義 css 變量來獲取 JS 變量設置樣式，我個人感覺挺有用的，特別是在做自適應的時候，總是需要動態獲取一些樣式數據來進行渲染。

到此這篇關於vue中使用定義好的變量設置css樣式的文章就介紹到這瞭,更多相關vue定義好的變量設置css樣式內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：