vue自定义switch开关组件,实现样式可自行更改

用法：importswitchcfrom'./public/switch'<switchcv-model="value1"text="on|off"></switchc>属性text非必

用法：

import switchc from './public/switch'
<switchc v-model="value1" text="on|off"></switchc>

属性

text 非必填，类型为string，要求格式为“on|off” ,以 | 分隔

事件

change

html部分：

<template>
 <div>
 <span class="weui-switch" :class="{'weui-switch-on' : isChecked}" :value="value" @click="toggle" style="position:relative">
 <div v-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>
 <div v-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>

js部分：

<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', val);
 }
 },
 methods: {
 toggle() {
 this.isChecked = !this.isChecked;
 }
 }
 } 
</script>

style部分：

<style>
 .weui-switch {
 display: block;
 position: relative;
 width: 52px;
 height: 24px;
 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;
 }
 .weui-switch:before {
 content: " ";
 position: absolute;
 top: 0;
 left: 0;
 width: 50px;
 height: 22px;
 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: 0;
 left: 0;
 width: 22px;
 height: 22px;
 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: #6F6F6F;
 background-color: #1AAD19;
 }
 .weui-switch-on:before {
 border-color: #1AAD19;
 background-color: #409eff;
 }
 .weui-switch-on:after {
 transform: translateX(28px);
 }
</style>

以上这篇vue自定义switch开关组件,实现样式可自行更改就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。