Commit 980a925a authored by tangfh's avatar tangfh

封装 f-pop 插件(底部弹出,中间弹出,顶部弹出),并上传插件市场

parent 2b1c05a8
...@@ -36,6 +36,15 @@ const CONST = { ...@@ -36,6 +36,15 @@ const CONST = {
src: "", src: "",
text: "服务器开小差,请稍候再试", text: "服务器开小差,请稍候再试",
}, },
},
//弹窗显示的位置
popUI: {
position: {
top: "top", //最顶部
center: "center", //正中间
centerTop: "centerTop", //中间往上一点的位置
bottom: "bottom", //最底部
}
} }
} }
......
<template> <template>
<view class="content" :style="[style]"> <view class="content" :style="[style]">
<f-status-view v-if="statusViewUI.isShowStatusView" :status="statusViewUI.status" @tap="onStatusViewClick"></f-status-view> <f-status-view v-if="statusViewUI.isShowStatusView" :status="statusViewUI.status" @tap="onStatusViewClick"></f-status-view>
<button @click="showPopTop">f-pop-top</button>
<button @click="showPopCenter">f-pop-center</button>
<button @click="showPopBottom">f-pop-bottom</button>
<f-pop position="top" :isShow="isShowPopTop" @dismiss="onPopDismiss">
<template #top>
<view class="flex-row row-center-h">
top
</view>
</template>
</f-pop>
<f-pop position="center" :isShow="isShowPopCenter" @dismiss="onPopDismiss">
<template #center>
<view class="flex-row row-center-h">
center
</view>
</template>
</f-pop>
<f-pop position="bottom" :isShow="isShowPopBottom" @dismiss="onPopDismiss">
<template v-slot:bottom>
<view class="flex-row row-center-h">
bottom
</view>
</template>
</f-pop>
<f-image-01></f-image-01> <f-image-01></f-image-01>
<f-text-01 :ui="uiAddBtn"></f-text-01> <f-text-01 :ui="uiAddBtn"></f-text-01>
<view style="display: block; width: 100%;"> <view style="display: block; width: 100%;">
...@@ -28,6 +52,9 @@ ...@@ -28,6 +52,9 @@
data() { data() {
return { return {
title: 'fashion-ui', title: 'fashion-ui',
isShowPopTop: false,
isShowPopCenter: false,
isShowPopBottom: false,
style: {}, style: {},
statusViewUI: { statusViewUI: {
isShowStatusView: true, isShowStatusView: true,
...@@ -81,6 +108,23 @@ ...@@ -81,6 +108,23 @@
this.cMultiText01UiInit() this.cMultiText01UiInit()
}, },
methods: { methods: {
showPopTop() {
console.log("top");
this.isShowPopTop = true
},
showPopCenter() {
console.log("center");
this.isShowPopCenter = true
},
showPopBottom() {
console.log("bottom");
this.isShowPopBottom = true
},
onPopDismiss() {
this.isShowPopTop = false
this.isShowPopCenter = false
this.isShowPopBottom = false
},
styleInit() { styleInit() {
this.style = { this.style = {
paddingBottom: ui.appUI.saftBottom + "px" paddingBottom: ui.appUI.saftBottom + "px"
......
...@@ -37,6 +37,8 @@ $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色 ...@@ -37,6 +37,8 @@ $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
$c-bg-color-avatar: #f5f5f5; $c-bg-color-avatar: #f5f5f5;
$c-bg-color-active: #f5f5f5; $c-bg-color-active: #f5f5f5;
$c-bg-color: #4AA7F7;
$c-bg-color-active: #47a4f0;
/* 边框颜色 */ /* 边框颜色 */
$uni-border-color:#c8c7cc; $uni-border-color:#c8c7cc;
......
## 1.0.4(2024-05-29)
1.0.4
## 1.0.2(2024-05-29) ## 1.0.2(2024-05-29)
1.0.2 1.0.2
## 1.0.1(2024-05-28) ## 1.0.1(2024-05-28)
......
{ {
"id": "f-multi-text-01", "id": "f-multi-text-01",
"displayName": "f-multi-text-01", "displayName": "f-multi-text-01",
"version": "1.0.2", "version": "1.0.4",
"description": "f-multi-text-01", "description": "f-multi-text-01",
"keywords": [ "keywords": [
"f-multi-text-01" "f-multi-text-01"
......
<template>
<view class="view-pop" v-if="isShowInner">
<view class="view-mask" :animation="maskAnimationData" @touchmove.stop.prevent="moveHandle"
@click="onMaskClick()"></view>
<view class="view-top" v-if="POP_POSITION.top == position" :animation="topAnimationData"
:style="{background: isNeedDefaultBg ? 'white' : 'transparent'}" @touchmove.stop.prevent="noHandle">
<view class="pop-view-top-title" v-if="isNeedDefaultTitleBar">
<text class="pop-text-top-title">{{ title }}</text>
<image class="pop-close-btn" src="./static/icon-close.png" mode="aspectFill" @click="dismiss()">
</image>
</view>
<slot name="top"></slot>
<text class="text__dialog__top-right" @click="onEnsureClick()" v-if="isNeedEnsureBtn">确定</text>
</view>
<view class="view-center" v-if="POP_POSITION.center == position || POP_POSITION.centerTop == position"
@click="onMaskClick()">
<view class="view-center-content" :class="{'view-center-content-bg': isNeedDefaultCenterBg}"
@click.stop="noHandle()" :animation="centerAnimationData" :style="{marginTop: '-44px'}">
<view class="pop-view-top-title" v-if="isNeedDefaultTitleBar">
<text class="pop-text-top-title">{{ title }}</text>
<image class="pop-close-btn" src="./static/icon-close.png" mode="aspectFill" @click="dismiss()">
</image>
</view>
<slot name="center"></slot>
<text class="text__dialog__top-right" @click="onEnsureClick()" v-if="isNeedEnsureBtn">确定</text>
</view>
</view>
<view class="view-bottom" v-if="POP_POSITION.bottom == position" :animation="bottomAnimationData"
:style="{background: isNeedDefaultBg ? 'white' : 'transparent', marginBottom: safeBottom + 'px'}"
@touchmove.stop.prevent="noHandle">
<view class="pop-view-top-title" v-if="isNeedDefaultTitleBar">
<text class="pop-text-top-title">{{ title }}</text>
<image class="pop-close-btn" src="./static/icon-close.png" mode="aspectFill" @click="dismiss()">
</image>
</view>
<slot name="bottom"></slot>
<text class="text__dialog__top-right" @click="onEnsureClick()" v-if="isNeedEnsureBtn">确定</text>
</view>
</view>
</template>
<script>
import constant from '@/common/constant.js'
import ui from '@/common/ui.js'
const POP_POSITION = constant.CONST.popUI.position
export default {
name: "f-pop",
data() {
return {
topAnimationData: {},
centerAnimationData: {},
bottomAnimationData: {},
maskAnimationData: {},
duration: 350,
timingFunction: 'ease-in-out',
POP_POSITION: POP_POSITION,
animationBottom: null,
animationMask: null,
animationCenter: null,
isShowInner: false,
safeBottom: ui.appUI.saftBottom,
};
},
props: {
isShow: {
type: Boolean,
default: false
},
isNeedDefaultCenterBg: {
type: Boolean,
default: true
},
isNeedDefaultBg: {
type: Boolean,
default: true
},
isNeedEnsureBtn: {
type: Boolean,
default: true
},
centerTop: {
type: Number,
default: 0
},
isNeedDefaultTitleBar: {
type: Boolean,
default: true
},
title: {
type: String,
default: '标题'
},
position: {
type: String,
default: "bottom"
},
isListentDismiss: {
type: Boolean,
default: true
},
showDelay: {
type: Number,
default: 150
},
translateY: {
type: Number,
default: -50
},
translateYEnd: {
type: Number,
default: 0
},
isNeedTopAmin: {
type: Boolean,
default: false
}
},
mounted() {
var animationBottom = uni.createAnimation({
duration: this.duration,
timingFunction: this.timingFunction,
})
this.animationBottom = animationBottom;
var animationMask = uni.createAnimation({
duration: this.duration,
timingFunction: this.timingFunction,
})
this.animationMask = animationMask;
var animationCenter = uni.createAnimation({
duration: this.duration,
timingFunction: this.timingFunction,
})
this.animationCenter = animationCenter;
this.centerAnimationData = this.animationCenter
.opacity(0)
.translateY(this.translateY)
.step().export()
},
watch: {
isShow(newVal, oldVal) {
if (newVal) {
this.show()
return;
}
this.dismiss()
}
},
methods: {
noHandle() {},
onMaskClick() {
this.dismiss()
this.$emit("onMaskClick")
},
onEnsureClick() {
this.dismiss()
this.$emit("onEnsureClick")
},
show() {
this.isShowInner = true
setTimeout(function() {
if (this.position == POP_POSITION.top) {
this.topAnimationData = this.animationBottom.top('0rpx').step().export()
} else if (this.position == POP_POSITION.center) {
this.centerAnimationData = this.animationCenter.opacity(1)
.translateY(this.translateYEnd)
.step().export();
} else if (this.position == POP_POSITION.bottom) {
this.bottomAnimationData = this.animationBottom.bottom('0rpx').step().export()
}
this.maskAnimationData = this.animationMask.opacity(1).step().export();
}.bind(this), this.showDelay);
},
dismiss() {
if (this.isListentDismiss) {
this.$emit('dismiss', {})
}
if (this.position == POP_POSITION.top) {
this.topAnimationData = this.animationBottom.top('-100%').step().export()
} else if (this.position == POP_POSITION.center) {
this.centerAnimationData = this.animationCenter
.opacity(0)
.translateY(this.translateY)
.step().export();
} else if (this.position == POP_POSITION.bottom) {
this.bottomAnimationData = this.animationBottom.bottom('-100%').step().export()
}
this.maskAnimationData = this.animationMask.opacity(0).step().export()
setTimeout(function() {
this.isShowInner = false
}.bind(this), this.duration);
}
},
}
</script>
<style lang="scss">
.view-pop {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
z-index: 9999;
}
.view-mask {
position: absolute;
left: 0rpx;
right: 0rpx;
top: 0rpx;
bottom: 0rpx;
opacity: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 100;
}
.view-center {
width: 100%;
height: 100%;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 0;
left: 0;
z-index: 999;
}
.view-center-content-bg {
background: #FFFFFF;
border-radius: 32rpx 32rpx 32rpx 32rpx;
}
.view-center-content {
position: absolute;
width: auto;
height: auto;
display: flex;
flex-direction: column;
opacity: 0;
left: 32rpx;
right: 32rpx;
z-index: 999;
}
.view-top {
position: absolute;
width: auto;
height: auto;
left: 32rpx;
right: 32rpx;
top: -100%;
border-radius: 32rpx 32rpx 32rpx 32rpx;
z-index: 999;
}
.view-bottom {
position: absolute;
width: auto;
height: auto;
left: 32rpx;
right: 32rpx;
bottom: -100%;
border-radius: 32rpx 32rpx 32rpx 32rpx;
z-index: 999;
}
.pop-view-top-title {
position: relative;
display: flex;
width: 100%;
height: 134rpx;
}
.pop-close-btn {
width: 48rpx;
height: 48rpx;
margin-top: 32rpx;
margin-right: 32rpx;
z-index: 999;
flex-shrink: 0;
}
.pop-text-top-title {
position: relative;
font-size: $uni-font-size-lg;
text-align: center;
margin-top: 42rpx;
margin-left: 80rpx;
width: 100%;
z-index: 0;
}
.text__dialog__top-right {
display: flex;
width: auto;
color: white;
background-color: $c-bg-color;
margin: 48rpx;
height: 96rpx;
line-height: 96rpx;
border-radius: 96rpx;
justify-content: center;
align-items: center;
}
.text__dialog__top-right:active {
background-color: $c-bg-color-active;
border-radius: 96rpx;
}
</style>
\ No newline at end of file
{
"id": "f-pop",
"displayName": "f-pop",
"version": "1.0.0",
"description": "f-pop",
"keywords": [
"f-pop"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "",
"data": "",
"permissions": ""
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "u",
"aliyun": "u",
"alipay": "u"
},
"client": {
"Vue": {
"vue2": "u",
"vue3": "u"
},
"App": {
"app-vue": "u",
"app-nvue": "u",
"app-uvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
# f-pop
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment