更新记录

1.0.0（2024-07-03）

1.发布 — dlz-button 组件。

平台兼容性

Vue2	Vue3
√	×

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.7.2 app-vue	×	√	√	√	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序
√	√	√	√

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

dlz-button

直接使用 (巨简单)

<dlz-button @click="confirm" z-index="999">
    <view>提交</view>
</dlz-button>

methods: {
    confirm(end){
        setTimeout(()=>{
            end()
        },2000)
    }
}

或者使用 `this.$refs.xxx.end()`

<dlz-button ref="dlzButton" @click="methodsTest" shadow margin="20rpx 0 0 0" z-index="999">
    <view>下一步</view>
</dlz-button>

methods: {
    methodsTest(){
        setTimeout(()=>{
            this.$refs.dlzButton.end()
        },1000)
    }
}

参数（Button Props）

属性名	说明	类型	默认值	其他
background	按钮背景颜色(也是阴影的颜色)	String	`linear-gradient(45deg, #ed1c24, #fece12)`	---
color	文字颜色	String	#FFFFFF	---
fontSize	文字大小	String	48rpx	---
margin	按钮外边距	String		---
width	按钮宽度	String	400rpx	---
height	按钮高度	String	90rpx	---
borderRadius	按钮圆角	String	20rpx	---
shadow	是否显示阴影	Boolean	false	---
zIndex	按钮层级	Number	99	---
loadingBtn	是否为Loading按钮	Boolean	true	---
maskBg	遮罩层背景颜色	String	rgba(0, 0, 0, .2)	---
lineColor	loading 线条底色	String	rgba(255, 255, 255, 0.2)	---
blockColor	loading 颜色	String	#FFFFFF	---
loadingSize	loading 大小	String	46rpx	---
blockWidth	loading 线条粗细	String	4rpx	---
disabled	禁用按钮	Boolean	false	---
openType	开放能力	String		参考
appParameter	打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效	String		参考
hoverStopPropagation	指定是否阻止本节点的祖先节点出现点击态	Boolean	false	参考

事件（Button Events）开放能力参考

事件名	说明	类型	生效时机	平台差异说明
@click	点击事件	Handler	---	---
@tap	点击事件	Handler	---	---
@opensetting	在打开授权设置页并关闭后回调	Handler	open-type="openSetting"	微信、QQ、百度、快手、京东小程序
@chooseavatar	获取用户头像回调	Handler	open-type="chooseAvatar"	微信小程序
@chooseaddress	调起用户编辑并选择收货地址的回调	Handler	open-type="chooseAddress"	百度小程序
@getphonenumber	获取用户手机号回调	Handler	open-type="getPhoneNumber"	微信、支付宝、百度、抖音、快手、京东小程序
@getuserinfo	用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo	Handler	open-type="getUserInfo"	微信、支付宝、百度、抖音、快手、京东小程序
@error	当使用开放能力时，发生错误的回调	Handler	---	微信、QQ、快手、京东小程序

方法（Button Methods）

名称	说明
end	结束 Loading 状态

插槽（Button Slots）

名称	说明
default	默认插槽，按钮文本,也可以直接写文本

vue2 带 Loading 的按钮组件 dlz-button 多端支持 dlz-button 按钮 loading 交互 遮罩

更新记录

1.0.0（2024-07-03）

平台兼容性

dlz-button

直接使用 (巨简单)

或者使用 `this.$refs.xxx.end()`

参数（Button Props）

事件（Button Events）开放能力参考

方法（Button Methods）

插槽（Button Slots）

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

vue2 带 Loading 的按钮组件 dlz-button 多端支持

vue2 带 Loading 的按钮组件 dlz-button 多端支持 dlz-button 按钮 loading 交互 遮罩

更新记录

1.0.0（2024-07-03）

平台兼容性

dlz-button

直接使用 (巨简单)

或者使用 this.$refs.xxx.end()

参数 （Button Props）

事件 （Button Events） 开放能力 参考

方法 （Button Methods）

插槽 （Button Slots）

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

vue2 带 Loading 的按钮组件 dlz-button 多端支持

Modal title

vue2 带 Loading 的按钮组件 dlz-button 多端支持 dlz-button 按钮 loading 交互遮罩

或者使用 `this.$refs.xxx.end()`

参数（Button Props）

事件（Button Events）开放能力参考

方法（Button Methods）

插槽（Button Slots）