近来项目中的大众组件,在复用的时刻,针对差别的场景,须要不停变动CSS里款式的值,而且已经有了全局的大众组件款式了
假如用vue传统的动态绑定class和style的体式格局去修正款式(文末会提到),须要分外写许多变量和模块class,那假如我的款式的值,能够从父组件,传到子组件,子组件依据传入值去衬着对应款式的值,实在就是要再style中运用data和props中的变量,这要怎么做呢?
相干进修引荐:javascript视频教程
实在很简单,只须要三步,人人来看:
1、HTML构造
ref="upload"
:show-upload-list="false"
:before-upload="handleBeforeUpload"
:disabled="disabled"
:max-size="maxSize"
action
>
2、作用地区范围内设置“CSS变量”
.info-img-wrap {
--textAlignPosition: center;
/deep/ .ivu-upload {
text-align: var(--textAlignPosition);
}
}
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
js
data: {
isActive: false,
hasError: true
}
数组语法
html
js
data: {
isActive: false,
hasError: true,
activeClass: 'active',
errorClass: 'text-danger'
}
只须要动态转变isActive和hasError的值,就能够完成p的绑定差别的class和去掉绑定
2、vue中能够经由过程对象语法和数组语法来修正style
对象语法
html
js
data: {
activeColor: 'red',
fontSize: 30
}
数组语法
html
js
data: {
styleColor: {
color: 'red'
},
styleSize:{
fontSize:'23px'
}
}
只需转变data中的变量styleColor和styleSize,就能够动态修正p的style了。
相干进修引荐:编程视频
以上就是在VUE style中运用data中的变量的要领详解的细致内容,更多请关注ki4网别的相干文章!
收藏 | 0