import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`

Button \u6309\u94AE

\u4ECB\u7ECD

\u6309\u94AE\u7528\u4E8E\u89E6\u53D1\u4E00\u4E2A\u64CD\u4F5C\uFF0C\u5982\u63D0\u4EA4\u8868\u5355\u3002

\u5B89\u88C5

import { createApp } from 'vue';
// vue
import { Button } from '@nutui/nutui';
// taro
import { Button } from '@nutui/nutui-taro';

const app = createApp();
app.use(Button);

\u4EE3\u7801\u6F14\u793A

\u6309\u94AE\u7C7B\u578B

\u6309\u94AE\u652F\u6301 default\u3001primary\u3001info\u3001warning\u3001danger\u3001success \u516D\u79CD\u7C7B\u578B\uFF0C\u9ED8\u8BA4\u4E3A default\u3002

<nut-button type="primary">\u4E3B\u8981\u6309\u94AE</nut-button>
<nut-button type="info">\u4FE1\u606F\u6309\u94AE</nut-button>
<nut-button type="default">\u9ED8\u8BA4\u6309\u94AE</nut-button>
<nut-button type="danger">\u5371\u9669\u6309\u94AE</nut-button>
<nut-button type="warning">\u8B66\u544A\u6309\u94AE</nut-button>
<nut-button type="success">\u6210\u529F\u6309\u94AE</nut-button>

\u6734\u7D20\u6309\u94AE

\u901A\u8FC7 plain \u5C5E\u6027\u5C06\u6309\u94AE\u8BBE\u7F6E\u4E3A\u6734\u7D20\u6309\u94AE\uFF0C\u6734\u7D20\u6309\u94AE\u7684\u6587\u5B57\u4E3A\u6309\u94AE\u989C\u8272\uFF0C\u80CC\u666F\u4E3A\u767D\u8272\u3002

<nut-button plain type="primary">\u6734\u7D20\u6309\u94AE</nut-button>
<nut-button plain type="info">\u6734\u7D20\u6309\u94AE</nut-button>

\u7981\u7528\u72B6\u6001

\u901A\u8FC7 disabled \u5C5E\u6027\u6765\u7981\u7528\u6309\u94AE\uFF0C\u7981\u7528\u72B6\u6001\u4E0B\u6309\u94AE\u4E0D\u53EF\u70B9\u51FB\u3002

<nut-button disabled type="primary">\u7981\u7528\u72B6\u6001</nut-button>
<nut-button plain disabled type="info">\u7981\u7528\u72B6\u6001</nut-button>
<nut-button plain disabled type="primary">\u7981\u7528\u72B6\u6001</nut-button>

\u6309\u94AE\u5F62\u72B6

\u901A\u8FC7 shape \u5C5E\u6027\u8BBE\u7F6E\u6309\u94AE\u5F62\u72B6\uFF0C\u652F\u6301\u5706\u5F62\u3001\u65B9\u5F62\u6309\u94AE\uFF0C\u9ED8\u8BA4\u4E3A\u5706\u5F62\u3002

<nut-button shape="square" type="primary">\u65B9\u5F62\u6309\u94AE</nut-button>
<nut-button type="info">\u5706\u5F62\u6309\u94AE</nut-button>

\u52A0\u8F7D\u72B6\u6001

<nut-button loading type="info"></nut-button>
<nut-button loading type="warning">\u52A0\u8F7D\u4E2D...</nut-button>
<nut-button :loading="isLoading" type="success" @click="changeLoading">Click me!</nut-button>

  // ...
  let isLoading = ref(false);
  const changeLoading = () => {
    isLoading.value = true;
    setTimeout(() => {
      isLoading.value = false;
    }, 3000);
  };

  return {
    isLoading,
    changeLoading
  };
  // ...

\u56FE\u6807\u6309\u94AE

  <nut-button shape="square" plain type="primary" icon="star-fill"></nut-button>
  <nut-button shape="square" type="primary" icon="star">\u6536\u85CF</nut-button>

\u6309\u94AE\u5C3A\u5BF8

\u652F\u6301 large\u3001normal\u3001small\u3001mini \u56DB\u79CD\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u4E3A normal\u3002

<nut-button size="large" type="primary">\u5927\u53F7\u6309\u94AE</nut-button>
<nut-button type="primary">\u666E\u901A\u6309\u94AE</nut-button>
<nut-button size="small" type="primary">\u5C0F\u578B\u6309\u94AE</nut-button>
<nut-button size="mini" type="primary">\u5C0F\u578B\u6309\u94AE</nut-button>

\u5757\u7EA7\u5143\u7D20

\u6309\u94AE\u5728\u9ED8\u8BA4\u60C5\u51B5\u4E0B\u4E3A\u884C\u5185\u5757\u7EA7\u5143\u7D20\uFF0C\u901A\u8FC7 block \u5C5E\u6027\u53EF\u4EE5\u5C06\u6309\u94AE\u7684\u5143\u7D20\u7C7B\u578B\u8BBE\u7F6E\u4E3A\u5757\u7EA7\u5143\u7D20\uFF0C\u5E38\u7528\u6765\u5B9E\u73B0\u901A\u680F\u6309\u94AE\u3002

<nut-button block type="primary">\u5757\u7EA7\u5143\u7D20</nut-button>

\u81EA\u5B9A\u4E49\u989C\u8272

\u901A\u8FC7 color \u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u989C\u8272\u3002

<nut-button color="#7232dd">\u5355\u8272\u6309\u94AE</nut-button>
<nut-button color="#7232dd" plain>\u5355\u8272\u6309\u94AE</nut-button>
<nut-button color="linear-gradient(to right, #ff6034, #ee0a24)">
  \u6E10\u53D8\u8272\u6309\u94AE
</nut-button>

API

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
type	\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A `primary` `info` `warning` `danger` `success`	String	`default`
size	\u5C3A\u5BF8\uFF0C\u53EF\u9009\u503C\u4E3A `large` `small` `mini`	String	`normal`
shape	\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A `square`	String	`round`
color	\u6309\u94AE\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165 linear-gradient \u6E10\u53D8\u8272	String	-
plain	\u662F\u5426\u4E3A\u6734\u7D20\u6309\u94AE	Boolean	`false`
disabled	\u662F\u5426\u7981\u7528\u6309\u94AE	Boolean	`false`
block	\u662F\u5426\u4E3A\u5757\u7EA7\u5143\u7D20	Boolean	`false`
icon	\u6309\u94AE\u56FE\u6807\uFF0C\u540CIcon\u7EC4\u4EF6name\u5C5E\u6027	String	-
loading	\u6309\u94AEloading\u72B6\u6001	Boolean	`false`

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
click	\u70B9\u51FB\u6309\u94AE\u65F6\u89E6\u53D1	event: MouseEvent

`,37),c=[p],d={setup(o,{expose:s}){return s({frontmatter:{}}),(h,r)=>(n(),a("div",l,c))}};export{d as default};