I am participating in the 2022 Spring Recruitment series of activities – project experience review, click to view the details of the activity.

preface

When working on a project, there are two common situations where you need to bind variables to HTML tags to set styles.

implementation

Case one

For HTML tags that actually exist in the code, we can directly bind variables to set styles, such as changing the border of the table.

  • Start by setting a table_border JS variable with a table border style.
  • Bind the JS variable to the STYLE property of the HTML tag.
<template> <div class="app-container"> <template> <el-table :data="tableData" :style="table_border" > <el-table-column Prop ="date" label=" date" width="180" /> <el-table-column prop="name" label=" name" width="180" /> <el-table-column Prop ="address" label=" address" /> </el-table> </template> </div> </template> <script> export default {data() {return {// [{date: '2016-05-02', name: 'wang Xiaohu ', address:' 1518 Lane, Jinshajiang Road, Putao District, Shanghai '}, {date: '2016-05-04', name: Date: '2016-05-01', name: '2016-05-01', address: '2016-05-01', {date: '2016-05-01', address: '2016-05-01', {date: '2016-05-03', address: '1516 Jinshajiang Road, Putuo District, Shanghai'}], table_border: 'border: 1px solid red'}}} </script>Copy the code

The effect is as follows:

The second case

If I want to manually change the border color of the table header, sometimes because some UI framework components are wrapped, the actual HTML tag code can not be set directly, then I need to set it in CSS, so how to use variables in CSS?

grammar

First, we need to figure out how to declare a CSS variable in CSS, as follows:

--color: red
Copy the code

How to use the CSS variable is as follows:

.className{
    color: var(--color)
}
Copy the code

Methods a

Set the border of the table header as follows:

  • Set the styles first, a table border style JS variable (table_border) and a table header border style JS variable (table_header_border).
  • Define a parameter (setStyles) in computed that returns a CSS style set. Where the key is the CSS variable name and the value is the CSS style property value.
  • Bind this parameter (setStyles) to the Style property of the HTML tag.
  • Finally, in style, find the className of the HTML tag that needs to be changed or styled, and bind the CSS variable.
<template> <div class="app-container"> <template> <el-table :data="tableData" :style="setStyles" > <el-table-column Prop ="date" label=" date" width="180" /> <el-table-column prop="name" label=" name" width="180" /> <el-table-column Prop ="address" label=" address" /> </el-table> </template> </div> </template> <script> export default {data() {return {// [{date: '2016-05-02', name: 'wang Xiaohu ', address:' 1518 Lane, Jinshajiang Road, Putao District, Shanghai '}, {date: '2016-05-04', name: Date: '2016-05-01', name: '2016-05-01', address: '2016-05-01', {date: '2016-05-01', address: '2016-05-01', {date: '2016-05-03', name: 'Wang Xiaohu ', address:' 1516 Jinshajiang Road, Putuo District, Shanghai '}], table_border: '1px solid red', // Set the table border style table_header_BORDER: '3px solid green'// Set the table header border style}}, 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>Copy the code

The effect is as follows:

Method 2

For the second case, in addition to the above method, we can also use the ref attribute on the HTML tag, as follows:

  • Set the styles first, a table border style JS variable (table_border) and a table header border style JS variable (table_header_border).
  • Set the attribute ref to tableStyle on the HTML tag.
  • I’m going to define a method called setStyles in methods, This method by enclosing refs. TableStyle. Refs. TableStyle. Refs. TableStyle. El. Style.css. SetProperty manually defined JS variable values are bound to the corresponding CSS variables.
  • Call the setStyles method in Mounted.
  • Finally, in style, find the className of the HTML tag that needs to be changed or styled, and bind the CSS variable.
<template> <div class="app-container"> <template> <el-table ref="tableStyle" :data="tableData" > <el-table-column Prop ="date" label=" date" width="180" /> <el-table-column prop="name" label=" name" width="180" /> <el-table-column Prop ="address" label=" address" /> </el-table> </template> </div> </template> <script> export default {data() {return {// [{date: '2016-05-02', name: 'wang Xiaohu ', address:' 1518 Lane, Jinshajiang Road, Putao District, Shanghai '}, {date: '2016-05-04', name: Date: '2016-05-01', name: '2016-05-01', address: '2016-05-01', {date: '2016-05-01', address: '2016-05-01', {date: '2016-05-03', name: 'Wang Xiaohu ', address:' 1516 Jinshajiang Road, Putuo District, Shanghai '}], table_border: '1px solid red', // set table border style table_header_BORDER: }}, Mounted () {this.setstyles ()}, methods: { setStyles() { this.$nextTick(() => { this.$refs.tableStyle.$el.style.setProperty('--tableBorder', This.$refs.tablestyle.$el.style.setProperty('--tableHeaderBorder',); This.table_header_border) // assign values to variables})}}} </script> <style lang=" SCSS ">. El-table --fit{border: var(--tableBorder); } .el-table__header-wrapper{ border: var(--tableHeaderBorder); } </style>Copy the code

The effect is as follows:

conclusion

I personally find it useful to define CSS variables in CSS to get JS variable Settings, especially when doing adaptive, always need to dynamically get some style data for rendering.