035：vue项目中 radio和checkbox美化方法

查看专栏目录: VUE ------ element UI

专栏目标

在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。

（1）提供vue2的一些基本操作：安装、引用，模板使用，computed，watch，生命周期(beforeCreate，created,beforeMount，mounted, beforeUpdate，updated, beforeDestroy，destroyed，activated，deactivated，errorCaptured，components，)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if，v-on，v-pre，v-cloak，v-once，v-model， v-html, v-text, keep-alive，slot-scope， filters, v-bind，.stop, .native, directives，mixin，render，国际化，Vue Router等

（2）提供element UI的经典操作：安装，引用，国际化，el-row，el-col，el-button，el-link，el-radio，el-checkbox ，el-input，el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop，v-infinite-scroll， el-drawer等

需求背景

在vue项目开发中，经常会用到radio和checkbox， 有时候原有的丑陋样式不能满足产品和UI的法眼，就需要更换一种表达方式。在本文中，我们通过覆盖等技术手段实现了radio和checkbox的样式美化。

示例效果

示例源代码（共160行）

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2022-09-16
*/
<template>
	<div class="container">
		<div class="top">
			<h3>radio和checkbox美化方法</h3>
			<div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
		</div>

		<div class="box">
			<div v-for="(item,index) in radioList" :key="index" class="radioCss">
				<input v-show="false" type="radio" name="gender" :value="item.value" :id="item.value"
					:checked="sex==item.value" @click="clickRadio(item.value)" />
				<label :for="item.value">
					<div v-show="sex==item.value" class="a4 hand" alt="选中"></div>
					<div v-show="sex!=item.value" class="a3 hand" alt="未选中"></div>
					{{item.label}}
				</label>
			</div>
		</div>

		<!-- 复选框 -->
		<div class="box">
			<div v-for="item in checkBoxList" :key="item.value">
				<label>
					<div v-show="fruit.includes(item.value)" class="a2 hand">{{item.label}} </div>
					<div v-show="!fruit.includes(item.value)" class="a1 hand">{{item.label}} </div>
					<input v-show="false" @click="clickCheckBox(item.value)" name="Fruit" type="checkbox"
						:value="item.value" :checked="fruit.includes(item.value)" />
		 	</label>
			</div>
		</div>
	</div>
</template>
<script>

	export default {
		data() {
			return {
				radioList: [{
						value: "男",
						label: "男"
					},
					{
						value: "女",
						label: "女"
					},
				],
				sex: "",
				checkBoxList: [{
						value: "苹果",
						label: "苹果"
					},
					{
						value: "香蕉",
						label: "香蕉"
					},
					{
						value: "梨",
						label: "梨"
					},
					{
						value: "西瓜",
						label: "西瓜"
					}
				],
				fruit: []
			}
		},
		methods: {
			clickRadio(val) {
				this.sex = val;
			},
			clickCheckBox(val) {
				if (this.fruit.includes(val)) {
					this.fruit.splice(this.fruit.indexOf(val), 1);
				} else {
					this.fruit.push(val);
				}
			}
		},
	}
</script>
<style scoped>
	.container {
		width: 1000px;
		height: 580px;
		margin: 50px auto;
		border: 1px solid green;
		position: relative;
	}

	.top {
		margin: 0 auto 30px;
		padding: 10px 0;
		background: hotpink;
		color: #fff;
	}

	.box {
		width: 300px;
		border: 1px solid #ddd;
		padding: 20px 5%;
		clear: both;
		overflow: hidden;
		margin: 50px auto 20px;
	}

	.radioCss {
		width: 50%;
		float: left;
		
	}
    .hand{cursor: pointer;}
	.a1 {
		display: inline-block;
		padding: 7px 13px;
		font-size: 13px;
		background-color: #ddd;
		margin: 0px 20px 10px 0;
		float: left;
		color: #444;
	}

	.a2 {
		display: inline-block;
		padding: 7px 13px;
		font-size: 13px;
		background-color: hotpink;
		margin: 0px 20px 10px 0;
		float: left;
		color: #fff;
	}

	.a3 {
		display: inline-block;
		padding: 10px;
		border-radius: 10px;
		font-size: 13px;
		background-color: #ddd;
		margin: 0px 10px 10px 0;
		float: left;
		color: #444;
	}

	.a4 {
		display: inline-block;
		padding: 10px;
		border-radius: 10px;
		font-size: 13px;
		background-color: hotpink;
		margin: 0px 10px 10px 0;
		float: left;
		color: #fff;
	}
</style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164