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.
224 lines
8.1 KiB
224 lines
8.1 KiB
<template>
|
|
<button
|
|
class="s-button"
|
|
:class="c_class"
|
|
:style="c_style"
|
|
:hover-class="show_hover ? hoverClass : 'none'"
|
|
:hover-start-time="hoverStartTime"
|
|
:hover-stay-time="hoverStayTime"
|
|
:hover-stop-propagation="hoverStopPropagation"
|
|
:data-options="options"
|
|
:lang="lang"
|
|
:open-type="enabled ? openType : ''"
|
|
:form-type="formType"
|
|
:session-from="sessionFrom"
|
|
:send-message-title="sendMessageTitle"
|
|
:send-message-path="sendMessagePath"
|
|
:send-message-img="sendMessageImg"
|
|
:show-message-card="showMessageCard"
|
|
:app-parameter="appParameter"
|
|
@click="onBindEvent('click', $event)"
|
|
@getuserinfo="onBindEvent('getuserinfo', $event)"
|
|
@contact="onBindEvent('contact', $event)"
|
|
@getphonenumber="onBindEvent('getphonenumber', $event)"
|
|
@opensetting="onBindEvent('opensetting', $event)"
|
|
@launchapp="onBindEvent('launchapp', $event)"
|
|
@error="onBindEvent('error', $event)"
|
|
>
|
|
<view class="s-button__content">
|
|
<slot v-if="show_loading" name="loading">
|
|
<s-loading :type="loadingType" :size="loadingSize" custom-class="s-button__loading" />
|
|
</slot>
|
|
<slot v-else-if="icon" name="icon">
|
|
<s-icon
|
|
:name="icon"
|
|
:size="iconSize"
|
|
:color="iconColor"
|
|
:class-prefix="iconPrefix"
|
|
custom-class="s-button__icon"
|
|
:custom-style="iconStyle"
|
|
/>
|
|
</slot>
|
|
<view v-if="shape !== 'circle'" class="s-button__text">
|
|
<template v-if="show_loading && loadingText">{{ loadingText }}</template>
|
|
<slot v-else>{{ text }}</slot>
|
|
</view>
|
|
<slot v-else-if="!show_loading" />
|
|
</view>
|
|
</button>
|
|
</template>
|
|
|
|
<script>
|
|
import componentMixin from '../../mixins/componentMixin';
|
|
|
|
/**
|
|
* s-button 按钮
|
|
* @property {Boolean} custom 是否完全自定义样式，type，size，hover-class样式都清除，默认false
|
|
* @property {String} type = [default|primary|info|warning|success|danger] 类型
|
|
* @property {String} size = [normal|large|small|mini] 尺寸
|
|
* @property {String} text 按钮文字
|
|
* @property {Boolean} plain 是否为朴素按钮
|
|
* @property {Boolean} block 是否为块级元素
|
|
* @property {String} shape = [square|round|circle] 按钮形状
|
|
* @property {Boolean} hairline 是否使用 0.5px 边框
|
|
* @property {Boolean} disabled 是否禁用按钮
|
|
* @property {Boolean} loading 是否显示为加载状态
|
|
* @property {String} loadingText 加载状态提示文字
|
|
* @property {String} loadingType = [circular|spinner] 加载状态图标类型
|
|
* @property {Number|String} loadingSize 加载图标大小
|
|
* @property {String} icon 左侧图标名称或图片链接，可选值见 Icon 组件 name
|
|
* @property {Number|String} iconSize 左侧图标大小
|
|
* @property {String} iconColor 左侧图标颜色
|
|
* @property {String|Object} iconStyle 左侧图标样式
|
|
* @property {String} iconPrefix 图标类名前缀，同 Icon 组件的 class-prefix 属性
|
|
* @property {String} color 按钮颜色，支持传入linear-gradient渐变色
|
|
* @property {String} lang 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。
|
|
* @property {String} openType 开放能力，具体支持可参考 uni-app官方文档
|
|
* @property {String} formType 用于 form 组件，可选值为submit reset，点击分别会触发 form 组件的 submit/reset 事件
|
|
* @property {*} options 用于通过e.target.dataset.options拿到传递的值，比如用来区分那个按钮点击分享
|
|
* @property {String} hoverClass 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
|
|
* @property {Number} hoverStartTime 按住后多久出现点击态，单位毫秒
|
|
* @property {Number} hoverStayTime 手指松开后点击态保留时间，单位毫秒
|
|
* @property {Boolean} hoverStopPropagation 指定是否阻止本节点的祖先节点出现点击态
|
|
* @property {String} sessionFrom 会话来源，open-type="contact"时有效
|
|
* @property {String} sendMessageTitle 会话内消息卡片标题，open-type="contact"时有效
|
|
* @property {String} sendMessagePath 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
|
|
* @property {String} sendMessageImg 会话内消息卡片图片，open-type="contact"时有效
|
|
* @property {String} showMessageCard 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效
|
|
* @property {String} appParameter 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
|
|
* @event {Function} click 点击事件
|
|
* @event {Function} getuserinfo 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
|
|
* @event {Function} getphonenumber 获取用户手机号回调
|
|
* @event {Function} error 当使用开放能力时，发生错误的回调
|
|
* @event {Function} opensetting 在打开授权设置页并关闭后回调
|
|
* @event {Function} launchapp 从小程序打开 App 成功的回调
|
|
* @example <s-button type="primary">按钮</s-button>
|
|
*/
|
|
export default {
|
|
name: 'SButton',
|
|
mixins: [componentMixin],
|
|
props: {
|
|
custom: Boolean,
|
|
type: {
|
|
type: String,
|
|
default: 'default',
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'normal',
|
|
},
|
|
text: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
plain: Boolean,
|
|
block: Boolean,
|
|
shape: String,
|
|
hairline: Boolean,
|
|
width: [Number, String],
|
|
height: [Number, String],
|
|
radius: [Number, String],
|
|
padding: [Number, String],
|
|
color: String,
|
|
disabled: Boolean,
|
|
loading: Boolean,
|
|
showLoading: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
loadingText: String,
|
|
loadingType: {
|
|
type: String,
|
|
default: 'circular',
|
|
},
|
|
loadingSize: [Number, String],
|
|
icon: String,
|
|
iconSize: [Number, String],
|
|
iconColor: String,
|
|
iconStyle: [String, Object],
|
|
iconPrefix: String,
|
|
hoverClass: {
|
|
type: String,
|
|
default: 's-button--hover',
|
|
},
|
|
hoverStartTime: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
hoverStayTime: {
|
|
type: Number,
|
|
default: 100,
|
|
},
|
|
hoverStopPropagation: Boolean,
|
|
options: {},
|
|
lang: String,
|
|
openType: String,
|
|
formType: String,
|
|
appParameter: String,
|
|
sessionFrom: String,
|
|
sendMessageTitle: String,
|
|
sendMessagePath: String,
|
|
sendMessageImg: String,
|
|
showMessageCard: Boolean,
|
|
},
|
|
computed: {
|
|
c_class() {
|
|
return this.$mergeClass({
|
|
[`s-button--${this.type}`]: !this.custom && this.type,
|
|
[`s-button--${this.size}`]: !this.custom && this.size,
|
|
[`s-button--${this.shape}`]: this.shape,
|
|
's-button--plain': this.plain,
|
|
's-button--block': this.block,
|
|
's-button--hairline': this.hairline,
|
|
's-button--loading': this.loading,
|
|
's-button--disabled': this.disabled,
|
|
}, this.custom_class);
|
|
},
|
|
c_style() {
|
|
const { custom, type, plain, color } = this;
|
|
const style = {
|
|
width: this.$addUnit(this.width),
|
|
height: this.$addUnit(this.height),
|
|
padding: this.$addUnit(this.padding),
|
|
borderRadius: this.$addUnit(this.radius),
|
|
};
|
|
if (color) {
|
|
if (custom || type === 'text') {
|
|
style.color = color;
|
|
} else {
|
|
style.borderColor = color;
|
|
if (plain) {
|
|
style.color = color;
|
|
} else {
|
|
style.color = 'white';
|
|
style.background = color;
|
|
if (this.isGradientColor) {
|
|
style.borderWidth = 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return this.$mergeStyle(style, this.custom_style);
|
|
},
|
|
isGradientColor() {
|
|
return String(this.color).indexOf('gradient') > -1;
|
|
},
|
|
enabled() {
|
|
return !(this.disabled || this.loading);
|
|
},
|
|
show_hover() {
|
|
return this.hoverClass && this.enabled;
|
|
},
|
|
show_loading() {
|
|
return this.loading && this.showLoading;
|
|
},
|
|
},
|
|
methods: {
|
|
onBindEvent(name, e) {
|
|
this.enabled && this.$emit(name, e);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" src="./index.scss"></style>
|
|
|