组件封装代码 components/switch/switch.vue
<template>
<div class="sun-switch"
:class="{'sun-switch-on':value,'sun-switch-disabled':disabled}"
:
@click="handleChange"
>
<div class="sun-switch-node">
<i class="sun-icon sun-icon-loading" :></i>
</div>
</div>
</template>
<script>
export default {
name: 'SunSwitch', // 组件名
props: {
/*
<sun-switch v-model="checked"></sun-switch>
在应用v-model的应用Vue会主动为组件传递一个value属性，值是 checked
如果要扭转v-model的值须要登程input办法 this.$emit('input',value)
*/
value: { // v-model传递过去的值
type: Boolean,
},
disabled: { // 是否是 disabled
type: Boolean,
},
size: { // 大小
type: String | Number,
},
loading: { // 是否是加载状态
type: Boolean,
default: false,
},
activeColor: { // 选中的色彩
type: String,
},
inactiveColor: { // 未选中的色彩
type: String,
},
},
watch: {
value(newVal) { // 监听value扭转触发change事件
this.$emit('change', newVal)
},
},
computed: {
/**
* 计算大小
* 1.如果蕴含单位就间接应用
* 2.如果没有单位默认增加 px 为单位
*/
calSize() {
return /px|em|rem|%/.test(this.size) ? this.size : this.size + 'px'
},
/**
* 计算背景色彩
* 1.如果value为true就应用activeColor色彩
* 2.如果为false就应用inactiveColor色彩
*/
CalBgColor() {
return this.value ? this.activeColor : this.inactiveColor
},
},
methods: {
// 点击的时候触发事件
handleChange(e) {
// 如果是disabled就间接返回
if (this.disabled) return
/**
* 因为switch只有true和false两种状态
* 所以每次点击取反原来的值就行
*/
const model = !this.value
// 触发input事件，传递取反后的值
this.$emit('input', model)
// 触发click事件不便注册为switch组件注册click事件再把事件对象传递过来
this.$emit('click', e)
},
},
}
</script>
<style lang="less" scoped>
// loading动画
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
// switch款式
.sun-switch {
position: relative;
display: inline-block;
box-sizing: content-box;
width: 2em;
height: 1em;
font-size: 30px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 1em;
cursor: pointer;
transition: background-color 0.3s;
}
// 外部圆按钮款式
.sun-switch-node {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 1em;
height: 1em;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1),
0 3px 3px 0 rgba(0, 0, 0, 0.05);
transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05),
-webkit-transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
.sun-icon-loading {
animation: rotate 2s infinite linear;
font-size: 0.6em;
}
}
// 选中款式
.sun-switch-on {
background-color: #1989fa;
.sun-switch-node {
transform: translateX(1em);
.sun-icon-loading {
animation: rotate 2s infinite linear;
color: #1989fa;
}
}
}
.sun-switch-disabled {
cursor: not-allowed;
opacity: 0.5;
}
</style>
注册组件 components/index.js
/*
这种形式次要是实现vue.use(形式的注册)
*/
// 首先导入Switch组件
import Switch from './switch/switch.vue'
// 创立一个install办法接管一个Vue为参数
const install = function(Vue) {
/*
应用Vue注册组件组件名为Switch的name属性
*/
Vue.component(Switch.name, Switch)
}
/*
默认导出一个对象，这个对象中要有install办法
在应用vue.use(组件)是会调用这个install办法，而且会把Vue传进去
*/
export default {
install,
}
在 main.js 中增加如下代码
// 导入
import switch from './components/index'
// 注册
Vue.use(switch)
测试代码 app.vue
<template>
<div class="app">
<!-- 根底用法 -->
<sun-switch v-model="checked"></sun-switch>
<!-- 大小 -->
<sun-switch size="10" v-model="checked"></sun-switch>
<!-- 是否禁用 -->
<sun-switch disabled v-model="checked"></sun-switch>
<!-- 自定义色彩 -->
<sun-switch size="10" active-color="green" inactive-color="red" v-model="checked"></sun-switch>
<!-- 事件 -->
<sun-switch @click="handleClick" @change="handleChange" v-model="checked"></sun-switch>
</div>
</template>
<script>
export default {
data() {
return {
checked: true,
}
},
methods: { // 监听状态扭转事件
handleChange(value) {
console.log(value)
},
handleClick(e) {
console.log('点我了', e)
},
},
}
</script>
<style lang="less">
</style>
发表回复