first commit

uni_modules/tdesign-uniapp/components/popup/popup.vue

@@ -0,0 +1,141 @@
+<template>
+  <view>
+    <view
+      v-if="realVisible"
+      :style="tools._style([popup.getPopupStyles({ zIndex, distanceTop, placement, duration }), customStyle])"
+      :class="tools.cls(classPrefix, [placement]) + ' ' + transitionClass + ' ' + tClass"
+      @transitionend="onTransitionEnd"
+    >
+      <view
+        v-if="innerPreventScrollThrough"
+        :class="classPrefix + '__content ' + tClassContent"
+        @touchmove.stop.prevent="noop"
+      >
+        <slot name="content" />
+        <slot />
+        <view
+          :class="classPrefix + '__close'"
+          @click="handleClose"
+        >
+          <t-icon
+            v-if="closeBtn"
+            name="close"
+            size="64rpx"
+          />
+          <slot
+            name="close-btn"
+            :class="classPrefix + '-slot'"
+          />
+        </view>
+      </view>
+
+      <view
+        v-else
+        :class="classPrefix + '__content ' + tClassContent"
+      >
+        <slot name="content" />
+        <slot />
+        <view
+          :class="classPrefix + '__close'"
+          @click="handleClose"
+        >
+          <t-icon
+            v-if="closeBtn"
+            name="close"
+            size="64rpx"
+          />
+          <slot
+            name="close-btn"
+            :class="classPrefix + '-slot'"
+          />
+        </view>
+      </view>
+    </view>
+    <t-overlay
+      v-if="showOverlay"
+      id="popup-overlay"
+      :visible="visible"
+      :using-custom-navbar="usingCustomNavbar"
+      :custom-navbar-height="customNavbarHeight"
+      :z-index="(overlayProps && overlayProps.zIndex) || 11000"
+      :duration="(overlayProps && overlayProps.duration) || 300"
+      :background-color="(overlayProps && overlayProps.backgroundColor) || ''"
+      :prevent-scroll-through="preventScrollThrough || (overlayProps ? !!overlayProps.preventScrollThrough : false)"
+      :custom-style="(overlayProps && overlayProps.style) || ''"
+      @click="handleOverlayClick($event, { tagId: 'popup-overlay' })"
+    />
+  </view>
+</template>
+<script>
+import TOverlay from '../overlay/overlay';
+import TIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { transitionMixins } from '../mixins/transition';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import tools from '../common/utils.wxs';
+import popup from './computed.js';
+
+delete props.visible;
+
+const name = `${prefix}-popup`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+  ],
+  mixins: [transitionMixins, useCustomNavbar],
+  components: {
+    TOverlay,
+    TIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'visible-change',
+    'leaved',
+    'update:visible',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      popup,
+      tools,
+    };
+  },
+  computed: {
+    innerPreventScrollThrough() {
+      const { preventScrollThrough, overlayProps } = this;
+      return preventScrollThrough || (overlayProps ? !!overlayProps.preventScrollThrough : false);
+    },
+  },
+  methods: {
+    noop() {},
+    handleOverlayClick() {
+      const { closeOnOverlayClick } = this;
+      if (closeOnOverlayClick) {
+        this.$emit('visible-change', { visible: false, trigger: 'overlay' });
+        this.$emit('update:visible', false);
+      }
+    },
+
+    handleClose() {
+      this.$emit('visible-change', { visible: false, trigger: 'close-btn' });
+      this.$emit('update:visible', false);
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './popup.css';
+</style>