<template>
  <div class="h100 w100 ">
    <zgh-header :title="$route.name"></zgh-header>
    <div class="common-top mainBox wp ">
      <div class="relative pd15">
        按月付费
        <zgh-toggle class="middle r" name="switch" v-model="taggleActive"></zgh-toggle>
      </div>
      <div class="highlight mgB20">
        <div class="wp fs14">
          用法：
          <p>1、v-modle绑定值控制开/关(Boolean)</p>
          <p>2、class 自定义样式class名</p>
          <p>3、name 类似input的name值,一个页面多个toggle其name值不能重复（唯一性）</p>
        </div>
        <pre>
          <code class="hljs language-html">
            {{code | htmlDecode}}
          </code>
        </pre>
        <zgh-table :tbody="tbody"></zgh-table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        taggleActive: false,
        tbody: [
          {name: 'v-model', explain: '控制开/关', type: 'Boolean', default: 'false'},
          {name: 'name', explain: 'input name属性', type: 'String', default: 'SelectButton'},
        ],
        code: `
         <div class="relative pd15">
            按月付费
            <zgh-toggle class="middle r" name="switch" v-model="taggleActive"></zgh-toggle>
          </div>
        `
      }
    },
    computed: {},
    mounted() {

    },
    methods: {}
  }
</script>

<style lang="less" scoped>
  @import url("../../assets/config.less");

  h3 {
    background: #eee;
  }
</style>
