列の目標
このコラムでは、vue と要素 UI の共同テクノロジー スタックの制御の下で、柔軟な使用のための効果的なソース コードの例と情報ポイントの紹介を提供します。
(1) vue2 のいくつかの基本操作を提供します: インストール、参照、テンプレートの使用、計算、監視、ライフサイクル (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、キープアライブ、スロット スコープ、フィルター、v-bind、。 stop、.native、ディレクティブ、mixin、レンダリング、国際化、Vue Router など。
(2) -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-ロード中、$ 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のプロジェクト開発ではラジオやチェックボックスがよく使われますが、元々の醜いスタイルでは製品やUIの見識を満たせない場合があり、表現方法を変更する必要があることがあります。この記事では、オーバーレイやその他の技術的手段を使用して、ラジオとチェックボックスのスタイルの美化を実現します。
効果例
サンプルソースコード（全160行）
/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [email protected]
* @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>