vue子组件-toggle按钮组件封装

对checkbox及其label进行封装（两个属性）：

• checked 属性表示是否选中
• change 事件，在点击label的时候切换checked状态，同时改变UI

<toggle text="你猜呢" @change="onToggle" :checked="checked"/>

  methods: {
    onToggle(){
      this.checked = !this.checked
      ....
    },

<template>
  <div class="toggle">
    <input type="checkbox" id="awesome" :checked="checked">
    <label for="awesome" @click="$emit('change')">{{text}}</label>
  </div>
</template>

<script>
export default {
  props: {
    text: String,
    checked: Boolean
  }
};
</script>

<style>
.toggle {
  margin-top: 30px;
  padding: 10px;
  width: 100%;
  text-align: center;
  font: 150%/1.6 sans-serif;
}
.toggle input{
	position: absolute;
	clip: rect(0,0,0,0);
}
.toggle label {
	display: inline-block;
	padding: .35em .5em .2em;
	background: #ccc;
	background-image: linear-gradient(#ddd, #bbb);
	border: 1px solid rgba(0,0,0,.2);
	border-radius: .3em;
	box-shadow: 0 1px white inset;
	text-align: center;
	text-shadow: 0 1px 1px white;
	cursor: pointer;
}
.toggle input[checked] + label{
	box-shadow: .04em .1em .2em rgba(0,0,0,.6) inset;
	border-color: rgba(0,0,0,.3);
	background: #bbb;
}
</style>