封装 f-pop 插件（底部弹出，中间弹出，顶部弹出），并上传插件市场

common/constant.js

@@ -36,6 +36,15 @@ const CONST = {
 			src: "",
 			text: "服务器开小差，请稍候再试",
 		},
+	},
+	//弹窗显示的位置
+	popUI: {
+		position: {
+			top: "top", //最顶部
+			center: "center", //正中间
+			centerTop: "centerTop", //中间往上一点的位置
+			bottom: "bottom", //最底部
+		}
 	}
 }
 

pages/index/index.vue

 <template>
 	<view class="content" :style="[style]">
 		<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-text-01 :ui="uiAddBtn"></f-text-01>
 		<view style="display: block; width: 100%;">
@@ -28,6 +52,9 @@
 		data() {
 			return {
 				title: 'fashion-ui',
+				isShowPopTop: false,
+				isShowPopCenter: false,
+				isShowPopBottom: false,
 				style: {},
 				statusViewUI: {
 					isShowStatusView: true,
@@ -81,6 +108,23 @@
 			this.cMultiText01UiInit()
 		},
 		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() {
 				this.style = {
 					paddingBottom: ui.appUI.saftBottom + "px"

uni.scss

@@ -37,6 +37,8 @@ $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
 
 $c-bg-color-avatar: #f5f5f5;
 $c-bg-color-active: #f5f5f5;
+$c-bg-color: #4AA7F7;
+$c-bg-color-active: #47a4f0;
 
 /* 边框颜色 */
 $uni-border-color:#c8c7cc;

uni_modules/f-multi-text-01/changelog.md

+## 1.0.4（2024-05-29）
+1.0.4
 ## 1.0.2（2024-05-29）
 1.0.2
 ## 1.0.1（2024-05-28）

uni_modules/f-multi-text-01/package.json

 {
   "id": "f-multi-text-01",
   "displayName": "f-multi-text-01",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "f-multi-text-01",
   "keywords": [
     "f-multi-text-01"

uni_modules/f-pop/components/f-pop/f-pop.vue

+<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

uni_modules/f-pop/package.json

+{
+  "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

uni_modules/f-pop/readme.md

+# f-pop
\ No newline at end of file