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-on' : isChecked}" :value="value" @click="toggle"> <div v-if="isChecked && direction.length > 0"> {{direction[0]}} </div> <div v-if="!isChecked && direction.length > 0"> {{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开关组件,实现样式可自行更改就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: