Browse Source

feat(popup): props的closeable支持动态传值(#923)

suzigang 3 years ago
parent
commit
c010a9fe3c
2 changed files with 20 additions and 6 deletions
  1. 9 3
      src/packages/__VUE/popup/index.taro.vue
  2. 11 3
      src/packages/__VUE/popup/index.vue

+ 9 - 3
src/packages/__VUE/popup/index.taro.vue

@@ -15,7 +15,7 @@
       <view v-show="visible" :class="classes" :style="popStyle" @click="onClick">
         <slot v-if="showSlot"></slot>
         <view
-          v-if="closeable"
+          v-if="closed"
           @click="onClickCloseIcon"
           class="nutui-popup__close-icon"
           :class="'nutui-popup__close-icon--' + closeIconPosition"
@@ -102,13 +102,13 @@ export default create({
   },
   emits: ['click', 'click-close-icon', 'open', 'close', 'opend', 'closed', 'update:visible', 'click-overlay'],
   setup(props, { emit }) {
-    const { proxy } = getCurrentInstance() as any;
     const state = reactive({
       zIndex: props.zIndex ? (props.zIndex as number) : _zIndex,
       showSlot: true,
       transitionName: `popup-fade-${props.position}`,
       overLayCount: 1,
-      keepAlive: false
+      keepAlive: false,
+      closed: props.closeable
     });
     const [lockScroll, unlockScroll] = useLockScroll(() => props.lockScroll);
     const classes = computed(() => {
@@ -214,6 +214,12 @@ export default create({
         value === 'center' ? (state.transitionName = 'popup-fade') : (state.transitionName = `popup-slide-${value}`);
       }
     );
+    watch(
+      () => props.closeable,
+      (value) => {
+        state.closed = value;
+      }
+    );
     return {
       ...toRefs(state),
       popStyle,

+ 11 - 3
src/packages/__VUE/popup/index.vue

@@ -15,7 +15,7 @@
       <view v-show="visible" :class="classes" :style="popStyle" @click="onClick">
         <slot v-if="showSlot"></slot>
         <view
-          v-if="closeable"
+          v-if="closed"
           @click="onClickCloseIcon"
           class="nutui-popup__close-icon"
           :class="'nutui-popup__close-icon--' + closeIconPosition"
@@ -41,7 +41,7 @@
       <view v-show="visible" :class="classes" :style="popStyle" @click="onClick">
         <slot v-if="showSlot"></slot>
         <view
-          v-if="closeable"
+          v-if="closed"
           @click="onClickCloseIcon"
           class="nutui-popup__close-icon"
           :class="'nutui-popup__close-icon--' + closeIconPosition"
@@ -149,7 +149,8 @@ export default create({
       showSlot: true,
       transitionName: `popup-fade-${props.position}`,
       overLayCount: 1,
-      keepAlive: false
+      keepAlive: false,
+      closed: props.closeable
     });
 
     const [lockScroll, unlockScroll] = useLockScroll(() => props.lockScroll);
@@ -274,6 +275,13 @@ export default create({
       }
     );
 
+    watch(
+      () => props.closeable,
+      (value) => {
+        state.closed = value;
+      }
+    );
+
     return {
       ...toRefs(state),
       popStyle,