Button组件api、demo优化讨论

[kagol]

api

Button组件：https://vue-devui.github.io/components/button/

1. type是<button>html原生属性，在vue中可以直接透传，所以是冗余的，建议移除
2. btnStyle建议改成variant
3. position设计不合理，建议移除，通过d-button-group来实现左右按钮的功能
4. id冗余，建议移除
5. icon的api说明错误，应该是可选， 自定义按钮图标
6. width的api说明错误，应该是可选，button 宽度
7. onClick冗余，建议移除

demo

1. 第一个demo建议用按钮类型，将variant所有属性排在一起（这样就包含了主要按钮、次要按钮、文字按钮等类型）
2. 第二个demo建议用禁用状态，将每种variant的按钮都设置一下disabled，和没有设置的作对比
3. demo里面不应该设置style/class等额外的样式
4. 文字按钮的demo中text和text-dark无区别，只需要保留text即可，移除text-dark
5. 左右按钮中间存在圆角需要去除

[kagol]

Button组件API、Demo优化草案：

API

d-button 参数

参数	类型	默认	说明
variant	'solid' | 'outline' | 'text'	'outline'	可选，按钮的形态
size	'lg' | 'md' | 'sm' | 'xs'	'md'	可选，按钮大小
color	'secondary' | 'primary' | 'danger'	'secondary'	可选，按钮主题色
icon	string	--	可选， 自定义按钮图标
disabled	boolean	false	可选，是否禁用 button
loading	boolean	false	可选，设置加载中状态

注意：type、autofocus等属性，click事件都是<button>标签原生的属性，直接用即可，因此从 API 文档中移除。

Demo

按钮类型

通过variant设置按钮类型，目前支持solid、outline、text三种类型，默认为outline类型。

<template>
  <div class="button-size-demo">
    <d-button variant="solid">Solid Button</d-button>
    <d-button>Outline Button</d-button>
    <d-button variant="text">Text Button</d-button>
  </div>
</template>

主题色

通过color设置按钮主题，目前支持secondary、primary、danger三种类型，默认为secondary类型（当variant为solid时，默认为primary，因为主要按钮是高频使用场景）。

<template>
  <div class="button-size-demo">
    <d-button variant="solid" color="primary">Primary</d-button>
    <d-button color="primary">Primary</d-button>
    <d-button variant="text" color="primary">Primary</d-button>
  </div>
  <br />
  <div class="button-size-demo">
    <d-button variant="solid" color="danger">Danger</d-button>
    <d-button color="danger">Danger</d-button>
    <d-button variant="text" color="danger">Danger</d-button>
  </div>
</template>

按钮大小

通过size设置按钮大小，支持xs、sm、md、lg四种类型，默认为md。

<template>
  <div class="button-size-demo">
    <d-button size="xs">Mini</d-button>
    <d-button size="sm">Small</d-button>
    <d-button>Middle</d-button>
    <d-button size="lg">Large</d-button>
  </div>
</template>

禁用状态

通过disabled参数设置按钮禁用状态。

<template>
  <div class="button-size-demo">
    <d-button variant="solid">Solid Button</d-button>
    <d-button>Outline Button</d-button>
    <d-button variant="text">Text Button</d-button>
  </div>
  <br />
  <div class="button-size-demo">
    <d-button variant="solid" disabled>Solid Button</d-button>
    <d-button disabled>Outline Button</d-button>
    <d-button variant="text" disabled>Text Button</d-button>
  </div>
</template>

加载中状态

通过loading参数设置按钮加载中状态。

<template>
  <d-button
    variant="solid"
    color="primary"
    :loading="showLoading"
    @click="handleClick"
  >
    Click me
  </d-button>
</template>
<script>
import { ref, defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const showLoading = ref(false);
    const handleClick = () => {
      showLoading.value = true;
      setTimeout(() => {
        showLoading.value = false;
      }, 2000);
    };

    return { showLoading, handleClick };
  }
});
</script>

图标

<template>
  <div class="button-size-demo">
    <d-button icon="add" variant="solid" color="primary"> New </d-button>
    <d-button icon="filter"> Filter </d-button>
  </div>
  <br />
  <div class="button-size-demo">
    <d-button icon="add" variant="solid" color="primary" disabled>
      New(disabled)
    </d-button>
    <d-button icon="filter" disabled> Filter(disabled) </d-button>
  </div>
  <br />
  <div class="button-size-demo">
    <d-button icon="connect" variant="text"> Link </d-button>
    <d-button icon="run" variant="text"> Run </d-button>
  </div>
  <br />
  <div class="button-size-demo">
    <d-button icon="connect" variant="text" disabled> Link(disabled) </d-button>
    <d-button icon="run" variant="text" disabled> Run(disabled) </d-button>
  </div>
  <br />
  <div class="button-size-demo">
    <d-button icon="add" variant="text" title="add"></d-button>
    <d-button icon="delete" variant="text" title="delete"></d-button>
  </div>
  <br />
  <div class="button-size-demo">
    <d-button icon="add" variant="text" disabled title="add"></d-button>
    <d-button icon="delete" variant="text" disabled title="delete"></d-button>
  </div>
  <br />
  <div class="button-size-demo">
    <d-button size="xs">
      Click me
      <span class="icon-chevron-down"></span>
    </d-button>
  </div>
  <br />
  <div class="button-size-demo">
    <d-button variant="text">
      Click me
      <span class="icon-chevron-down"></span>
    </d-button>
  </div>
</template>

[kagol]

关于左右按钮的实现，建议增加一个d-button-group的组件，用来实现多个按钮排在一起的效果，比如左右按钮。

<d-button-group :spacing="-1">
  <d-button variant="solid">创作者中心<d-button>
  <d-button variant="solid" icon="arrow-down"><d-button>
</d-button-group>

当spacing设置为-1的时候可以认为是粘在一起的左右按钮，按钮之间只有一根细线分隔，相应的圆角也被合并在一起。