按钮

效果

---

代码预览

<template>
    <div>
        <div class="row">
          <jul-button icon="jul-icon-edit" type="defalut" @click="fn">按钮</jul-button>
          <jul-button type="primary">按钮</jul-button>
          <jul-button type="success">按钮</jul-button>
          <jul-button type="info">按钮</jul-button>
          <jul-button type="warning">按钮</jul-button>
          <jul-button type="danger">按钮</jul-button>
        </div>
        <div class="row">
          <jul-button disabled icon="jul-icon-edit" round>按钮</jul-button>
          <jul-button disabled round type="primary">按钮</jul-button>
          <jul-button disabled round type="success">按钮</jul-button>
          <jul-button disabled round type="info">按钮</jul-button>
          <jul-button disabled round type="warning">按钮</jul-button>
          <jul-button disabled round type="danger">按钮</jul-button>
        </div>

        <div class="row">
          <jul-button icon="jul-icon-edit" circle type="primary"></jul-button>
          <jul-button icon="jul-icon-check" circle type="success"></jul-button>
          <jul-button icon="jul-icon-message" circle type="info"></jul-button>
          <jul-button icon="jul-icon-collect" circle type="warning"></jul-button>
          <jul-button icon="jul-icon-delete" circle type="danger"></jul-button>
        </div>
    </div>
</template>

<script>

export default {
  methods: {
    fn() {
      alert('点击了按钮')
    }
  }
}
</script>

<style lang="scss">
  .row {
    margin-bottom: 20px;
    .jul-button {
      margin-right: 20px;
    }
  }
</style>