简单的Vue小组件

前言

5月开始第二个vue项目，依旧是移动端，拿到效果图后简单的划分了一下自己的任务模块，计划先封装好公共组件和指令，然后再开始页面编写。

搭建项目

使用脚手架搭建项目，做完一些简单的项目配置后，在components里建一个public专门用来放置组件。

编写组件

现在我们要写一个小的switch开关组件：

switch.png

我们希望把它做成一个单页面的组件，因为我们要去编辑它的样式，照例我们先新建一个vue的文件components/public/mySwitch.vue，在里面去写他的结构和样式，：

<style scoped>
    .content{
        display: inline-block;
    }
    .my-switch {
        width: 52px;
        height: 31px;
        position: relative;
        border: 1px solid #dfdfdf;
        background-color: #fdfdfd;
        box-shadow: #dfdfdf 0 0 0 0 inset;
        border-radius: 20px;
        background-clip: content-box;
        display: inline-block;
        -webkit-appearance: none;
        user-select: none;
        outline: none;
    }
    .my-switch:before {
        content: '';
        width: 29px;
        height: 29px;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 20px;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }
    .my-switch:checked {
        border-color: #ff5208;
        box-shadow: #ff5208 0 0 0 16px inset;
        background-color: #ff5208;
    }
    .my-switch:checked:before {
        left: 21px;
    }
    .my-switch.my-switch-animbg {
        transition: background-color ease 0.4s;
    }
    .my-switch.my-switch-animbg:before {
        transition: left 0.3s;
    }
    .my-switch.my-switch-animbg:checked {
        box-shadow: #dfdfdf 0 0 0 0 inset;
        background-color: #ff5208;
        transition: border-color 0.4s, background-color ease 0.4s;
    }
    .my-switch.my-switch-animbg:checked:before {
        transition: left 0.3s;
    }
</style>
<template>
    <div class="content">
        <label>
            <input class="my-switch my-switch-animbg" type="checkbox" :disabled="disabled" v-model="currentValue">
        </label>
    </div>
</template>
<script>
    export default{
        props: {
            disabled: Boolean, 
            value: { // 你在外部通过v-model绑定的值在里面就写成value
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                currentValue: this.value
            }
        },
        watch: {
            currentValue (val) {
                this.$emit('on-change', val)
            },
            value (val) {
                this.currentValue = val
            }
        }
    }
</script>

组件通信

我们知道在vue中，父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息：

props.png

这里，我们的props里有两个，一个是在外部使用v-model绑定的value,一个是disabled，props可以设置：
type:值类型，
default:默认值，
required：是否必须
现在，我们给组件内部的checkbox使用v-model="currentValue"来监听他的值，并设置他的初始值为props传进来得值，这样我们的switch就能接受到外部传进来的值。
当我们点击时我们希望将checkbox的值传出去，这样我们就要通过events去通信，在这里我们使用watch来监测currentValue的值，当他的值变化时，我们将events传播出去并触发。我们也监测了value的值，当value改变时将他值赋给currentValue用来显示switch的开关状态，当然，如果在你写的组件中需要用到点击之类的，你也可以绑定click事件来触发events。

引入组件

然后我们在需要使用组件的地方将他import进来，在components中注册：

<div class="input-cloumn row gap">
      <span>是否设置为默认地址</span>
      <iSwitch class="switch-default" v-model="isDefault" @on-change="setDefault"></iSwitch>
</div>
<script>
    import iSwitch from "../public/switch.vue"
    export default{
        components:{
            iSwitch
        },
        data(){
            return{
             isDefault: false
            }
        },
        methods:{
             setDefault(val){
                this.isDefault = val;
                console.log(this.isDefault)
            }
        }
    }
</script>

ok，如果我们想禁用开关，只需要在组件上加上disabled就可以了，现在可以看看我们的组件了，工作正常。

default.png

如有错误，请指出，感谢！