You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
596 lines
16 KiB
596 lines
16 KiB
<template> |
|
<button |
|
id="u-wave-btn" |
|
class="u-btn u-line-1 u-fix-ios-appearance" |
|
:class="[ |
|
'u-size-' + size, |
|
plain ? 'u-btn--' + type + '--plain' : '', |
|
loading ? 'u-loading' : '', |
|
shape == 'circle' ? 'u-round-circle' : '', |
|
hairLine ? showHairLineBorder : 'u-btn--bold-border', |
|
'u-btn--' + type, |
|
disabled ? `u-btn--${type}--disabled` : '', |
|
]" |
|
:hover-start-time="Number(hoverStartTime)" |
|
:hover-stay-time="Number(hoverStayTime)" |
|
:disabled="disabled" |
|
:form-type="formType" |
|
:open-type="openType" |
|
:app-parameter="appParameter" |
|
:hover-stop-propagation="hoverStopPropagation" |
|
:send-message-title="sendMessageTitle" |
|
send-message-path="sendMessagePath" |
|
:lang="lang" |
|
:data-name="dataName" |
|
:session-from="sessionFrom" |
|
:send-message-img="sendMessageImg" |
|
:show-message-card="showMessageCard" |
|
@getphonenumber="getphonenumber" |
|
@getuserinfo="getuserinfo" |
|
@error="error" |
|
@opensetting="opensetting" |
|
@launchapp="launchapp" |
|
:style="[customStyle, { |
|
overflow: ripple ? 'hidden' : 'visible' |
|
}]" |
|
@tap.stop="click($event)" |
|
:hover-class="getHoverClass" |
|
:loading="loading" |
|
> |
|
<slot></slot> |
|
<view |
|
v-if="ripple" |
|
class="u-wave-ripple" |
|
:class="[waveActive ? 'u-wave-active' : '']" |
|
:style="{ |
|
top: rippleTop + 'px', |
|
left: rippleLeft + 'px', |
|
width: fields.targetWidth + 'px', |
|
height: fields.targetWidth + 'px', |
|
'background-color': rippleBgColor || 'rgba(0, 0, 0, 0.15)' |
|
}" |
|
></view> |
|
</button> |
|
</template> |
|
|
|
<script> |
|
/** |
|
* button 按钮 |
|
* @description Button 按钮 |
|
* @tutorial https://www.uviewui.com/components/button.html |
|
* @property {String} size 按钮的大小 |
|
* @property {Boolean} ripple 是否开启点击水波纹效果 |
|
* @property {String} ripple-bg-color 水波纹的背景色，ripple为true时有效 |
|
* @property {String} type 按钮的样式类型 |
|
* @property {Boolean} plain 按钮是否镂空，背景色透明 |
|
* @property {Boolean} disabled 是否禁用 |
|
* @property {Boolean} hair-line 是否显示按钮的细边框(默认true) |
|
* @property {Boolean} shape 按钮外观形状，见文档说明 |
|
* @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) |
|
* @property {String} form-type 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 |
|
* @property {String} open-type 开放能力 |
|
* @property {String} data-name 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 |
|
* @property {String} hover-class 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果(App-nvue 平台暂不支持) |
|
* @property {Number} hover-start-time 按住后多久出现点击态，单位毫秒 |
|
* @property {Number} hover-stay-time 手指松开后点击态保留时间，单位毫秒 |
|
* @property {Object} custom-style 对按钮的自定义样式，对象形式，见文档说明 |
|
* @event {Function} click 按钮点击 |
|
* @event {Function} getphonenumber open-type="getPhoneNumber"时有效 |
|
* @event {Function} getuserinfo 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo |
|
* @event {Function} error 当使用开放能力时，发生错误的回调 |
|
* @event {Function} opensetting 在打开授权设置页并关闭后回调 |
|
* @event {Function} launchapp 打开 APP 成功的回调 |
|
* @example <u-button>月落</u-button> |
|
*/ |
|
export default { |
|
name: 'u-button', |
|
props: { |
|
// 是否细边框 |
|
hairLine: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
// 按钮的预置样式，default，primary，error，warning，success |
|
type: { |
|
type: String, |
|
default: 'default' |
|
}, |
|
// 按钮尺寸，default，medium，mini |
|
size: { |
|
type: String, |
|
default: 'default' |
|
}, |
|
// 按钮形状，circle（两边为半圆），square（带圆角） |
|
shape: { |
|
type: String, |
|
default: 'square' |
|
}, |
|
// 按钮是否镂空 |
|
plain: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
// 是否禁止状态 |
|
disabled: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
// 是否加载中 |
|
loading: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
// 开放能力，具体请看uniapp稳定关于button组件部分说明 |
|
// https://uniapp.dcloud.io/component/button |
|
openType: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 |
|
// 取值为submit（提交表单），reset（重置表单） |
|
formType: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 |
|
// 只微信小程序、QQ小程序有效 |
|
appParameter: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效 |
|
hoverStopPropagation: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
// 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效 |
|
lang: { |
|
type: String, |
|
default: 'en' |
|
}, |
|
// 会话来源，open-type="contact"时有效。只微信小程序有效 |
|
sessionFrom: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 会话内消息卡片标题，open-type="contact"时有效 |
|
// 默认当前标题，只微信小程序有效 |
|
sendMessageTitle: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 |
|
// 默认当前分享路径，只微信小程序有效 |
|
sendMessagePath: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 会话内消息卡片图片，open-type="contact"时有效 |
|
// 默认当前页面截图，只微信小程序有效 |
|
sendMessageImg: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示， |
|
// 用户点击后可以快速发送小程序消息，open-type="contact"时有效 |
|
showMessageCard: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
// 手指按（触摸）按钮时按钮时的背景颜色 |
|
hoverBgColor: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 水波纹的背景颜色 |
|
rippleBgColor: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 是否开启水波纹效果 |
|
ripple: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
// 按下的类名 |
|
hoverClass: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 自定义样式，对象形式 |
|
customStyle: { |
|
type: Object, |
|
default() { |
|
return {}; |
|
} |
|
}, |
|
// 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 |
|
dataName: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 节流，一定时间内只能触发一次 |
|
throttleTime: { |
|
type: [String, Number], |
|
default: 1000 |
|
}, |
|
// 按住后多久出现点击态，单位毫秒 |
|
hoverStartTime: { |
|
type: [String, Number], |
|
default: 20 |
|
}, |
|
// 手指松开后点击态保留时间，单位毫秒 |
|
hoverStayTime: { |
|
type: [String, Number], |
|
default: 150 |
|
}, |
|
}, |
|
computed: { |
|
// 当没有传bgColor变量时，按钮按下去的颜色类名 |
|
getHoverClass() { |
|
// 如果开启水波纹效果，则不启用hover-class效果 |
|
if (this.loading || this.disabled || this.ripple || this.hoverClass) return ''; |
|
let hoverClass = ''; |
|
hoverClass = this.plain ? 'u-' + this.type + '-plain-hover' : 'u-' + this.type + '-hover'; |
|
return hoverClass; |
|
}, |
|
// 在'primary', 'success', 'error', 'warning'类型下，不显示边框，否则会造成四角有毛刺现象 |
|
showHairLineBorder() { |
|
if (['primary', 'success', 'error', 'warning'].indexOf(this.type) >= 0 && !this.plain) { |
|
return ''; |
|
} else { |
|
return 'u-hairline-border'; |
|
} |
|
} |
|
}, |
|
data() { |
|
return { |
|
rippleTop: 0, // 水波纹的起点Y坐标到按钮上边界的距离 |
|
rippleLeft: 0, // 水波纹起点X坐标到按钮左边界的距离 |
|
fields: {}, // 波纹按钮节点信息 |
|
waveActive: false // 激活水波纹 |
|
}; |
|
}, |
|
methods: { |
|
// 按钮点击 |
|
click(e) { |
|
// 进行节流控制，每this.throttle毫秒内，只在开始处执行 |
|
this.$u.throttle(() => { |
|
// 如果按钮时disabled和loading状态，不触发水波纹效果 |
|
if (this.loading === true || this.disabled === true) return; |
|
// 是否开启水波纹效果 |
|
if (this.ripple) { |
|
// 每次点击时，移除上一次的类，再次添加，才能触发动画效果 |
|
this.waveActive = false; |
|
this.$nextTick(function() { |
|
this.getWaveQuery(e); |
|
}); |
|
} |
|
this.$emit('click', e); |
|
}, this.throttleTime); |
|
}, |
|
// 查询按钮的节点信息 |
|
getWaveQuery(e) { |
|
this.getElQuery().then(res => { |
|
// 查询返回的是一个数组节点 |
|
let data = res[0]; |
|
// 查询不到节点信息，不操作 |
|
if (!data.width || !data.width) return; |
|
// 水波纹的最终形态是一个正方形(通过border-radius让其变为一个圆形)，这里要保证正方形的边长等于按钮的最长边 |
|
// 最终的方形（变换后的圆形）才能覆盖整个按钮 |
|
data.targetWidth = data.height > data.width ? data.height : data.width; |
|
if (!data.targetWidth) return; |
|
this.fields = data; |
|
let touchesX = '', |
|
touchesY = ''; |
|
// #ifdef MP-BAIDU |
|
touchesX = e.changedTouches[0].clientX; |
|
touchesY = e.changedTouches[0].clientY; |
|
// #endif |
|
// #ifdef MP-ALIPAY |
|
touchesX = e.detail.clientX; |
|
touchesY = e.detail.clientY; |
|
// #endif |
|
// #ifndef MP-BAIDU || MP-ALIPAY |
|
touchesX = e.touches[0].clientX; |
|
touchesY = e.touches[0].clientY; |
|
// #endif |
|
// 获取触摸点相对于按钮上边和左边的x和y坐标，原理是通过屏幕的触摸点（touchesY），减去按钮的上边界data.top |
|
// 但是由于`transform-origin`默认是center，所以这里再减去半径才是水波纹view应该的位置 |
|
// 总的来说，就是把水波纹的矩形（变换后的圆形）的中心点，移动到我们的触摸点位置 |
|
this.rippleTop = touchesY - data.top - data.targetWidth / 2; |
|
this.rippleLeft = touchesX - data.left - data.targetWidth / 2; |
|
this.$nextTick(() => { |
|
this.waveActive = true; |
|
}); |
|
}); |
|
}, |
|
// 获取节点信息 |
|
getElQuery() { |
|
return new Promise(resolve => { |
|
let queryInfo = ''; |
|
// 获取元素节点信息，请查看uniapp相关文档 |
|
// https://uniapp.dcloud.io/api/ui/nodes-info?id=nodesrefboundingclientrect |
|
queryInfo = uni.createSelectorQuery().in(this); |
|
//#ifdef MP-ALIPAY |
|
queryInfo = uni.createSelectorQuery(); |
|
//#endif |
|
queryInfo.select('.u-btn').boundingClientRect(); |
|
queryInfo.exec(data => { |
|
resolve(data); |
|
}); |
|
}); |
|
}, |
|
// 下面为对接uniapp官方按钮开放能力事件回调的对接 |
|
getphonenumber(res) { |
|
this.$emit('getphonenumber', res); |
|
}, |
|
getuserinfo(res) { |
|
this.$emit('getuserinfo', res); |
|
}, |
|
error(res) { |
|
this.$emit('error', res); |
|
}, |
|
opensetting(res) { |
|
this.$emit('opensetting', res); |
|
}, |
|
launchapp(res) { |
|
this.$emit('launchapp', res); |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
@import '../../libs/css/style.components.scss'; |
|
.u-btn::after { |
|
border: none; |
|
} |
|
|
|
.u-btn { |
|
position: relative; |
|
border: 0; |
|
//border-radius: 10rpx; |
|
/* #ifndef APP-NVUE */ |
|
display: inline-flex; |
|
/* #endif */ |
|
// 避免边框某些场景可能被“裁剪”，不能设置为hidden |
|
overflow: visible; |
|
line-height: 1; |
|
@include vue-flex; |
|
align-items: center; |
|
justify-content: center; |
|
cursor: pointer; |
|
padding: 0 40rpx; |
|
z-index: 1; |
|
box-sizing: border-box; |
|
transition: all 0.15s; |
|
|
|
&--bold-border { |
|
border: 1px solid #ffffff; |
|
} |
|
|
|
&--default { |
|
color: $u-content-color; |
|
border-color: #c0c4cc; |
|
background-color: #ffffff; |
|
} |
|
|
|
&--primary { |
|
color: #ffffff; |
|
border-color: $u-type-primary; |
|
background-color: $u-type-primary; |
|
} |
|
|
|
&--success { |
|
color: #ffffff; |
|
border-color: $u-type-success; |
|
background-color: $u-type-success; |
|
} |
|
|
|
&--error { |
|
color: #ffffff; |
|
border-color: $u-type-error; |
|
background-color: $u-type-error; |
|
} |
|
|
|
&--warning { |
|
color: #ffffff; |
|
border-color: $u-type-warning; |
|
background-color: $u-type-warning; |
|
} |
|
|
|
&--default--disabled { |
|
color: #ffffff; |
|
border-color: #e4e7ed; |
|
background-color: #ffffff; |
|
} |
|
|
|
&--primary--disabled { |
|
color: #ffffff!important; |
|
border-color: $u-type-primary-disabled!important; |
|
background-color: $u-type-primary-disabled!important; |
|
} |
|
|
|
&--success--disabled { |
|
color: #ffffff!important; |
|
border-color: $u-type-success-disabled!important; |
|
background-color: $u-type-success-disabled!important; |
|
} |
|
|
|
&--error--disabled { |
|
color: #ffffff!important; |
|
border-color: $u-type-error-disabled!important; |
|
background-color: $u-type-error-disabled!important; |
|
} |
|
|
|
&--warning--disabled { |
|
color: #ffffff!important; |
|
border-color: $u-type-warning-disabled!important; |
|
background-color: $u-type-warning-disabled!important; |
|
} |
|
|
|
&--primary--plain { |
|
color: $u-type-primary!important; |
|
border-color: $u-type-primary-disabled!important; |
|
background-color: $u-type-primary-light!important; |
|
} |
|
|
|
&--success--plain { |
|
color: $u-type-success!important; |
|
border-color: $u-type-success-disabled!important; |
|
background-color: $u-type-success-light!important; |
|
} |
|
|
|
&--error--plain { |
|
color: $u-type-error!important; |
|
border-color: $u-type-error-disabled!important; |
|
background-color: $u-type-error-light!important; |
|
} |
|
|
|
&--warning--plain { |
|
color: $u-type-warning!important; |
|
border-color: $u-type-warning-disabled!important; |
|
background-color: $u-type-warning-light!important; |
|
} |
|
} |
|
|
|
.u-hairline-border:after { |
|
content: ' '; |
|
position: absolute; |
|
pointer-events: none; |
|
// 设置为border-box，意味着下面的scale缩小为0.5，实际上缩小的是伪元素的内容（border-box意味着内容不含border） |
|
box-sizing: border-box; |
|
// 中心点作为变形(scale())的原点 |
|
-webkit-transform-origin: 0 0; |
|
transform-origin: 0 0; |
|
left: 0; |
|
top: 0; |
|
width: 199.8%; |
|
height: 199.7%; |
|
-webkit-transform: scale(0.5, 0.5); |
|
transform: scale(0.5, 0.5); |
|
border: 1px solid currentColor; |
|
z-index: 1; |
|
} |
|
|
|
.u-wave-ripple { |
|
z-index: 0; |
|
position: absolute; |
|
border-radius: 100%; |
|
background-clip: padding-box; |
|
pointer-events: none; |
|
user-select: none; |
|
transform: scale(0); |
|
opacity: 1; |
|
transform-origin: center; |
|
} |
|
|
|
.u-wave-ripple.u-wave-active { |
|
opacity: 0; |
|
transform: scale(2); |
|
transition: opacity 1s linear, transform 0.4s linear; |
|
} |
|
|
|
.u-round-circle { |
|
border-radius: 100rpx; |
|
} |
|
|
|
.u-round-circle::after { |
|
border-radius: 100rpx; |
|
} |
|
|
|
.u-loading::after { |
|
background-color: hsla(0, 0%, 100%, 0.35); |
|
} |
|
|
|
.u-size-default { |
|
font-size: 30rpx; |
|
height: 80rpx; |
|
line-height: 80rpx; |
|
} |
|
|
|
.u-size-medium { |
|
/* #ifndef APP-NVUE */ |
|
display: inline-flex; |
|
/* #endif */ |
|
width: auto; |
|
font-size: 26rpx; |
|
height: 70rpx; |
|
line-height: 70rpx; |
|
padding: 0 80rpx; |
|
} |
|
|
|
.u-size-mini { |
|
/* #ifndef APP-NVUE */ |
|
display: inline-flex; |
|
/* #endif */ |
|
width: auto; |
|
font-size: 22rpx; |
|
padding-top: 1px; |
|
height: 50rpx; |
|
line-height: 50rpx; |
|
padding: 0 20rpx; |
|
} |
|
|
|
.u-primary-plain-hover { |
|
color: #ffffff !important; |
|
background: $u-type-primary-dark !important; |
|
} |
|
|
|
.u-default-plain-hover { |
|
color: $u-type-primary-dark !important; |
|
background: $u-type-primary-light !important; |
|
} |
|
|
|
.u-success-plain-hover { |
|
color: #ffffff !important; |
|
background: $u-type-success-dark !important; |
|
} |
|
|
|
.u-warning-plain-hover { |
|
color: #ffffff !important; |
|
background: $u-type-warning-dark !important; |
|
} |
|
|
|
.u-error-plain-hover { |
|
color: #ffffff !important; |
|
background: $u-type-error-dark !important; |
|
} |
|
|
|
.u-info-plain-hover { |
|
color: #ffffff !important; |
|
background: $u-type-info-dark !important; |
|
} |
|
|
|
.u-default-hover { |
|
color: $u-type-primary-dark !important; |
|
border-color: $u-type-primary-dark !important; |
|
background-color: $u-type-primary-light !important; |
|
} |
|
|
|
.u-primary-hover { |
|
background: $u-type-primary-dark !important; |
|
color: #fff; |
|
} |
|
|
|
.u-success-hover { |
|
background: $u-type-success-dark !important; |
|
color: #fff; |
|
} |
|
|
|
.u-info-hover { |
|
background: $u-type-info-dark !important; |
|
color: #fff; |
|
} |
|
|
|
.u-warning-hover { |
|
background: $u-type-warning-dark !important; |
|
color: #fff; |
|
} |
|
|
|
.u-error-hover { |
|
background: $u-type-error-dark !important; |
|
color: #fff; |
|
} |
|
</style>
|
|
|