<template>
  <div>
    <h1>ButtonGroup 按钮选项组</h1>
    <p class="fbg-text">常用的操作按钮。</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseButtonGroupStr">
      <el-button-group v-model="singleSelect"  @change="handleChange">
        <el-button-group-item v-for="(item, index) in data" :key="index" :label="item.label" :value="item.value" />
      </el-button-group>
    </demo>
    <h3 class="fbg-title">多选用法</h3>
    <demo :code="baseButtonGroupStr">
      <el-button-group v-model="selected" multiple @change="handleChange">
        <el-button-group-item v-for="(item, index) in data" :key="index" :label="item.label" :value="item.value" />
      </el-button-group>
    </demo>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      singleSelect: 1,
      selected: [1, 2],
      data: [
        {
          label: '按钮1',
          value: 1,
        },
        {
          label: '按钮2',
          value: 2
        },
        {
          label: '按钮3',
          value: 3
        }
      ],
      baseButtonGroupStr: `
      <el-button-group v-model="selected" @change="handleChange">
        <el-button-group-item v-for="(item, index) in data" :key="index" :label="item.label" :value="item.value" />
      </el-button-group>
      <script>
      export default {
        data() {
          return {
            selected: [1, 2],
            data: [
              {
                label: '按钮1',
                value: 1,
              },
              {
                label: '按钮2',
                value: 2
              },
              {
                label: '按钮3',
                value: 3
              }
            ]
          }
        },
        methods: {
          handleChange(value) {
          }
        }
      }
      <\/script>`
    }
  },
  methods: {
    handleChange(value) {
    }
  },
  mounted() {
    hljs.highlightCode();
  }
}
</script>