<template>
  <div>
    <h1>Button 按钮</h1>
    <p class="fbg-text">常用的操作按钮。</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseButtonStr">
      <el-button>按钮</el-button>
    </demo>
    <h3 class="fbg-title">尺寸</h3>
    <demo :code="sizeButtonStr">
      <el-button size="lg">大按钮</el-button>
      <el-button size="md">普通按钮</el-button>
      <el-button size="sm">小按钮</el-button>
    </demo>
    <h3 class="fbg-title">类型</h3>
    <demo :code="typeButtonStr">
      <el-button type="primary">主题按钮</el-button>
      <el-button type="default">普通按钮</el-button>
    </demo>
    <h3 class="fbg-title">禁用</h3>
    <demo :code="disbaledButtonStr">
      <el-button type="primary" disabled>主题按钮</el-button>
      <el-button type="default" disabled>普通按钮</el-button>
    </demo>
    <h3 class="fbg-title">加载</h3>
    <demo :code="loadingButtonStr">
      <el-button :loading="true">加载按钮</el-button>
    </demo>
    <h3 class="fbg-title">属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>type</td>
          <td>按钮类型</td>
          <td>string</td>
          <td>primary | default</td>
          <td>default</td>
        </tr>
        <tr>
          <td>disbaled</td>
          <td>禁用状态</td>
          <td>boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>size</td>
          <td>按钮大小</td>
          <td>string</td>
          <td>lg | md | sm</td>
          <td>md</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      data: '',
      loading: true,
      baseButtonStr: `
      <el-button>按钮</el-button>`,
      sizeButtonStr: `
      <el-button size="lg">大按钮</el-button>
      <el-button size="md">普通按钮</el-button>
      <el-button size="sm">小按钮</el-button>`,
      typeButtonStr: `      
      <el-button type="primary">主题按钮</el-button>
      <el-button type="default">普通按钮</el-button>`,
      disbaledButtonStr: `      
      <el-button type="primary" disbaled>主题按钮</el-button>
      <el-button type="default" disbaled>普通按钮</el-button>`,
      loadingButtonStr: `      
      <el-button :loading="true">加载按钮</el-button>`
    }
  },
  mounted() {
    hljs.highlightCode();
  }
}
</script>