瀏覽代碼

feat: 弹窗组件

Tim_Walker 2 年之前
父節點
當前提交
0d89cb59a1
共有 1 個文件被更改,包括 70 次插入0 次删除
  1. 70 0
      src/components/Layout/PopupLayer.vue

+ 70 - 0
src/components/Layout/PopupLayer.vue

@@ -0,0 +1,70 @@
+<template>
+  <u-popup :show="isShow" round="20" :safeAreaInsetBottom="false">
+    <view class="head-box">
+      <text>{{ title }}</text>
+      <view class="close-icon" @tap="handleClose">
+        <u-icon name="close" size="24"></u-icon>
+      </view>
+    </view>
+    <view class="content">
+      <slot></slot>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isShow: false,
+    };
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler: function () {
+        this.isShow = this.show;
+      },
+    },
+  },
+  methods: {
+    handleClose() {
+      this.isShow = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.head-box {
+  height: 80rpx;
+  width: 100%;
+  font-size: 32rpx;
+  font-weight: bold;
+  text-align: center;
+  line-height: 80rpx;
+  position: relative;
+  .close-icon {
+    position: absolute;
+    right: 20rpx;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+.content {
+  width: 100vw;
+  min-height: 50vh;
+  max-height: 80vh;
+  overflow: auto;
+}
+</style>