Button 按钮

使用指南

import { H3Button } from '@lateinos/thinking-ui'

Vue.use(H3Button)

export default {
 name: 'h3button',
 components: {
 H3Button,
 H3ButtonGroup: H3Button.Group
 },
}

与thinking-ui 2.0版组件的区别以及迁移

按照新的button组件规范修改相关样式

若要做迁移请参考 Button

1. 弃用的props：radius
2. 添加的props: otherType
3. 添加的slot: icon

ButtonGroup

1. 弃用的props：layout

代码演示

查看代码

<template>
  <div>
    <div class="demo-button-list">
      <p class="info-title">
        按钮类型 按钮主要分为5个类型：主要按钮、次要按钮、线性按钮、文字按钮、图标按钮。
      </p>
      <p class="info-title">
        主要按钮
      </p>
      <h3-button type="primary">
        主要按钮 Normal
      </h3-button>
      <h3-button disabled>
        主要按钮 Disabled
      </h3-button>
      <h3-button type="primary" loading>
        加载中 Loading
      </h3-button>
      <h3-button type="error">
        危险按钮 Normal
      </h3-button>
      <h3-button type="error" disabled>
        危险按钮 Disabled
      </h3-button>
      <h3-button type="error" loading>
        加载中 Loading
      </h3-button>
      <h3-button type="warning">
        主要按钮 警告
      </h3-button>

      <p class="info-title">
        次要按钮
      </p>
      <h3-button> 次要按钮 Normal </h3-button>
      <h3-button disabled>
        次要按钮 Disabled
      </h3-button>
      <h3-button loading>
        加载中 Loading
      </h3-button>

      <p class="info-title">
        线性按钮
      </p>
      <h3-button type="primary" ghost>
        线性按钮 Normal
      </h3-button>
      <h3-button type="primary" ghost disabled>
        线性按钮 Disabled
      </h3-button>
      <h3-button type="primary" ghost loading>
        加载中 Loading
      </h3-button>
      <h3-button type="error" ghost>
        主要按钮 重要
      </h3-button>
      <h3-button type="warning" ghost>
        主要按钮 警告
      </h3-button>

      <p class="info-title">
        文字按钮
      </p>
      <h3-button
        type="primary"
        inline
        ghost
        otherType="text"
      >
        文字按钮 Normal
      </h3-button>
      <h3-button disabled inline otherType="text">
        文字按钮 Disabled
      </h3-button>
      <h3-button
        type="primary"
        ghost
        inline
        loading
        otherType="text"
      >
        加载中 Loading
      </h3-button>
      <h3-button
        type="error"
        inline
        ghost
        otherType="text"
      >
        文字按钮 重要
      </h3-button>
      <h3-button
        type="warning"
        inline
        ghost
        otherType="text"
      >
        文字按钮 重要
      </h3-button>

      <p class="info-title">
        图标按钮
      </p>
      normal
      <h3-button inline otherType="text" icon="IconFileTypeExcelFill">
      </h3-button>

      disabled:
      <h3-button
        icon="IconFileTypeExcelFill"
        inline
        disabled
        otherType="text"
      />

      <p class="info-title">
        选项按钮
      </p>
      <h3-button otherType="option" icon="IconFileTypeExcelFill">
        选项按钮 Normal
      </h3-button>

      <h3-button disabled otherType="option" icon="IconFileTypeExcelFill">
        选项按钮 disabled
      </h3-button>

      <p class="info-title">
        局部按钮
      </p>
      <p class="info-title">
        常规按钮
      </p>
      <h3-button type="primary" inline>
        常规按钮
      </h3-button>
      <h3-button inline>
        常规按钮
      </h3-button>
      <h3-button type="primary" ghost inline>
        常规按钮
      </h3-button>

      <p class="info-title">
        中型按钮
      </p>
      <h3-button size="medium" type="primary" inline>
        中型按钮
      </h3-button>
      <h3-button size="medium" inline>
        中型按钮
      </h3-button>
      <h3-button
        size="medium"
        type="primary"
        ghost
        inline
      >
        中型按钮
      </h3-button>

      <p class="info-title">
        小型按钮
      </p>
      <h3-button size="small" type="primary" inline>
        小型按钮
      </h3-button>
      <h3-button size="small" inline>
        小型按钮
      </h3-button>
      <h3-button
        size="small"
        type="primary"
        ghost
        inline
      >
        小型按钮
      </h3-button>

      <p class="info-title">
        浮动按钮
      </p>
      <h3-button class="float-btn" type="primary" icon="IconPlusStroke" />
    </div>
  </div>
</template>

<script>
import H3Button from '@/components/h3-button/';

export default {
  name: 'H3button',
  components: {
    H3Button,
  },
  data () {
    return {};
  },
};
</script>
<style lang="less">
//  浮动按钮样式
.float-btn {
  .h3think-button__icon {
    margin-right: 0;
  }
}
</style>
<style lang="less" scoped>
.demo-button-list {
  padding: 0 8px;
  background: #f2f2f2;
  .h3think-button-group {
    margin-bottom: 10px;
    button {
      margin-bottom: 0;
    }
  }
  button {
    margin-bottom: 10px;
  }
}
.demo-button-item {
  margin-right: 4px;
  margin-bottom: 4px;
}
.demo-button-group {
  padding: 0 8px;
  background: #eee;
}
p {
  font-weight: 600;
  font-size: 16px;
  padding: 15px;
}
.float-btn {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  box-shadow: 0 2px 12px 0 rgba(18, 25, 51, 0.1);
}
</style>

API

Prop Button

参数	说明	类型	默认值
disabled	是否禁用	boolean	false
type	样式类型 可选值：default | primary | warning | error	string	'default'
ghost	幽灵按钮样式	boolean	false
size	尺寸 可选值：large | medium | small	string	large
inline	是否内联	boolean	false
loading	是否显示加载状态，加载状态将禁止点击事件触发	boolean	false
icon	图标	string | slot	-
activeCls	激活状态 class 前缀，将在传入值中添加后缀-active，即demo-button将为 demo-button-active	string	'h3-button'
otherType	值为 text option, text 包含 图标和文字类型 等, option 为选项类型	string

Event Button

事件名	说明	参数
click	按钮状态不禁止时，点击按钮回调	event: Event

Prop ButtonGroup

参数	说明	类型	默认值
divide	是否需要显示分割线	boolean	false

Event ButtonGroup

事件名	说明	参数
-	-	-