wk-view

Appearance

On this page

wkv-button ​

按钮。

用法 ​

html
<wkv-button></wkv-button>

Props ​

属性名类型默认值说明
sizeStringlarge按钮大小，可选 large small mini
typeStringprimary按钮类型，可选 primary secondary link
plainBooleanfalse是否文字按钮
disabledBooleanfalse是否禁用状态
loadingBooleanfalse是否加载状态

Events ​

事件名事件说明函数签名参数说明
click点击事件() => void-

示例 ​

vue
<template>
	<view class="wkv-button-example">
		<wk-section>大按钮：</wk-section>
		<wkv-button>主要</wkv-button>
		<wkv-button size="large" type="secondary">次要</wkv-button>
		<wkv-button size="large" disabled>禁用</wkv-button>

		<wk-section>小按钮：</wk-section>
		<wkv-button size="small" type="primary">主要</wkv-button>
		<wkv-button size="small" type="secondary">次要</wkv-button>
		<wkv-button size="small" disabled>禁用</wkv-button>

		<wk-section>超小按钮：</wk-section>
		<wkv-button size="mini" type="primary">主要</wkv-button>
		<wkv-button size="mini" type="secondary">次要</wkv-button>
		<wkv-button size="mini" disabled>禁用</wkv-button>

		<wk-section>文字按钮：</wk-section>
		<wkv-button plain type="primary">主要</wkv-button>
		<wkv-button plain type="secondary">次要</wkv-button>
		<wkv-button plain type="link">链接</wkv-button>

		<wk-section>Loading：</wk-section>
		<wkv-button loading size="small" type="primary">主要</wkv-button>
		<wkv-button loading size="small" type="secondary">次要</wkv-button>
		<wkv-button loading size="small" type="link">链接</wkv-button>
	</view>
</template>
vue
<script setup lang="ts"></script>
scss
<style lang="scss">
.wkv-button-example {
    padding: 20px;

    .wkv-button--large + .wkv-button--large {
        margin-top: 15px;
    }
}
</style>