<template>
  <div class="hello">
   <ul>
     <li>
        <p>基础用法</p>
        <div class="mb15">
          <poi-button>默认按钮</poi-button>
          <poi-button type="primary">主要按钮</poi-button>
          <poi-button type="success">成功按钮</poi-button>
          <poi-button type="info">信息按钮</poi-button>
          <poi-button type="warning">警告按钮</poi-button>
          <poi-button type="danger">危险按钮</poi-button>
        </div>
        <div class="mb15">
          <poi-button plain>朴素按钮</poi-button>
          <poi-button type="primary" plain>主要按钮</poi-button>
          <poi-button type="success" plain>成功按钮</poi-button>
          <poi-button type="info" plain>信息按钮</poi-button>
          <poi-button type="warning" plain>警告按钮</poi-button>
          <poi-button type="danger" plain>危险按钮</poi-button>
        </div>
        <div class="mb15">
          <poi-button round>圆角按钮</poi-button>
          <poi-button type="primary" round>主要按钮</poi-button>
          <poi-button type="success" round>成功按钮</poi-button>
          <poi-button type="info" round>信息按钮</poi-button>
          <poi-button type="warning" round>警告按钮</poi-button>
          <poi-button type="danger" round>危险按钮</poi-button>
        </div>
        <!-- <poi-button class="btn" type="btnstyle2" :freestyle="freestyle">自由设置</poi-button>
        <poi-button class="btn" type="btnstyle2" :freestyle="freestyle">这个按它又长又宽</poi-button>
        <poi-button class="btn" type="btnstyle" :freestyle="freestyle2">再看这个钮它又蓝又黄</poi-button> -->
     </li>
     <li>
        <p>禁用状态</p>
        <div class="mb15">
          <poi-button disabled>默认按钮</poi-button>
          <poi-button type="primary" disabled>主要按钮</poi-button>
          <poi-button type="success" disabled>成功按钮</poi-button>
          <poi-button type="info" disabled>信息按钮</poi-button>
          <poi-button type="warning" disabled>警告按钮</poi-button>
          <poi-button type="danger" disabled>危险按钮</poi-button>
        </div>
        <div class="mb15">
          <poi-button plain disabled>朴素按钮</poi-button>
          <poi-button type="primary" plain disabled>主要按钮</poi-button>
          <poi-button type="success" plain disabled>成功按钮</poi-button>
          <poi-button type="info" plain disabled>信息按钮</poi-button>
          <poi-button type="warning" plain disabled>警告按钮</poi-button>
          <poi-button type="danger" plain disabled>危险按钮</poi-button>
        </div>

     </li>
     <li>
        <p>文字按钮</p>
        <div class="mb15">
          <poi-button type="text">文字按钮</poi-button>
          <poi-button type="text" disabled>文字按钮</poi-button>
        </div>
     </li>
     <li>
        <p>尺寸</p>
        <div class="mb15">
          <poi-button class="btn">默认</poi-button>
          <poi-button class="btn" size="medium">中等</poi-button>
          <poi-button class="btn" size="small">小型</poi-button>
          <poi-button class="btn" size="mini">迷你</poi-button>
        </div>
     </li>
     <li>
        <p>左右图标</p>
        <div class="mb15">
          <poi-button type="primary">搜索<i slot="prefix" class="iconfont poi-icon-search"></i></poi-button>
          <poi-button type="primary">上传<i slot="suffix" class="iconfont poi-icon-upload"></i></poi-button>
        </div>
     </li>
     <li>
        <p>按钮组</p>
        <div class="mb15">
          <poi-button-group>
            <poi-button type="primary" icon="poi-icon-left">上一页</poi-button>
            <poi-button type="primary">下一页<i class="iconfont poi-icon-right poi-icon--right"></i></poi-button>
          </poi-button-group>
        </div>
     </li>

     <li>
        <p>加载中</p>
        <div class="mb15">
          <poi-button type="primary" :loading="true">加载中</poi-button>
        </div>
     </li>

     <li>
        <p>自定义样式</p>
        <div class="mb15">
          <poi-button type="primary" :freestyle="freestyle">加载中</poi-button>
          <poi-button type="primary" :freestyle="freestyle2">加载中</poi-button>
        </div>
     </li>
   </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      freestyle:{
        btnstyle:[
          "{color:green;background:#ebb563;}",
          ":hover{background:red;}",
        ]
      },
      freestyle2:{
        btnstyle:[
          "{color:#FFF;background:blue;}",
          ":hover{background:yellow;}",
        ]
      },

    }
  }
}
</script>

<style scoped>
.mb15{
  margin-bottom:15px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin: 0 10px;
  list-style-type:none;
}
a {
  color: #42b983;
}
</style>
