vue调整样式的几种方法
Style调整方式,以设置 margin-right 属性为例:
// 方法1:内嵌方式
<view style="margin-right: 100rpx"></view>
// 方法2:变量绑定数值
<view :style="{marginRight: mright+'rpx'}"></view>
data() {
return {
mright: 100
}
}
// 方法3:变量绑定对象
<view :style="[mright]"></view>
data() {
return {
mright: {
marginRight:'100rpx'
}
}
}
Class调整方式,以设置 margin-right 属性为例:
// 方法1:直接引用
<view class="mright"></view>
<style lang="scss" scoped>
.mright {
margin-right: 100rpx;
}
</style>
// 方法2:变量绑定,两种写法效果一致
<view :class="[isActive?'mleft':'', 'mright']"></view>
<view :class="[{'mleft': isActive}, 'mright']"></view>
data() {
return {
isActive: true
}
}
<style lang="scss" scoped>
.mleft {
margin-left: 100rpx;
}
.mright {
margin-right: 100rpx;
}
</style>
使用uView组件时,如何阻止冒泡
默认情况下,组件是允许内部向外事件冒泡的。如果您想避免事件冒泡,那么您可以在组件外面嵌套一个view
,同时给它加上@tap.stop
即可。
// 添加点击事件,本例使用的是uView2.0版本
<template>
<view class="container" @click="viewClick">
<view @tap.stop>
<u--image
:showLoading="true"
:src="src"
width="500rpx"
height="500rpx"
mode="aspectFill"
@click="imgClick">
</u--image>
</view>
</view>
</template>
// 函数实现,此时触发<u--image>点击事件imgClick,并不会冒泡至viewClick
methods: {
imgClick(e) {
console.log('imgClick'); // 点击打印“imgClick”
},
viewClick(e) {
console.log('viewClick'); // 不会执行,冒泡已被阻止
}
}