在VUE-style中使用data中的变量

最近项目中的公共组件，在复用的时候，针对不同的场景，需要不断变更 CSS 里样式的值，而且已经有了全局的公共组件样式了

如果用 vue 传统的动态绑定 class 和 style 的方式去修改样式（文末会提到），需要额外写很多变量和模块 class，那如果我的样式的值，可以从父组件，传到子组件，子组件根据传入值去渲染对应样式的值，其实就是要再 style 中使用 data 和 props 中的变量，这要怎么做呢？

其实很简单，只需要三步，大家来看：

1、HTML 结构

<Upload

      ref="upload"

      :show-upload-list="false"

      :before-upload="handleBeforeUpload"

      :disabled="disabled"

      :max-size="maxSize"

      action
>

2、作用区域范围内设置“CSS 变量”

<style lang="less" scoped>

.info-img-wrap {

  --textAlignPosition: center;

  /deep/ .ivu-upload {text-align: var(--textAlignPosition);

  }

}

<style/>

3、在 JS 中通过 setProperty() 方法修改“–textAlignPosition”的值，从而间接改变对应子元素的（text-align）文本对齐方式

mounted() {this.$nextTick(function () {

        this.$refs.upload.$el.style.setProperty(

          '--textAlignPosition',

          this.textAlign

        );

      });

}

这要就完成了。

下面再复习一下 vue 中修改样式还有另外两种方法，1 是动态修改 class，2 是动态修改 style

1、vue 中可以通过对象语法和数组语法来修改 class

对象语法

html

<div v-bind:class="{'active': isActive,'text-danger': hasError}"></div>

js

data: {

 isActive: false,

 hasError: true

}

数组语法

html

<div v-bind:class="\[isActive ? activeClass :'', errorClass\]"></div>

js

data: {

 isActive: false,

 hasError: true,

 activeClass: 'active',

 errorClass: 'text-danger'

}

只需要动态改变 isActive 和 hasError 的值，就可以实现 div 的绑定不同的 class 和去掉绑定

2、vue 中可以通过对象语法和数组语法来修改 style

对象语法

html

<div v-bind:style="{color: activeColor, fontSize: fontSize +'px'}"></div>

js

data: {

 activeColor: 'red',

 fontSize: 30

}

数组语法

html

<div v-bind:style="\[styleColor, styleSize\]"></div>

js

data: {

  styleColor: {color: 'red'},

  styleSize:{fontSize:'23px'}

}

只要改变 data 中的变量 styleColor 和 styleSize，就可以动态修改 div 的 style 了。