<template>
  <div>
    <div class="wrap">
      <lyf-button :loading="loading" @click="start">默认强按钮</lyf-button>
      <lyf-button type="secondary" icon="close2">次按钮</lyf-button>
      <lyf-button weak icon="group">默认弱按钮</lyf-button>
      <lyf-button type="danger" icon="refresh">强警告按钮</lyf-button>
      <lyf-button type="danger" weak icon="download">弱警告按钮</lyf-button>
      <lyf-button type="warn" icon="success">强警示按钮</lyf-button>
      <lyf-button type="warn" weak>弱警示按钮</lyf-button>
      <lyf-button disabled>不可点击按钮</lyf-button>
    </div>

    <div class="wrap ghost-wrap">
      <lyf-button ghost icon="like">幽灵按钮</lyf-button>
      <lyf-button size="small" ghost>小幽灵</lyf-button>
    </div>

    <div class="wrap">
      <lyf-button size="big" icon="home" @click="end">大按钮</lyf-button>
    </div>

    <div class="wrap">
      <lyf-button size="small">小按钮</lyf-button>
      <lyf-button size="small" type="secondary" icon="home">小次按钮</lyf-button>
    </div>

    <div class="wrap">
      <lyf-button size="small" type="danger" icon="home">小按钮</lyf-button>
      <lyf-button size="small" type="warn">按钮</lyf-button>
      <lyf-button size="small" icon="home"></lyf-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    }
  },
  methods: {
    start() {
      console.log('执行');
      this.loading = true
    },
    end() {
      this.loading = false
    }
  }
}
</script>

<style scoped>
.ghost-wrap {
  padding: 10px 0;
  background-color: #333;
}
</style>