Button 按钮

一、概述

定义

一种常用控件，鼠标点击可触发对应操作。

使用场景

• 需要用户触发执行的操作

类型

1、主按钮

• 用于重要功能的操作

2、次按钮

• 非重要功能的操作，该按钮操作在页面层级中的重要程度不高，亦或使用面型按钮会扰乱用户阅读信息 可用线型按钮替代。

3、危险按钮

• 危险按钮通常用在当用户触发将产生严重后果的不可逆操作时，通常使用于删除、退出等

4、链接按钮

• 用于轻量级功能的操作，亦或使用面型或者线型按钮会扰乱用户阅读信息，可用文字按钮替代。

二、主按钮

用法

用于重要功能的操作。

状态

hover 时——叠加白色透明度

<se-button type="default">默认按钮</se-button>
<se-button type="primary">主要按钮</se-button>
<se-button type="warn">警告按钮</se-button>
<se-button type="danger">危险按钮</se-button>

禁用状态

<div>
  <se-button disabled type="default">按钮</se-button>
  <se-button disabled type="primary">按钮</se-button>
  <se-button disabled type="warn">按钮</se-button>
  <se-button disabled type="danger">按钮</se-button>
</div>
<br />
<div>
  <se-button disabled plain type="default">朴素按钮</se-button>
  <se-button disabled plain type="primary">主要按钮</se-button>
  <se-button disabled plain type="warn">警告按钮</se-button>
  <se-button disabled plain type="danger">危险按钮</se-button>
</div>

图标按钮

按钮可以在文本前放置图标，用来解释当前的操作。

<section>
  <h5>嵌套图标组件实现图标按钮</h5>
  <se-button type="primary">
    <icon-plus />
    新建
  </se-button>
</section>

<section>
  <h5>字体图标实现图标按钮</h5>
  <se-button>
    <i class="icon-heart"></i>
    点赞
  </se-button>
</section>

<script>
  export default {
    components: {
      'icon-plus': {
        render(h) {
          return h(
            'i',
            {
              class: 'se-button__icon'
            },
            [
              h(
                'svg',
                {
                  attrs: {
                    width: '12',
                    height: '12',
                    viewBox: '0 0 12 12',
                    fill: 'none',
                    xmlns: 'http://www.w3.org/2000/svg'
                  }
                },
                [
                  h('path', {
                    attrs: {
                      'fill-rule': 'evenodd',
                      'clip-rule': 'evenodd',
                      d: 'M7 0H5V5H0V7H5V12H7V7H12V5H7V0Z',
                      fill: 'white'
                    }
                  })
                ]
              )
            ]
          )
        }
      }
    }
  }
</script>

<style scoped>
  section + section {
    margin-top: 40px;
  }
  .icon-heart {
    display: inline-block;
    font-style: normal;
  }
  .icon-heart::before {
    content: '\2764';
  }
</style>

三、次按钮

用法

非重要功能的操作，该按钮操作在页面层级中的重要程度不高，亦或使用面型按钮会扰乱用户阅读信息，可用线型按钮替代。

状态

hover 时——当前元素变成主色，或者明显的强调色。

<se-button plain type="default">朴素按钮</se-button>
<se-button plain type="primary">主要按钮</se-button>
<se-button plain type="warn">警告按钮</se-button>
<se-button plain type="danger">危险按钮</se-button>

四、危险按钮

用法

危险按钮通常用在当用户触发将产生严重后果的不可逆操作时，通常使用于删除、退出等。

状态

hover 时——叠加白色透明度（同主要按钮 4 态原则）。

<se-button plain type="danger">警告按钮</se-button>
<se-button disabled plain type="danger">警告按钮</se-button>

五、链接按钮

用法

用于轻量级功能的操作，亦或使用面型或者线型按钮会扰乱用户阅读信息，可用文字按钮替代。

状态

hover 时——叠加白色透明度（同主要按钮 4 态原则）。

<se-button type="text">文字按钮</se-button>
<se-button disabled type="text">文字按钮</se-button>

六、block

按钮长度可以自定义

<div class="block-buttons">
  <se-button block type="default">默认按钮</se-button>
  <se-button block type="primary">主要按钮</se-button>
  <se-button block type="warn">警告按钮</se-button>
  <se-button block type="danger">危险按钮</se-button>
</div>

<style>
  .block-buttons > .se-button + .se-button {
    margin: 15px 0;
  }
</style>

✭ 在大小屏下，宽度尽量不要大于 360px。

七、尺寸

根据界面尺寸的不同，可选择适合的按钮尺寸，按钮尺寸有大中小三类。

<div>
  <se-button plain size="large">large 按钮</se-button>
  <se-button plain size="default">默认按钮</se-button>
  <se-button plain size="mini">mini 按钮</se-button>
</div>
<br />
<br />
<div>
  <se-button type="primary" size="large">large 按钮</se-button>
  <se-button type="primary" size="default">默认按钮</se-button>
  <se-button type="primary" size="mini">mini 按钮</se-button>
</div>

✭ 建议高度在 24px 到 48px 以内，推荐 24px、32px、40px。

✭ 文字的大小在 14-18 之间，推荐使用 14px、16px。

八、加载

点击按钮执行加载操作，这种类型的加载属于局部加载，加载对用户的打扰较低。在加载过程中，按钮置灰，不可点击。

<div class="btn-group">
  <se-button type="primary" loading>加载中</se-button>
  <se-button type="default" loading>加载中</se-button>
  <se-button type="text" loading>加载中</se-button>
</div>

<div class="btn-group">
  <se-button type="primary" size="mini" loading>加载中</se-button>
  <se-button type="default" size="mini" loading>加载中</se-button>
  <se-button type="text" size="mini" loading>加载中</se-button>
</div>

<div class="btn-group">
  <se-button type="primary" size="large" loading>加载中</se-button>
  <se-button type="default" size="large" loading>加载中</se-button>
  <se-button type="text" size="large" loading>加载中</se-button>
</div>

<se-button type="primary" block loading>加载中</se-button>

<style scoped>
  .btn-group {
    margin-bottom: 20px;
  }
</style>

九、设置 <button> 原生 type 属性

通过 form-type 属性可以设置 <button> 原生的 type 属性。可选值: submit 和 reset。

<form>
  <input name="message" v-model="msg" />
  <se-button form-type="reset" type="default">重置</se-button>
  <se-button form-type="submit" type="primary" @click.native.prevent="onSubmit">
    提交
  </se-button>
</form>

<script>
  export default {
    data() {
      return { msg: 'Hello World' }
    },
    methods: {
      onSubmit() {
        console.log('提交成功！')
      }
    }
  }
</script>

<style>
  .se-button {
    margin-left: 10px;
  }
</style>

十、设置 open-type

<se-button open-type="getUserInfo" @getuserinfo="onGetUserInfo" type="primary">
  获取用户信息
</se-button>
<se-button open-type="openSetting" @opensetting="onGetSetting">打开授权设置页</se-button>
<se-button open-type="share" @openshare="onOpenShare">打开分享页</se-button>

<script>
  export default {
    methods: {
      onGetUserInfo(e) {
        console.log(e)
      },
      onGetSetting(e) {
        console.log(e)
      },
      onOpenShare(e) {
        console.log(e)
      }
    }
  }
</script>

Props

open-type 的合法值

Events