Pārlūkot izejas kodu

feat: vue-anti库弹窗单独实现,移除vant依赖

cuiyalong 1 gadu atpakaļ
vecāks
revīzija
400b322639

+ 2 - 2
packages/vue-anti/README.md

@@ -126,9 +126,9 @@ console.log(iReceivedMsg)
 
 > 该库还可以支持在vue组件内使用
 >
-> 在页面弹窗可以使用 VerifyPointsPopup 组件
+> 在页面弹窗可以使用 VerifyPointsPopup 组件(不推荐,由于弹窗样式由该库单独封装,动画以及各种api不够丰富,建议使用项目组件库弹窗嵌<VerifyPoints /> 使用。)
 >
-> 嵌入到页面信息流中可以使用 VerifyPoints 组件
+> 嵌入到页面信息流中可以使用 VerifyPoints 组件(**推荐**)
 
 ```vue
 <template>

+ 0 - 1
packages/vue-anti/package.json

@@ -13,7 +13,6 @@
   "dependencies": {
     "core-js": "^3.8.3",
     "qs": "^6.11.0",
-    "vant": "2.12.44",
     "vue": "^2.6.14"
   },
   "devDependencies": {

+ 64 - 0
packages/vue-anti/src/components/AntiPopup.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="j-anti-popup-container" v-if="value">
+    <div class="j-anti-popup-overlay" :class="overlayClass"  :style="`z-index: ${zIndex};`"></div>
+    <div class="j-anti-popup j-anti-popup--center" :class="contentClass" :style="`z-index: ${zIndex + 1};`">
+      <slot name="default"></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'AntiPopup',
+  props: {
+    value: {
+      value: Boolean,
+      default: false
+    },
+    overlayClass: {
+      type: String,
+      default: ''
+    },
+    contentClass: {
+      type: String,
+      default: ''
+    },
+    zIndex: {
+      type: Number,
+      default: 9999
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  methods: {
+    syncInput(f = false) {
+      this.$emit('input', f)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.j-anti-popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,.7);
+}
+.j-anti-popup {
+  position: fixed;
+  max-height: 100%;
+  overflow-y: auto;
+  transition: transform .3s;
+  -webkit-overflow-scrolling: touch;
+}
+.j-anti-popup--center {
+  top: 45%;
+  left: 50%;
+  transform: translate3d(-50%,-50%,0);
+}
+</style>
+  

+ 11 - 12
packages/vue-anti/src/components/VerifyPointsPopup.vue

@@ -1,29 +1,27 @@
 <template>
-  <van-popup
+  <AntiPopup
     :value="value"
     @input="onInput"
-    get-container="body"
+    class="use-anti-popup-container"
     overlay-class="verify-points-overlay"
-    :close-on-click-overlay="false"
-    close-on-popstate
-    transition-appear
-    class="verify-points-popup">
+    content-class="verify-points-popup"
+    transition-appear>
     <VerifyPoints
       ref="verifyPoints"
       @refresh="onRefresh"
       @confirm="onConfirm"
       :imgBase64="imgBase64"
       :textVerify="textVerify" />
-  </van-popup>
+  </AntiPopup>
 </template>
 <script>
 import VerifyPoints from './VerifyPoints'
-import { Popup } from 'vant'
+import AntiPopup from './AntiPopup'
 
 export default {
   name: 'VerifyPointsPopup',
   components: {
-    [Popup.name]: Popup,
+    AntiPopup,
     VerifyPoints
   },
   props: {
@@ -67,8 +65,9 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.verify-points-popup {
-  top: 45%;
-  background-color: transparent;
+.use-anti-popup-container {
+  ::v-deep {
+    .verify-points-popup {}
+  }
 }
 </style>