首页 新闻 赞助 找找看

vue2.x css样式问题

0
悬赏园豆:30 [已解决问题] 解决于 2023-08-24 13:12

我这里有个组件(会通过v-for搞出来好多个在页面上显示)

然后又有个图片(16px x 16px)

给组件用:class={lock: isLock }添加了个样式 lock
想通过isLock === true的时候,
把那个小锁 lock 图片,叠放在组件的右下角,该如何搞?
这里是code:

<Draggable v-model="seatData" :group="isLock? type.toString()+type.toString(): type.toString()" :sort="false" :put="true" filter=".lock" class="draggable">
			<transition-group class="transition-group">
				<UserIcon v-for="(item, index) in seatData" :key="index" :type="item.roleId" :name="item.username" :showIndex="false" :class="{lock: isLock}" /> 
<!-- 上面用 :class="{lock: isLock}" 动态绑定了lock样式,想在这个lock样式的伪元素上面动动手脚,把lock图标叠在这个UserIcon组件右下角  -->
			</transition-group>
</Draggable>
		
		
echo_lovely的主页 echo_lovely | 小虾三级 | 园豆:1385
提问于:2023-08-24 10:53

在描述一下,看不到问题

这个世界很大 6个月前

看不懂问题

这个世界很大 6个月前

@这个世界很大: 更新了

echo_lovely 6个月前
< >
分享
最佳答案
0

我觉得你的问题是需要一个在右下角显示的样式

父级加一个
position: relative;

.lock::after {
    content: ' ';
    background: url();
    background-size: contain;
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
}

还可以加一个div,用控制div显示来做

收获园豆:30
复制粘贴机器人 | 小虾三级 |园豆:616 | 2023-08-24 11:20

妙啊!

echo_lovely | 园豆:1385 (小虾三级) | 2023-08-24 13:11

其实我不会使position: relative;,一相对,我就搞不清楚谁相对于谁了

echo_lovely | 园豆:1385 (小虾三级) | 2023-08-24 13:12

我写的position: absolute;直接相对于html了,图片出现在浏览器的右下角

echo_lovely | 园豆:1385 (小虾三级) | 2023-08-24 13:13

@echo_lovely: 我也不会 抄多了发现这样好使。而且F12调样式也方面,按⬇挨个试

复制粘贴机器人 | 园豆:616 (小虾三级) | 2023-08-24 13:13

@echo_lovely: 是的 我理解的是position: relative;相当于重置一个新的坐标系用来定位

复制粘贴机器人 | 园豆:616 (小虾三级) | 2023-08-24 13:15
其他回答(1)
0

有点意思,不过为什么不设计两张图片呢(一张上锁,一张没锁)

十四年新* | 园豆:229 (菜鸟二级) | 2023-08-24 11:00

确实,最简单的是这样
但是我这种类比较多,就得多搞好多张图,想偷懒

支持(0) 反对(0) echo_lovely | 园豆:1385 (小虾三级) | 2023-08-24 11:03
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册