frontend / zui

button.md 2.21 KB

Button 按钮

按钮组件，可配置多种不同的按钮样式

76ac7eee75ec316e851e25bd4ce8c8ce3de3745d/examples/views/docs/component/button.md#">按钮类型

配置type属性改变按钮类型

::: snippet 支持default、primary、secondary, link，默认为default

<template>
  <div>
    <zui-button disabled>Default</zui-button>
    <zui-button type="primary">Primary</zui-button>
    <zui-button type="secondary">Secondary</zui-button>
    <zui-button type="link">链接</zui-button>
  </div>
</template>

:::

76ac7eee75ec316e851e25bd4ce8c8ce3de3745d/examples/views/docs/component/button.md#">按钮形状

支持默认、圆角、矩形按钮

::: snippet 配置round为圆角按钮、配置square为矩形按钮

<template>
  <div>
    <zui-button>默认按钮</zui-button>
    <zui-button round>圆角按钮</zui-button>
    <zui-button square>矩形按钮</zui-button>
  </div>
</template>

:::

76ac7eee75ec316e851e25bd4ce8c8ce3de3745d/examples/views/docs/component/button.md#">按钮大小

配置size属性改变按钮大小

::: snippet 支持sm、md、lg，默认为md

<template>
  <div>
    <zui-button size="sm">小型按钮</zui-button>
    <zui-button size="md" type="secondary">中型按钮</zui-button>
    <zui-button size="lg" type="primary">大型按钮</zui-button>
  </div>
</template>

:::

76ac7eee75ec316e851e25bd4ce8c8ce3de3745d/examples/views/docs/component/button.md#">块级元素

宽度占满一行的按钮

::: snippet 配置block

<template>
  <div>
    <zui-button type="primary" size="lg" square block>确定</zui-button>
    <zui-button size="lg" square block>取消</zui-button>
  </div>
</template>

:::

76ac7eee75ec316e851e25bd4ce8c8ce3de3745d/examples/views/docs/component/button.md#">按钮禁用

按钮支持禁用

::: snippet 配置disabled

<template>
  <div>
    <zui-button type="primary" @click="handleClick">普通按钮</zui-button>
    <zui-button disabled @click="handleClick">禁用按钮</zui-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('click');
    }
  } 
}
</script>

:::

API

Attribute 属性

参数|说明|类型|可选值|默认值 -|-|-|-|- type | 按钮类型 | String | default、primary、secondary | default block | 块状按钮 | Boolean | true、false | false round | 圆角按钮 | Boolean | true、false | false square | 矩形按钮 | Boolean | true、false | false disabled | 按钮禁用 | Boolean | true、false | false

Events 事件

事件名称|说明|回调参数 -|-|- click | 按钮点击事件 | -