button.md 8.15 KB
Edit Raw Blame History


Button 按钮
按钮组件，可配置多种不同的按钮样式
39ace875fb71df289f67ffdfef38592bf4a21e1d/examples/views/docs/component/button.md#">按钮类型
配置type属性改变按钮类型

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


    <template>
  <div>
    <zui-button>Default</zui-button>
    <zui-button type="primary">Primary</zui-button>
    <zui-button type="secondary">Secondary</zui-button>
    <zui-button type="plain">Plain</zui-button>
    <zui-button type="link">Link</zui-button>
  </div>
</template>

  
:::
39ace875fb71df289f67ffdfef38592bf4a21e1d/examples/views/docs/component/button.md#">按钮主题
配置theme属性改变按钮主题

::: snippet 支持red、green、blue


    <template>
  <div>
    <div style="padding-top: 10px;">
      <zui-button theme="red">Default</zui-button>
      <zui-button type="primary" theme="red">Primary</zui-button>
      <zui-button type="secondary" theme="red">Secondary</zui-button>
      <zui-button type="plain" theme="red">Plain</zui-button>
      <zui-button type="ghost" theme="red">Ghost</zui-button>
      <zui-button type="link" theme="red">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button theme="green">Default</zui-button>
      <zui-button type="primary" theme="green">Primary</zui-button>
      <zui-button type="secondary" theme="green">Secondary</zui-button>
      <zui-button type="plain" theme="green">Plain</zui-button>
      <zui-button type="ghost" theme="green">Ghost</zui-button>
      <zui-button type="link" theme="green">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button theme="blue">Default</zui-button>
      <zui-button type="primary" theme="blue">Primary</zui-button>
      <zui-button type="secondary" theme="blue">Secondary</zui-button>
      <zui-button type="plain" theme="blue">Plain</zui-button>
      <zui-button type="ghost" theme="blue">Ghost</zui-button>
      <zui-button type="link" theme="blue">Link</zui-button>
    </div>
  </div>
</template>

  
:::
39ace875fb71df289f67ffdfef38592bf4a21e1d/examples/views/docs/component/button.md#">按钮颜色
配置color属性改变按钮颜色

::: snippet 支持任意颜色


    <template>
  <div>
    <div style="padding-top: 10px;">
      <zui-button color="#074137">Default</zui-button>
      <zui-button type="primary" color="#074137">Primary</zui-button>
      <zui-button type="secondary" color="#074137">Secondary</zui-button>
      <zui-button type="plain" color="#074137">Plain</zui-button>
      <zui-button type="ghost" color="#074137">Ghost</zui-button>
      <zui-button type="link" color="#074137">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button color="#FDD108">Default</zui-button>
      <zui-button type="primary" color="#FDD108">Primary</zui-button>
      <zui-button type="secondary" color="#FDD108">Secondary</zui-button>
      <zui-button type="plain" color="#FDD108">Plain</zui-button>
      <zui-button type="ghost" color="#FDD108">Ghost</zui-button>
      <zui-button type="link" color="#FDD108">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button color="#F39800">Default</zui-button>
      <zui-button type="primary" color="#F39800">Primary</zui-button>
      <zui-button type="secondary" color="#F39800">Secondary</zui-button>
      <zui-button type="plain" color="#F39800">Plain</zui-button>
      <zui-button type="ghost" color="#F39800">Ghost</zui-button>
      <zui-button type="link" color="#F39800">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button color="#FF5257">Default</zui-button>
      <zui-button type="primary" color="#FF5257">Primary</zui-button>
      <zui-button type="secondary" color="#FF5257">Secondary</zui-button>
      <zui-button type="plain" color="#FF5257">Plain</zui-button>
      <zui-button type="ghost" color="#FF5257">Ghost</zui-button>
      <zui-button type="link" color="#FF5257">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button color="rgb(40, 170, 145)">Default</zui-button>
      <zui-button type="primary" color="rgb(40, 170, 145)">Primary</zui-button>
      <zui-button type="secondary" color="rgb(40, 170, 145)">Secondary</zui-button>
      <zui-button type="plain" color="rgb(40, 170, 145)">Plain</zui-button>
      <zui-button type="ghost" color="rgb(40, 170, 145)">Ghost</zui-button>
      <zui-button type="link" color="rgb(40, 170, 145)">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button color="#2F86F6">Default</zui-button>
      <zui-button type="primary" color="#2F86F6">Primary</zui-button>
      <zui-button type="secondary" color="#2F86F6">Secondary</zui-button>
      <zui-button type="plain" color="#2F86F6">Plain</zui-button>
      <zui-button type="ghost" color="#2F86F6">Ghost</zui-button>
      <zui-button type="link" color="#2F86F6">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button color="#000">Default</zui-button>
      <zui-button type="primary" color="#000">Primary</zui-button>
      <zui-button type="secondary" color="#000">Secondary</zui-button>
      <zui-button type="plain" color="#000">Plain</zui-button>
      <zui-button type="ghost" color="#000">Ghost</zui-button>
      <zui-button type="link" color="#000">Link</zui-button>
    </div>
    <div style="padding-top: 10px;">
      <zui-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变</zui-button>
      <zui-button color="linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%)" round>渐变</zui-button>
      <zui-button color="linear-gradient(to bottom right, #FDD108, #FFA000)" font-color="#333">渐变</zui-button>
      <zui-button color="linear-gradient(to bottom right, #F39800, #FF6400)">渐变</zui-button>
      <zui-button color="linear-gradient(to bottom right, #14C3A5, #117361)">渐变</zui-button>
    </div>
  </div>
</template>

  
:::
39ace875fb71df289f67ffdfef38592bf4a21e1d/examples/views/docs/component/button.md#">按钮图标
支持自定义图标

::: snippet 配置icon改变图标，支持String、Object类型


    <template>
  <div>
    <zui-button icon="accountbalancewallet">Default</zui-button>
    <zui-button :icon="{ name: 'tongzhi', svg: true }">Default</zui-button>
    <zui-button icon="accountbalancewallet" type="primary">Primary</zui-button>
    <zui-button :icon="{ src: 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_2@1x-50e9c7fdf4.png' }" type="primary">Primary</zui-button>
  </div>
</template>

  
:::
39ace875fb71df289f67ffdfef38592bf4a21e1d/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>

  
:::
39ace875fb71df289f67ffdfef38592bf4a21e1d/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>

  
:::
39ace875fb71df289f67ffdfef38592bf4a21e1d/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>

  
:::
39ace875fb71df289f67ffdfef38592bf4a21e1d/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
size | 按钮大小 | String | ms,md,lg | md
block | 块状按钮 | Boolean | true,false | false
round | 圆角按钮 | Boolean | true,false | false
square | 矩形按钮 | Boolean | true,false | false
disabled | 按钮禁用 | Boolean | true,false | false
theme | 按钮主题 | String | red,green,blue | -
color | 按钮颜色 | String | - | -
fontColor | 按钮文本颜色，只在color为linear-gradient模式下生效 | String | - | #FFF
Events 事件
事件名称|说明|回调参数
-|-|-
click | 按钮点击事件 | -