button.md
2.21 KB
Button 按钮
按钮组件，可配置多种不同的按钮样式
95417b870a76d45820d3aab6640033e28c360dd9/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>
:::
95417b870a76d45820d3aab6640033e28c360dd9/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>
:::
95417b870a76d45820d3aab6640033e28c360dd9/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>
:::
95417b870a76d45820d3aab6640033e28c360dd9/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>
:::
95417b870a76d45820d3aab6640033e28c360dd9/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 | 按钮点击事件 | -