前言

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

如有錯誤，請指出，感謝！