<template>
  <div class="mainBox w100 wp">
    <zgh-header :title="$route.name"></zgh-header>
    <div class="common-top h100 mgT10">
<button class="w100 pd30 relative">
  <zgh-touch-ripple class="h100 middle_before">
        <div class="middle ">
          123123
        </div>
      </zgh-touch-ripple>
</button>


      <div class="w70 center-block">
        <zgh-button-tab v-model="activeIndex" :tab="tabName" cls="col-xs-4 className"></zgh-button-tab>
      </div>

      <div class="highlight mgB20">
        <div class="wp fs14">
          用法：
          <p>1、v-modle绑定值控制显示第几个</p>
          <p>2、tab 为选项值 （如： ['昨天', '今天', '明天']）</p>
          <p>3、cls 为按钮添加class   </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 {
        activeIndex: 2,
        tabName: ['昨天', '今天', '明天'],
        tbody: [
          {name: 'tab', explain: '数据', type: 'Array', default:"['名称1','名称2']"},
          {name: 'v-model', explain: '初始化当前选中', type: 'Number', default: '0'},
          {name: 'cls', explain: '为按钮添加的class', type: 'String', default: 'col-xs-4'}
        ],
        code: `
      <zgh-button-tab v-model="activeIndex" :tab="tabName" cls="col-xs-4 className"></zgh-button-tab>`
      }
    },
    computed: {},
    mounted() {

    },
    methods: {}
  }
</script>

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


</style>
