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

更新時(shí)間：2022年03月05日 11:56:24 作者：巨蟹座不吃魚(yú)

vue項(xiàng)目中我們可以通過(guò)行內(nèi)樣式進(jìn)行動(dòng)態(tài)修改樣式,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用定義好的變量設(shè)置css樣式的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在做項(xiàng)目的時(shí)候，通常會(huì)遇到需要在 HTML 標(biāo)簽上綁定變量來(lái)設(shè)置樣式，對(duì)于這種需求，共有兩種情況。

實(shí)現(xiàn)

第一種情況

如果是對(duì)于代碼中實(shí)實(shí)在在存在的 HTML 標(biāo)簽，我們可以直接綁定變量來(lái)設(shè)置樣式，比如改變表格的邊框。

先設(shè)置一個(gè)表格邊框樣式的 JS 變量（table_border）。
再在 HTML 標(biāo)簽的 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 {
      // 表格數(shù)據(jù)
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1516 弄'
      }],
      table_border: 'border: 1px solid red'// 設(shè)置表格邊框樣式
    }
  }
}
</script>

效果如下：

第二種情況

如果我想手動(dòng)改變表格表頭的邊框顏色，有時(shí)候由于一些 UI 框架的組件是封裝好的，實(shí)際的 HTML 標(biāo)簽代碼中并不能直接設(shè)置，這時(shí)候就需要在 css 中進(jìn)行設(shè)置，那么怎么在 css 中使用變量呢。

語(yǔ)法

首先，我們要搞明白在 css 中如何聲明一個(gè) css 變量，如下：

--color: red

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

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

方法一

基于以上語(yǔ)法，我們來(lái)實(shí)現(xiàn)設(shè)置表格表頭的邊框，如下：

先設(shè)置樣式，一個(gè)表格邊框樣式的 JS 變量（table_border）及一個(gè)表頭邊框樣式的 JS 變量（table_header_border）。
再在 computed 中定義一個(gè)參數(shù)（setStyles），其返回值為 css 樣式集。其中鍵為 css 變量名，值為 css 樣式屬性值。
將該參數(shù)（setStyles）綁定到 HTML 標(biāo)簽的 Style 屬性上。
最后在 style 中使用，找到需要改變或者設(shè)置樣式的 HTML 標(biāo)簽的 className，將 css 變量進(jìn)行綁定即可。

<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 {
      // 表格數(shù)據(jù)
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1516 弄'
      }],

      table_border: '1px solid red', // 設(shè)置表格邊框樣式
      table_header_border: '3px solid green'// 設(shè)置表頭邊框樣式
    }
  },
  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>

效果如下：

方法二

對(duì)于第二種情況，除了以上方法以外，我們還可以在 HTML 標(biāo)簽上使用 ref 屬性來(lái)實(shí)現(xiàn)，如下：

先設(shè)置樣式，一個(gè)表格邊框樣式的 JS 變量（table_border）及一個(gè)表頭邊框樣式的 JS 變量（table_header_border）。
在 HTML 標(biāo)簽上設(shè)置屬性 ref 為 tableStyle。
再在 methods 中定義一個(gè)方法 setStyles，該方法通過(guò) this.refs.tableStyle.refs.tableStyle.refs.tableStyle.el.style.setProperty 來(lái)手動(dòng)將定義好的 JS 變量值綁定到對(duì)應(yīng)的 css 變量上。
在 mounted 中調(diào)用 setStyles 方法。
最后在 style 使用，找到需要改變或者設(shè)置樣式的 HTML 標(biāo)簽的 className，將 css 變量進(jìn)行綁定即可。

<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 {
      // 表格數(shù)據(jù)
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1516 弄'
      }],

      table_border: '1px solid red', // 設(shè)置表格邊框樣式
      table_header_border: '3px solid green'// 設(shè)置表頭邊框樣式
    }
  },
  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>

效果如下：