报名工具小程序初始代码
This commit is contained in:
liupopo
379
components/firstui/fui-button/fui-button.vue
Normal file
379
components/firstui/fui-button/fui-button.vue
Normal file
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<view class="fui-button__wrap"
|
||||
:style="{width: width,height: height,marginTop:margin[0] || 0, marginRight:margin[1]||0,marginBottom:margin[2] || margin[0]||0,marginLeft:margin[3] || margin[1]||0,borderRadius: radius}"
|
||||
@touchstart="handleStart" @touchend="handleClick" @touchcancel="handleEnd" @tap="handleTap">
|
||||
<button class="fui-button" :class="[
|
||||
bold ? 'fui-text__bold' : '',
|
||||
time && (plain || type==='link') ? 'fui-button__opacity' : '',
|
||||
disabled && !disabledBackground ? 'fui-button__opacity' : '',
|
||||
!background && !disabledBackground && !plain?('fui-button__'+type):'',
|
||||
!width || width==='100%' || width==='true'?'fui-button__flex-1':'',
|
||||
time && !plain && type!=='link' ? 'fui-button__active' : ''
|
||||
]" :style="{
|
||||
width: width,
|
||||
height: height,
|
||||
lineHeight: height,
|
||||
background: disabled && disabledBackground ? disabledBackground : (plain ? 'transparent' : background),
|
||||
borderWidth:borderWidth,
|
||||
borderColor: borderColor ? borderColor : disabled && disabledBackground ? disabledBackground : (background || 'transparent'),
|
||||
borderRadius: radius,
|
||||
fontSize: size + 'rpx',
|
||||
color: disabled && disabledBackground ? disabledColor : color
|
||||
}" :loading="loading" :form-type="formType" :open-type="openType" @getuserinfo="bindgetuserinfo"
|
||||
@getphonenumber="bindgetphonenumber" @contact="bindcontact" @error="binderror"
|
||||
@opensetting="bindopensetting" :disabled="disabled" :scope="scope">
|
||||
<text class="fui-button__text"
|
||||
:class="{'fui-btn__gray-color':!background && !disabledBackground && !plain && type==='gray' && color==='#fff','fui-text__bold':bold}"
|
||||
v-if="text"
|
||||
:style="{fontSize: size + 'rpx',lineHeight:size + 'rpx',color: disabled && disabledBackground ? disabledColor : color}">{{text}}</text>
|
||||
<slot></slot>
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'fui-button',
|
||||
emits: ['click', 'getuserinfo', 'contact', 'getphonenumber', 'error', 'opensetting'],
|
||||
// #ifndef VUE3
|
||||
// #ifdef MP-WEIXIN
|
||||
behaviors: ['wx://form-field-button'],
|
||||
// #endif
|
||||
// #endif
|
||||
props: {
|
||||
//样式类型：primary，success， warning，danger，link，purple，gray
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
//按钮背景色，当传入值时type失效
|
||||
background: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//按钮显示文本
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//按钮字体颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
//按钮禁用背景色
|
||||
disabledBackground: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//按钮禁用字体颜色
|
||||
disabledColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
borderWidth: {
|
||||
type: String,
|
||||
// #ifdef APP-NVUE
|
||||
default: '0.5px'
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
default: '1rpx'
|
||||
// #endif
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//宽度
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
//高度
|
||||
height: {
|
||||
type: String,
|
||||
default: '96rpx'
|
||||
},
|
||||
//字体大小，单位rpx
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 32
|
||||
},
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//['20rpx','30rpx','20rpx','30rpx']->[上，右，下，左]
|
||||
margin: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['0', '0']
|
||||
}
|
||||
},
|
||||
//圆角
|
||||
radius: {
|
||||
type: String,
|
||||
default: '16rpx'
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
formType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
openType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//支付宝小程序
|
||||
//当 open-type 为 getAuthorize 时，可以设置 scope 为：phoneNumber、userInfo
|
||||
scope: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
index: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: 0,
|
||||
trigger: false,
|
||||
tap: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleStart() {
|
||||
if (this.disabled) return;
|
||||
this.trigger = false;
|
||||
this.tap = true;
|
||||
if (new Date().getTime() - this.time <= 150) return;
|
||||
this.trigger = true;
|
||||
this.time = new Date().getTime();
|
||||
},
|
||||
handleClick() {
|
||||
if (this.disabled || !this.trigger) return;
|
||||
//如果想取消操作，比如长按再放开，这里可以做时间判断
|
||||
this.time = 0;
|
||||
this.$emit('click', {
|
||||
index: Number(this.index)
|
||||
});
|
||||
},
|
||||
handleTap() {
|
||||
// #ifdef H5
|
||||
if (this.disabled || this.tap) return;
|
||||
this.$emit('click', {
|
||||
index: Number(this.index)
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
handleEnd() {
|
||||
if (this.disabled) return;
|
||||
setTimeout(() => {
|
||||
this.time = 0;
|
||||
}, 150);
|
||||
},
|
||||
bindgetuserinfo({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('getuserinfo', detail);
|
||||
},
|
||||
bindcontact({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('contact', detail);
|
||||
},
|
||||
bindgetphonenumber({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('getphonenumber', detail);
|
||||
},
|
||||
binderror({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('error', detail);
|
||||
},
|
||||
bindopensetting({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('opensetting', detail);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-button__wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-button {
|
||||
/* #ifdef APP-NVUE */
|
||||
border-width: 0.5px;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
border-width: 1rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
border-style: solid;
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
overflow: hidden;
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: translateZ(0);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-button__flex-1 {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-button::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-button__active {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.fui-button__active::after {
|
||||
content: ' ';
|
||||
background-color: var(--fui-bg-color-hover, rgba(0, 0, 0, 0.2));
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transform: none;
|
||||
z-index: 1;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.fui-button__text {
|
||||
text-align: center;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center !important;
|
||||
padding-left: 0 !important;
|
||||
|
||||
}
|
||||
|
||||
.fui-button__opacity {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.fui-text__bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fui-button__link {
|
||||
border-color: transparent !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.fui-button__primary {
|
||||
/* #ifdef APP-NVUE */
|
||||
border-color: #465CFF !important;
|
||||
background: #465CFF !important;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
border-color: var(--fui-color-primary, #465CFF) !important;
|
||||
background: var(--fui-color-primary, #465CFF) !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-button__success {
|
||||
/* #ifdef APP-NVUE */
|
||||
border-color: #09BE4F !important;
|
||||
background: #09BE4F !important;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
border-color: var(--fui-color-success, #09BE4F) !important;
|
||||
background: var(--fui-color-success, #09BE4F) !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-button__warning {
|
||||
/* #ifdef APP-NVUE */
|
||||
border-color: #FFB703 !important;
|
||||
background: #FFB703 !important;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
border-color: var(--fui-color-warning, #FFB703) !important;
|
||||
background: var(--fui-color-warning, #FFB703) !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-button__danger {
|
||||
/* #ifdef APP-NVUE */
|
||||
border-color: #FF2B2B !important;
|
||||
background: #FF2B2B !important;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
border-color: var(--fui-color-danger, #FF2B2B) !important;
|
||||
background: var(--fui-color-danger, #FF2B2B) !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-button__purple {
|
||||
/* #ifdef APP-NVUE */
|
||||
border-color: #6831FF !important;
|
||||
background: #6831FF !important;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
border-color: var(--fui-color-purple, #6831FF) !important;
|
||||
background: var(--fui-color-purple, #6831FF) !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-button__gray {
|
||||
/* #ifdef APP-NVUE */
|
||||
border-color: #F8F8F8 !important;
|
||||
background: #F8F8F8 !important;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
border-color: var(--fui-bg-color-content, #F8F8F8) !important;
|
||||
background: var(--fui-bg-color-content, #F8F8F8) !important;
|
||||
color: var(--fui-color-primary, #465CFF) !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-btn__gray-color {
|
||||
/* #ifdef APP-NVUE */
|
||||
color: #465CFF !important;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
color: var(--fui-color-primary, #465CFF) !important;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user