封装组件弹框
在父组件上写

<template><div><spanclass="weui-switch":class="{'weui-switch-on' : me_checked}":value="value"@click="toggle"></span></div>
</template><script>
export default {name: 'kaiguan',// 接收数据 这步可有可无 也可以不用传递直接在这个封装的组件中去写// 因为后面有$emit 派发事件呢，可直接在其调用的组件中去书写业务逻辑props: {value: {type: Boolean,default: true}},data () {return {me_checked: this.value}},// 监听状态改变 使用 $emit 派发事件watch: {me_checked (val) {this.$emit('input', val)}},methods: {// 点击切换状态toggle () {this.me_checked = !this.me_checked}}
}
</script>
<style>
/*  这里写的最多的就是css样式了 */
/* 初始样式 */.weui-switch {display: block;position: relative;width: 100px;height: 62px;border: 1px solid #DFDFDF;outline: 0;border-radius: 30px;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: 100px;height: 60px;border-radius: 30px;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: 60px;height: 60px;border-radius: 30px;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: #1AAD19;background-color: #1AAD19;}.weui-switch-on:before {border-color: #1AAD19;background-color: #1AAD19;}.weui-switch-on:after {transform: translateX(20px);}
</style>

在子组件中写

<template><div class="tan"><div class="box"><div class="con"><h4>title</h4><h4>content</h4></div><div class="btn"><button @click="qd">确定</button><button @click="qx">取消</button></div></div></div>
</template>
<script>
export default {methods: {qd () {// 确认按钮，这里使用this.$emit派发事件让其调用的组件触发事件this.$emit('qd')// Bus.$emit()// 这里也可以使用Bus.$emit()在点击确认之前传送写什么数据},qx () {// 取消按钮，这里使用this.$emit派发事件让其调用的组件触发事件this.$emit('qx')}}
}
</script>
<style lang="scss" scoped>
.tan {width: 400px;height: 400px;border: 1px solid;margin: 50% auto;
}
.btn > button {margin-left: 10px;
}
</style>