Vue · switch开关组件

方法一：

Switch组件

<template><div><spanclass="weui-switch":class="{ 'weui-switch-on': isChecked }":value="value"@click="toggle"style="position: relative"><divv-if="isChecked && direction.length > 0"style="width: 100%;height: 100%;position: absolute;padding: 0 5px;line-height: 20px;color: #fff;user-select: none;">{{ direction[0] }}div><divv-if="!isChecked && direction.length > 0"style="width: 100%;height: 100%;position: absolute;padding: 0 5px;right: 2px;line-height: 22px;color: #7a7a7a;text-align: right;user-select: none;">{{ direction[1] }}div>span>div>
template>
<script>
export default {name: "switchComponent",props: {value: {type: Boolean,default: true,},text: {type: String,default: "",},},data() {return {isChecked: this.value,};},computed: {direction() {if (this.text) {return this.text.split("|");} else {return [];}},},watch: {value(val) {this.isChecked = val;},isChecked(val) {this.$emit("change", "base", val);},},methods: {toggle() {this.isChecked = !this.isChecked;},},
};
script>
<style>
.weui-switch {display: block;position: relative;width: 44px;height: 20px;border: 1px solid #dfdfdf;outline: 0;border-radius: 16px;box-sizing: border-box;background-color: #dfdfdf;transition: background-color 0.1s, border 0.1s;cursor: pointer;margin-top: 2px;
}
.weui-switch:before {content: " ";position: absolute;top: 0;left: 0;width: 42px;height: 18px;border-radius: 15px;background-color: #fdfdfd;transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}
.weui-switch:after {content: " ";position: absolute;top: -1px;left: 0;width: 21px;height: 21px;border-radius: 15px;background-color: #ffffff;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
}
.weui-switch-on {border-color: #6ab2fd;background-color: #6ab2fd;
}
.weui-switch-on:before {border-color: #6ab2fd;background-color: #6ab2fd;
}
.weui-switch-on:after {transform: translateX(22px);
}
style>

在父组件中引入

<template><div><switch v-model="value" text="on|off">switch><switch v-model="value" @change="getDataList">switch>div>template><script>
import switch from './components/Switch'
export default {name: "App",components: {switch},data() {return {value:true}},methods:{/*** 获取数据列表*/getDataList() {}}
};
script><style lang="less">style>

效果图

方法二：

Switch组件

<template><div><div class="switch"><div class="switch-bg" :class="{on:cur==1}"><div class="switch-btn" :class="{on:cur==1}" @click="openSwitch" >div>div>div>div>
template>
<script>
export default {name: "switchComponent",data:{return {cur:0}},methods: {openSwitch:function(){this.cur = !this.cur;}},
script>
<style>.switch{width: 2rem;height: 1.1rem;border-radius: 50px;border: 1px solid #efefef;position: relative;}.switch-btn{width: 1.1rem;height: 1.1rem;border-radius: 50%;border: 1px solid #efefef;position: absolute;background-color: #fff;top: -1px;left: -1px;transition:left .5s;-moz-transition:left .5s; /* Firefox 4 */-webkit-transition:left .5s; /* Safari and Chrome */-o-transition:left .5s; /* Opera */}.switch-bg{background-color: #fd9152;width: 1rem;height: 1.1rem;border-radius: 50px;transition: width .5s;-moz-transition: width .5s; /* Firefox 4 */-webkit-transition:  width .5s; /* Safari and Chrome */}.switch-btn.on{left: 1rem;}.switch-bg.on{width: 2rem;}style>

效果图

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！