Buttton | wu-ui是全面兼容多端，基于vue2、vue3和nvue开发的uniapp生态框架。无论平台，一致体验。

Button

The internal implementation of this component is based on the uni-app button component and undergoes secondary encapsulation, with the main difference being:

Button type value has more theme colors
The button size value has more sizes to choose from
Button icon value has more icons to choose from

Platform compatibility

App (vue)	App (nvue)	H5	Applet	VUE2	VUE3
√	√	√	√	√	√

WARNING

This component is based on the uni app 'button' component internally. In addition to the added functions mentioned at the beginning, the exposed props properties are completely consistent with the official component properties. The uni app 'button' component is relatively special because it has some specific capabilities of other mini program platforms. Please refer to the parameter list at the end of the document, and for more detailed explanations, please refer to the uni app documentation: [uni app button component]（ https://uniapp.dcloud.net.cn/component/button ）
Due to the limitations of the WeChat mini program, the 'wu-button' of the 'form type' cannot trigger the 'submit' event of the 'form' component in the WeChat mini program (H5 and APP are normal). Please refer to the 'Bug&Tip' section of the WeChat mini program documentation for details（ https://developers.weixin.qq.com/miniprogram/dev/component/button.html ）

Basic usage

Text content is passed in through text

vue

<wu-button text="千金散尽还复来"></wu-button>

<wu-button text="千金散尽还复来"></wu-button>

Multiple forms of setting buttons

The optional values for type include default, rimary, success, information , warning , and error
Set whether to hollow out through the plain value
Set whether to thin edges through the hairline value
Set whether to disable through the disabled value
Set whether to enable the loading icon through the loading value, and set the loading text to loadingText
Set whether to display icons through the icon value
Set the button shape using the shape value, with circle as the rounded corner
Set the gradient color of the button through the color value
Set the size of the button through the size value

vue

<template>
    <view style="padding: 20px;">
        <wu-button type="primary" text="OK"></wu-button>
        <wu-button type="primary": plain="true" text="hollow out"></wu-button>
        <wu-button type="primary": plain="true": hairline="true" text="thin edge"></wu-button>
        <wu-button type="primary": disabled="disabled" text="disabled"></wu-button>
        <wu-button type="primary" loading loadingText="loading"></wu-button>
        <wu-button type="primary" icon="map" text="icon button"></wu-button>
        <wu-button type="primary" shape="circle" text="button shape"></wu-button>
        <wu-button text="Gradient button" color="linear gradient (to right, rgb (66, 83, 216), rgb (213, 51, 186))"></wu-button>
        <wu-button type="primary" size="small" text="size and size"></wu-button>
    </view>
</template>
<script>
    export default{
        data(){
            return{
                disabled: true
            };
        }
    };
</script>

<template>
    <view style="padding: 20px;">
        <wu-button type="primary" text="OK"></wu-button>
        <wu-button type="primary": plain="true" text="hollow out"></wu-button>
        <wu-button type="primary": plain="true": hairline="true" text="thin edge"></wu-button>
        <wu-button type="primary": disabled="disabled" text="disabled"></wu-button>
        <wu-button type="primary" loading loadingText="loading"></wu-button>
        <wu-button type="primary" icon="map" text="icon button"></wu-button>
        <wu-button type="primary" shape="circle" text="button shape"></wu-button>
        <wu-button text="Gradient button" color="linear gradient (to right, rgb (66, 83, 216), rgb (213, 51, 186))"></wu-button>
        <wu-button type="primary" size="small" text="size and size"></wu-button>
    </view>
</template>
<script>
    export default{
        data(){
            return{
                disabled: true
            };
        }
    };
</script>

Define the external styles that need to be used

For non WeChat mini program platforms, the root element of the component is the uni app 'button' component, so modifying the style of the button is easy. Simply define the class name or embed the inline style for the component.
If it is a WeChat mini program, there will be elements with the same name on the compiled page, resulting in style transfer issues.
If it is to modify the distance or width between the button and other elements, a 'view' element can be placed outside the button to control the distance or width between this' view 'and other elements, achieving the same effect. So: we have provided a 'custom style' parameter, and it is recommended that users can pass styles in object form to the internal components, paying attention to the naming of humps.

vue

<template>
    <view>
        <wu-button: custom style="customStyle" color="# fff" text="Snow Moon Night"></wu-button>
    </view>
</template>
<script>
export default{
    data(){
        Return {}
    },
    computed:{
        customStyle(){
            return{
                Height: '80rpx',
                Background: '# 3c9cff',
                Color: '# fff',
                BorderRadius: '40rpx',//rounded corners
                //The nvue must be written in the following way
                'border top right radius':' 40rpx ',
                'border bottom left radius':' 40rpx ',
                'border bottom right radius':' 40rpx '
            }
        }
    }
}
</script>

<template>
    <view>
        <wu-button: custom style="customStyle" color="# fff" text="Snow Moon Night"></wu-button>
    </view>
</template>
<script>
export default{
    data(){
        Return {}
    },
    computed:{
        customStyle(){
            return{
                Height: '80rpx',
                Background: '# 3c9cff',
                Color: '# fff',
                BorderRadius: '40rpx',//rounded corners
                //The nvue must be written in the following way
                'border top right radius':' 40rpx ',
                'border bottom left radius':' 40rpx ',
                'border bottom right radius':' 40rpx '
            }
        }
    }
}
</script>

Interconnection of open capabilities of various mini programs

wu-ui has been docked to the uni-app file about the uni-app-ButtonComponent All open capabilities (as of August 3, 2023) uni-app can be used according to the document instructions. If any omissions are found, please add a group for feedback.

API

Button Props

Property Name	Description	Type	Default Value	Optional Value
hairline	Whether to display the thin border of the button	Boolean	true	true/false
type	Button style type	String	info	info/primary/error/warning/success
size	Button size	String	normal	normal/large/mini
shape	Button appearance shape, see instructions above	String	square	square/circle
plain	Whether the button is hollow out and the background color is transparent	Boolean	false	true/false
disabled	Whether to disable	Boolean	false	true/false
loading	Is there a loading icon before the button name	Boolean	false	true/false
loadingText	Loading prompt text	String	-	-
loadingMode	Load Status Icon Type	String	Spinner	-
loadingSize	Load icon size	String / Number	15	-
openType	Open capability, please refer to the description of button components in the section on UniApp stability uni-app:button-components for details	String	-
formType	Used for <form>components. Clicking on it will trigger the <form>component's submit/reset event	String	-	-
appParameter	The parameter passed to the app when opening it, valid when open type=launchApp (note: only valid for WeChat and QQ mini programs)	String	-	-
hoverStopPromotion	Specify whether to prevent the click on state of the ancestor node of this node. WeChat mini program is valid (default true)	Boolean	true	true/false
lang	Specify the language for returning user information, zh_ CN Simplified Chinese, zh_ TW Traditional Chinese, en English	String	en	-
sessionFrom	Session source, valid when openType="contact"	String	-	-
sendMessageTitle	The title of the message card within the conversation, valid when openType="contact"	String	-	-
sendMessagePath	Click on the message card in the conversation to jump to the mini program path, which is valid when openType="contact"	String	-	-
sendMessageImg	Image of the message card in the conversation, valid when openType="contact"	String	-	-
showMessageCard	Whether to display message cards within the session. Set this parameter to true. When the user enters the customer service session, a prompt of "Possible mini programs to be sent" will be displayed in the lower right corner. After clicking, the user can quickly send mini program messages, which is valid when openType="contact"	String	-	-
dataName	Extra parameter, used for the data-xxx attribute of the mini program, obtained through target. dataset. name	String	-	-
throttleTime	Throttling, which can only be triggered once within a certain period of time, in milliseconds (ms)	String/Number	0	-
hoverStartTime	How long does the click state appear after holding it down, in milliseconds	String/Number	0	-
hoverStayTime	Click state retention time after finger release, in milliseconds	String/Number	200	-
text	The reason why button text is passed in through props is because if slot is passed in (note: the style of text cannot be controlled in nvue)	String/Number	-	-
icon	Button Icon	String	-	-
iconColor	Button Color	String	In the plain=true hollowed out state, the color remains consistent with the border, otherwise it is white (black # 000000 when the theme is info)	-
color	Button color, supports passing in linear gradient colors	String	-	-
customTextStyle	Customize the style of button text to avoid situations where customStyle settings cannot override the style	Object/String	-	-
customStyle	Define the external style required, please refer to the above document for details	Object/String	-	-

Button Events

Explanation: Currently tested (Hbuilder X 2.6.8), in H5 and APP, it is possible to directly listen to tap events on components, which is equivalent to the click event effect emitted internally. On some HX versions, WeChat mini programs may not be effective in using tap events on components. Therefore, it is recommended to use the click event emitted internally for button component click event listening.

Attribute Name	Description	Type	Default Value	Platform Differences Description
click	button click, do not use @ tap to click on the event. The WeChat mini program is invalid, and the return value is the click event and parameters	handler	-	-
getphonenumber	Get user's phone number callback, open type="getPhoneNumber" takes effect	handler	-	WeChat, Alipay, Baidu, Tiktok, Kwai, JD applet
getuserinfo	When the user clicks this button, the obtained user information will be returned. The value obtained from the detail of the returned parameter is the same as uni.getUserInfo, open type="getUserInfo" effective	handler	-	WeChat, QQ, Baidu, Kwai, JD applet
error	When using the open capability, an error callback occurs, open type="launchApp" takes effect	handler	-	WeChat, QQ, Kwai, JD applet
opensetting	Successful callback of applet opening app, open type="launchApp" takes effect	handler	-	WeChat, QQ, Baidu, Kwai, JD applet
launchapp	Successful callback when opening APP, open type="launchApp" takes effect	handler	-	WeChat, QQ, Kwai, JD applet
contact	Customer service message callback, open type="contact" takes effect	handler	-	WeChat, QQ, Baidu, Kwai applet
chooseavatar	Retrieve user profile callback, open type="chooseAvatar" takes effect	handler	-	WeChat mini program
addgroupapp	Add callback for group app, open type="addGroupApp" takes effect	handler	-	QQ mini program
chooseaddress	Call up a callback for users to edit and select a shipping address, open type="chooseAddress" takes effect	handler	-	Baidu mini program
chooseinvoicetitle	Callback for user to select invoice header, open type="chooseInvoiceTitle" takes effect	handler	-	Baidu mini program
subscribe	Subscription message authorization callback, open type="subscribe" takes effect	handler	-	Baidu mini program
login	login callback, open type="login" takes effect	handler	-	Baidu mini program
im	Listen for successful callback of jump IM, open type="im" takes effect	handler	-	Tiktok applet 2.68.0+

For details on open-type, please refer to the official button-open-type-Validvalues provided by uniapp

Button ​

Platform compatibility ​

Basic usage ​

Multiple forms of setting buttons ​

Define the external styles that need to be used ​

Interconnection of open capabilities of various mini programs ​

API ​

Button Props ​

Button Events ​