vue 使用记录

最新推荐文章于 2024-08-20 09:41:26 发布

肥喵蒙太奇

最新推荐文章于 2024-08-20 09:41:26 发布

阅读量337

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/YYYYYun/article/details/104718387

版权

vue 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

BEM策略
EM的本质是一个css类名命名方案。
所谓BEM，其实是三个单词的缩写：Block（模块）、Element（元素）、Modifier（修饰符）。
最常见的连接符是bb__ee–mm的形式

vue自定义radio

<div class="box">
	<label class="myRadio_label-type1" v-for="item in data" :key="item.value">
		<input type="radio" name="fruit"><span></span>{{item.title}}
	</label>
</div>

.box {
	display: flex;
	height: 100px;
	width: 100%;
	flex-wrap: wrap;
}
.myRadio_label-type1 {
	display: flex;
	margin-right: 10px;
	white-space: nowrap;
}
.myRadio_label-type1 span{
	position: relative;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border-radius: 100%;
	border: 1px solid #e2e2e2;
	background-color: #fff;
	background-color: #005EF8;
	margin-right: 5px;
	box-sizing: content-box;
}
.myRadio_label-type1 input {
	display: none;
}
.myRadio_label-type1 input:checked~span:after{
	content: '';
	display: block;
	position: absolute;
	width: 12px;
	height: 12px;
	top: 4px;
	left: 4px;
	background-color: #005EF8;
	background-color: #fff;
	border-radius: 100%;
}