<template>
  <div id="app">
    <div>
      <h1>图标</h1>
      <div style="display: inline-block;line-height:50px;width: 50px;height: 50px;border: 1px solid #eee"
           v-for="item in icons"
           :key="item">
        <template>
          <i :class="item" style="font-size: 20px"></i>
        </template>
      </div>
    </div>
    <div>
      <h1>普通按钮</h1>
      <b-button>默认按钮</b-button>
      <span class="margin"></span>
      <b-button type="primary" @click="btnClick">主要按钮</b-button>
      <span class="margin"></span>
      <b-button type="success">成功按钮</b-button>
      <span class="margin"></span>
      <b-button type="error">警告按钮</b-button>
      <span class="margin"></span>
      <b-button type="warning">警告按钮</b-button>
    </div>
    <div>
      <h1>禁用按钮</h1>
      <b-button disabled>默认按钮</b-button>
      <span class="margin"></span>
      <b-button type="primary" disabled>主要按钮</b-button>
      <span class="margin"></span>
      <b-button type="success" disabled>成功按钮</b-button>
      <span class="margin"></span>
      <b-button type="error" disabled>警告按钮</b-button>
      <span class="margin"></span>
      <b-button type="warning" disabled>警告按钮</b-button>
    </div>

    <div>
      <h1>圆角按钮</h1>
      <b-button round>默认按钮</b-button>
      <span class="margin"></span>
      <b-button type="primary" round>主要按钮</b-button>
      <span class="margin"></span>
      <b-button type="success" round>成功按钮</b-button>
      <span class="margin"></span>
      <b-button type="error" round>警告按钮</b-button>
      <span class="margin"></span>
      <b-button type="warning" round>警告按钮</b-button>
    </div>

    <!-- radio -->
    <div>
      <h1>单项选择器</h1>
      <b-radio v-model="radioVal" label="1">选项一</b-radio>
      <span class="margin"></span>
      <b-radio v-model="radioVal" label="2">选项二</b-radio>
      <h1>选择器禁用</h1>
      <b-radio v-model="stopRadioVal" label="1" disabled>选项一</b-radio>
      <span class="margin"></span>
      <b-radio v-model="stopRadioVal" label="2" disabled>选项二</b-radio>
      <h1>带有边框</h1>
      <b-radio v-model="stopRadioVal" label="1" border>选项一</b-radio>
      <span class="margin"></span>
      <b-radio v-model="stopRadioVal" label="2" border>选项二</b-radio>
    </div>
    <!-- checkbox -->
    <div>
      <h1>多项选择器</h1>
      <b-checkbox>香蕉</b-checkbox>
      <span class="margin"></span>
      <b-checkbox>柠檬</b-checkbox>
      <h1>选择器禁用</h1>
      <span class="margin"></span>
      <b-checkbox>柠檬</b-checkbox>
      <h1>带有边框</h1>
      <span class="margin"></span>
      <b-checkbox>柠檬</b-checkbox>
    </div>
    <!-- input -->
    <div>
      <h1>input</h1>
      <b-input placeholder="这是个输入提示信息"></b-input>
      <span class="margin"></span>
      <b-input placeholder="这是个输入提示信息"></b-input>
      <h1>input禁用</h1>
      <span class="margin"></span>
      <b-input placeholder="这是个输入提示信息"></b-input>
    </div>
    <!-- textarea -->
    <div>
      <h1>textarea</h1>
      <b-textarea v-model="textVal" @change="textChange" placeholder="这是个输入提示信息"></b-textarea>
      <span class="margin"></span>
      <h1>textarea禁用</h1>
      <b-textarea disabled v-model="textVal" @change="textChange" placeholder="我被禁用了"></b-textarea>
      <span class="margin"></span>
      <h1>带有边框</h1>
      <span class="margin"></span>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      stopRadioVal: '1',
      radioVal: '1',
      textVal: '',
      icons: [
        'icon-shijian',
        'icon-naozhong',
        'icon-shezhi',
        'icon-sousuochaxun',
        'icon-zhuye',
        'icon-bianjixiugai',
        'icon-shanchu',
        'icon-shuaxin',
        'icon-fenxiang',
        'icon-guanlianfujian',
        'icon-fanhui',
        'icon-jinru',
        'icon-jian',
        'icon-jia',
        'icon-guanbi',
        'icon-zhengque',
        'icon-dayin',
        'icon-wendang',
        'icon-neirongwendang',
        'icon-quanping',
        'icon-chuangkoufangda',
        'icon-zanting',
        'icon-tupian',
        'icon-bofang',
        'icon-wenjianjiai',
        'icon-tongzhi',
        'icon-paizhaoxiangji',
        'icon-gongsilogo',
        'icon-gongsilogowenzi',
        'icon-shipin',
        'icon-zan',
        'icon-celiang',
        'icon-luxian',
        'icon-mianji',
        'icon-daohang',
        'icon-fangda',
        'icon-suoxiao',
        'icon-wifi',
        'icon-meiwifi',
        'icon-huhuan',
        'icon-yuyin',
        'icon-erji',
        'icon-wenjian',
        'icon-shexiangji',
        'icon-shengyin',
        'icon-jingyin',
        'icon-dengji',
        'icon-zhinanzhen',
        'icon-tongxunlu',
        'icon-pinglun',
        'icon-pinglun2',
        'icon-pinglun3',
        'icon-mima',
        'icon-yiduxinxi',
        'icon-youjianxinxiicon',
        'icon-yonghuicon',
        'icon-shangchuan',
        'icon-xiazai',
        'icon-pingmufangda',
        'icon-pingmusuoxiao',
        'icon-fuzhi',
        'icon-ditu1',
        'icon-ditu2',
        'icon-zuobiaoicon',
        'icon-biaojidian1',
        'icon-denglu',
        'icon-tuichu',
        'icon-fanhui2',
        'icon-jinru2',
        'icon-tuceng',
        'icon-shouji',
        'icon-diannao',
        'icon-pad',
        'icon-suodingweizhi',
        'icon-dingzi',
        'icon-daohangliebiao',
        'icon-shouqi',
        'icon-zhankai',
        'icon-feiji',
        'icon-dianhua',
        'icon-shouqikuaijin',
        'icon-zhankaikuaitui',
        'icon-bofang1',
        'icon-zanting1',
        'icon-tingzhi',
        'icon-shangyishou',
        'icon-kuaijin',
        'icon-jianqie',
        'icon-shoucang',
        'icon-weixihuan',
        'icon-yixihuan',
        'icon-shangdian',
        'icon-zhiwu',
        'icon-dangan',
        'icon-jianpan',
        'icon-zhexiantongji',
        'icon-zhuzhuangtongji',
        'icon-bingzhuantongji',
        'icon-tongjifenxi',
        'icon-lubiao',
        'icon-tianjia',
        'icon-shanchu1',
        'icon-guanbi1',
        'icon-guanbi3',
        'icon-xuanze'
      ]
    }
  },
  methods: {
    btnClick () {
      console.log('123')
    },
    textChange (val) {
      console.log(val)
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.margin {
  margin: 0 5px;
}
</style>
