当前位置：首页 > news >正文

封装 WBXpopup 组件

news 2025/7/22 0:34:56

这是Popup组件基于微博小程序，需要改变标签，以及一写方法

支持四个方向抽屉，以及中间弹出功能

// 用法
<template><wbx-view style="height: 100vh;"><!-- 对话框组件 --><wbx-view><wbx-text @click="openpup()">打开</wbx-text></wbx-view><WBXpopupref="popupRef"positionType="center"popupWidth="300px"popupHeight="400px"><template slot="popupContent"><wbx-view ref="drawer" style="padding: 16px;box-sizing: border-box; display: flex;flex-direction:column;justify-items: center;align-items: center;"><wbx-text style="font-size: 18px;height:26px;line-height: 26px;font-weight: 500;color:#000">我们仍在生成您的AI新身份</wbx-text><wbx-view@click="guan()"style="width: 70px; height: 70px; border: 2px solid #000"></wbx-view></wbx-view></template></WBXpopup></wbx-view>
</template><script>
/*** @type WBXAppOption*/
import WBXpopup from "../../commpents/wbx-popup/index.vue"
const pageOptions = {data() {return {};},methods: {openpup() {this.$refs.popupRef.openFn();},guan() {this.$refs.popupRef.closeFn();},},components: {WBXpopup,//弹出框},wbox: {onLoad() { },onShow() {// 页面显示/切入前台时触发},onHide() {// 页面隐藏时触发},onUnload() {// 页面退出时触发},},mounted() { },
};
export default pageOptions;
</script><style></style>

  //封装的组件
<template><wbx-view><wbx-viewv-if="showPopup"@click="closeFn()"style="background-color: rgba(0, 0, 0, 0.5);position: fixed;width: 100vw;height: 100vh;top: 0px;left: 0;display: flex;flex-direction: row;justify-content: center;align-items: center;transition: all 0.5s ease;z-index: 1;"><wbx-view :style="{width:popupWidth,height:popupHeight}" style=" transition: all 0.5s ease;z-index: 2; background-color: #fff;" v-if="positionType=='center'" ><slot name="popupContent"></slot></wbx-view><wbx-view :style="drawerStyle" v-else><slot name="popupContent"></slot></wbx-view></wbx-view></wbx-view>
</template><script>
/*openFn() 打开对话框closeFn() 关闭对话框positionType  从那边出来，抽屉的方向  left right bottom top center popupWidth： 对话框的宽popupHeight： 对话框的高
*/
export default {data() {return {showPopup: false,isOpen: false,};},props: {positionType: {type: String,default: "right",},popupWidth: {type: String,default: "300px",},popupHeight: {type: String,default: "300px",},},computed: {drawerStyle() {const style = {transition: "all 0.5s",zIndex: 2,backgroundColor: "#fff",position: "fixed",};if (this.positionType === "left" || this.positionType === "right") {style.width = this.popupWidth;style.height = "100vh";style[this.positionType] = this.isOpen ? "0px" : `-${this.popupWidth}`;} else  {style.width = "100vw";style.height = this.popupHeight;style[this.positionType] = this.isOpen ? "0" : `-${this.popupHeight}`;} return style;},},methods: {openFn() {this.showPopup = true;this.$nextTick(() => {setTimeout(() => {this.isOpen = true;}, 50);});},closeFn() {this.isOpen = false;setTimeout(() => {this.showPopup = false;}, 500);},},
};
</script>
<style></style>