feat(Popover): support close-on-click-outside attr (#916)

Tencent · Jul 3, 2023 · d8b902c · d8b902c
1 parent 035bef6
commit d8b902c
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 178 deletions.
diff --git a/src/popover/demos/placement.vue b/src/popover/demos/placement.vue
@@ -3,47 +3,23 @@
     <div class="popover-example__summary mb-16">顶部弹出气泡</div>
     <div class="popover-example__content row mb-24">
       <div class="popover-example__content__item">
-        <t-popover :visible="visibleList[0]" placement="top-left" theme="dark" content="弹出气泡内容">
+        <t-popover placement="top-left" theme="dark" content="弹出气泡内容">
           <template #triggerElement>
-            <t-button
-              class="button-width--small"
-              theme="primary"
-              variant="outline"
-              size="large"
-              @click="handleClick(0)"
-            >
-              顶部左
-            </t-button>
+            <t-button class="button-width--small" theme="primary" variant="outline" size="large"> 顶部左 </t-button>
           </template>
         </t-popover>
       </div>
       <div class="popover-example__content__item">
-        <t-popover :visible="visibleList[1]" placement="top" theme="dark" content="弹出气泡内容">
+        <t-popover placement="top" theme="dark" content="弹出气泡内容">
           <template #triggerElement>
-            <t-button
-              class="button-width--small"
-              theme="primary"
-              variant="outline"
-              size="large"
-              @click="handleClick(1)"
-            >
-              顶部中
-            </t-button>
+            <t-button class="button-width--small" theme="primary" variant="outline" size="large"> 顶部中 </t-button>
           </template>
         </t-popover>
       </div>
       <div class="popover-example__content__item">
-        <t-popover :visible="visibleList[2]" placement="top-right" theme="dark" content="弹出气泡内容">
+        <t-popover placement="top-right" theme="dark" content="弹出气泡内容">
           <template #triggerElement>
-            <t-button
-              class="button-width--small"
-              theme="primary"
-              variant="outline"
-              size="large"
-              @click="handleClick(2)"
-            >
-              顶部右
-            </t-button>
+            <t-button class="button-width--small" theme="primary" variant="outline" size="large"> 顶部右 </t-button>
           </template>
         </t-popover>
       </div>
@@ -54,47 +30,23 @@
     <div class="popover-example__summary mb-16">底部弹出气泡</div>
     <div class="popover-example__content row mb-24">
       <div class="popover-example__content__item">
-        <t-popover :visible="visibleList[3]" placement="bottom-left" theme="dark" content="弹出气泡内容">
+        <t-popover placement="bottom-left" theme="dark" content="弹出气泡内容">
           <template #triggerElement>
-            <t-button
-              class="button-width--small"
-              theme="primary"
-              variant="outline"
-              size="large"
-              @click="handleClick(3)"
-            >
-              底部左
-            </t-button>
+            <t-button class="button-width--small" theme="primary" variant="outline" size="large"> 底部左 </t-button>
           </template>
         </t-popover>
       </div>
       <div class="popover-example__content__item">
-        <t-popover :visible="visibleList[4]" placement="bottom" theme="dark" content="弹出气泡内容">
+        <t-popover placement="bottom" theme="dark" content="弹出气泡内容">
           <template #triggerElement>
-            <t-button
-              class="button-width--small"
-              theme="primary"
-              variant="outline"
-              size="large"
-              @click="handleClick(4)"
-            >
-              底部中
-            </t-button>
+            <t-button class="button-width--small" theme="primary" variant="outline" size="large"> 底部中 </t-button>
           </template>
         </t-popover>
       </div>
       <div class="popover-example__content__item">
-        <t-popover :visible="visibleList[5]" placement="bottom-right" theme="dark" content="弹出气泡内容">
+        <t-popover placement="bottom-right" theme="dark" content="弹出气泡内容">
           <template #triggerElement>
-            <t-button
-              class="button-width--small"
-              theme="primary"
-              variant="outline"
-              size="large"
-              @click="handleClick(5)"
-            >
-              底部右
-            </t-button>
+            <t-button class="button-width--small" theme="primary" variant="outline" size="large"> 底部右 </t-button>
           </template>
         </t-popover>
       </div>
@@ -105,29 +57,23 @@
     <div class="popover-example__summary mb-16">右侧弹出气泡</div>
     <div class="popover-example__content column mb-24">
       <div class="popover-example__content__item">
-        <t-popover :visible="visibleList[6]" placement="right-top" theme="dark" content="气泡内容">
+        <t-popover placement="right-top" theme="dark" content="气泡内容">
           <template #triggerElement>
-            <t-button class="button-with--large" theme="primary" variant="outline" size="large" @click="handleClick(6)">
-              右侧上
-            </t-button>
+            <t-button class="button-with--large" theme="primary" variant="outline" size="large"> 右侧上 </t-button>
           </template>
         </t-popover>
       </div>
       <div class="popover-example__content__item">
-        <t-popover :visible="visibleList[7]" placement="right" theme="dark" content="气泡内容">
+        <t-popover placement="right" theme="dark" content="气泡内容">
           <template #triggerElement>
-            <t-button class="button-with--large" theme="primary" variant="outline" size="large" @click="handleClick(7)">
-              右侧中
-            </t-button>
+            <t-button class="button-with--large" theme="primary" variant="outline" size="large"> 右侧中 </t-button>
           </template>
         </t-popover>
       </div>
       <div class="popover-example__content__item">
-        <t-popover :visible="visibleList[8]" placement="right-bottom" theme="dark" content="气泡内容">
+        <t-popover placement="right-bottom" theme="dark" content="气泡内容">
           <template #triggerElement>
-            <t-button class="button-with--large" theme="primary" variant="outline" size="large" @click="handleClick(8)">
-              右侧下
-            </t-button>
+            <t-button class="button-with--large" theme="primary" variant="outline" size="large"> 右侧下 </t-button>
           </template>
         </t-popover>
       </div>
@@ -138,62 +84,30 @@
     <div class="popover-example__summary mb-16">左侧弹出气泡</div>
     <div class="popover-example__content column flex-end mb-24">
       <div class="popover-example__content__item">
-        <t-popover :visible="visibleList[9]" placement="left-top" theme="dark" content="气泡内容">
+        <t-popover placement="left-top" theme="dark" content="气泡内容">
           <template #triggerElement>
-            <t-button class="button-with--large" theme="primary" variant="outline" size="large" @click="handleClick(9)">
-              左侧上
-            </t-button>
+            <t-button class="button-with--large" theme="primary" variant="outline" size="large"> 左侧上 </t-button>
           </template>
         </t-popover>
       </div>
       <div class="popover-example__content__item">
-        <t-popover :visible="visibleList[10]" placement="left" theme="dark" content="气泡内容">
+        <t-popover placement="left" theme="dark" content="气泡内容">
           <template #triggerElement>
-            <t-button
-              class="button-with--large"
-              theme="primary"
-              variant="outline"
-              size="large"
-              @click="handleClick(10)"
-            >
-              左侧中
-            </t-button>
+            <t-button class="button-with--large" theme="primary" variant="outline" size="large"> 左侧中 </t-button>
           </template>
         </t-popover>
       </div>
       <div class="popover-example__content__item">
-        <t-popover :visible="visibleList[11]" placement="left-bottom" theme="dark" content="气泡内容">
+        <t-popover placement="left-bottom" theme="dark" content="气泡内容">
           <template #triggerElement>
-            <t-button
-              class="button-with--large"
-              theme="primary"
-              variant="outline"
-              size="large"
-              @click="handleClick(11)"
-            >
-              左侧下
-            </t-button>
+            <t-button class="button-with--large" theme="primary" variant="outline" size="large"> 左侧下 </t-button>
           </template>
         </t-popover>
       </div>
     </div>
   </div>
 </template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const visibleList = ref([false, false, false, false, false, false, false, false, false, false, false, false]);
-
-const handleClick = (number: number) => {
-  const newVisibleList = visibleList.value.map((item, index) => {
-    if (index === number) {
-      return !item;
-    }
-    return false;
-  });
-  visibleList.value = newVisibleList;
-};
-</script>
+<script lang="ts" setup></script>
 
 <style lang="less" scoped>
 .popover-example {

diff --git a/src/popover/demos/theme.vue b/src/popover/demos/theme.vue
@@ -1,78 +1,51 @@
 <template>
   <div class="popover-example">
     <div class="popover-example__content">
-      <t-popover :visible="visibleList[0]" placement="top" theme="dark" content="弹出气泡内容">
+      <t-popover placement="top" theme="dark" content="弹出气泡内容">
         <template #triggerElement>
-          <t-button class="button-width--small" theme="primary" variant="outline" size="large" @click="handleClick(0)">
-            深色
-          </t-button>
+          <t-button class="button-width--small" theme="primary" variant="outline" size="large"> 深色 </t-button>
         </template>
       </t-popover>
     </div>
     <div class="popover-example__content">
-      <t-popover :visible="visibleList[1]" placement="top" theme="light" content="弹出气泡内容">
+      <t-popover placement="top" theme="light" content="弹出气泡内容">
         <template #triggerElement>
-          <t-button class="button-width--small" theme="primary" variant="outline" size="large" @click="handleClick(1)">
-            浅色
-          </t-button>
+          <t-button class="button-width--small" theme="primary" variant="outline" size="large"> 浅色 </t-button>
         </template>
       </t-popover>
     </div>
     <div class="popover-example__content">
-      <t-popover :visible="visibleList[2]" placement="top" theme="brand" content="弹出气泡内容">
+      <t-popover placement="top" theme="brand" content="弹出气泡内容">
         <template #triggerElement>
-          <t-button class="button-width--small" theme="primary" variant="outline" size="large" @click="handleClick(2)">
-            品牌色
-          </t-button>
+          <t-button class="button-width--small" theme="primary" variant="outline" size="large"> 品牌色 </t-button>
         </template>
       </t-popover>
     </div>
   </div>
   <div class="popover-example">
     <div class="popover-example__content">
-      <t-popover :visible="visibleList[3]" placement="top" theme="success" content="弹出气泡内容">
+      <t-popover placement="top" theme="success" content="弹出气泡内容">
         <template #triggerElement>
-          <t-button class="button-width--small" theme="primary" variant="outline" size="large" @click="handleClick(3)">
-            成功色
-          </t-button>
+          <t-button class="button-width--small" theme="primary" variant="outline" size="large"> 成功色 </t-button>
         </template>
       </t-popover>
     </div>
     <div class="popover-example__content">
-      <t-popover :visible="visibleList[4]" placement="top" theme="warning" content="弹出气泡内容">
+      <t-popover placement="top" theme="warning" content="弹出气泡内容">
         <template #triggerElement>
-          <t-button class="button-width--small" theme="primary" variant="outline" size="large" @click="handleClick(4)">
-            警告色
-          </t-button>
+          <t-button class="button-width--small" theme="primary" variant="outline" size="large"> 警告色 </t-button>
         </template>
       </t-popover>
     </div>
     <div class="popover-example__content">
-      <t-popover :visible="visibleList[5]" placement="top" theme="error" content="弹出气泡内容">
+      <t-popover placement="top" theme="error" content="弹出气泡内容">
         <template #triggerElement>
-          <t-button class="button-width--small" theme="primary" variant="outline" size="large" @click="handleClick(5)">
-            错误色
-          </t-button>
+          <t-button class="button-width--small" theme="primary" variant="outline" size="large"> 错误色 </t-button>
         </template>
       </t-popover>
     </div>
   </div>
 </template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const visibleList = ref([false, false, false, false, false, false]);
-
-const handleClick = (number: number) => {
-  const newVisibleList = visibleList.value.map((item, index) => {
-    if (index === number) {
-      return !item;
-    }
-    return false;
-  });
-  visibleList.value = newVisibleList;
-};
-</script>
 
 <style lang="less" scoped>
 .popover-example {

diff --git a/src/popover/demos/type.vue b/src/popover/demos/type.vue
@@ -2,35 +2,36 @@
   <div class="popover-example">
     <div class="popover-example__summary mb-16">带箭头的弹出气泡</div>
     <div class="popover-example__content mb-24">
-      <t-popover
-        :visible="visibleList[0]"
-        placement="top"
-        theme="dark"
-        content="弹出气泡内容"
-        @visible-change="handleVisibleChange"
-      >
+      <t-popover placement="top" theme="dark" content="弹出气泡内容" :close-on-click-outside="false">
         <template #triggerElement>
-          <t-button theme="primary" variant="outline" size="large" @click="handleClick(0)">带箭头</t-button>
+          <t-button theme="primary" variant="outline" size="large">带箭头</t-button>
         </template>
       </t-popover>
     </div>
   </div>
   <div class="popover-example">
     <div class="popover-example__summary mb-16">不带箭头的弹出气泡</div>
     <div class="popover-example__content mb-24">
-      <t-popover :visible="visibleList[1]" placement="top" theme="dark" :show-arrow="false" content="弹出气泡内容">
+      <t-popover
+        :visible="visible"
+        placement="top"
+        theme="dark"
+        :show-arrow="false"
+        content="弹出气泡内容"
+        @visible-change="handleVisibleChange"
+      >
         <template #triggerElement>
-          <t-button theme="primary" variant="outline" size="large" @click="handleClick(1)">不带箭头</t-button>
+          <t-button theme="primary" variant="outline" size="large">不带箭头</t-button>
         </template>
       </t-popover>
     </div>
   </div>
   <div class="popover-example">
     <div class="popover-example__summary mb-16">自定义内容弹出气泡</div>
     <div class="custom popover-example__content mb-24">
-      <t-popover :visible="visibleList[2]" placement="top" theme="dark">
+      <t-popover placement="top" theme="dark">
         <template #triggerElement>
-          <t-button theme="primary" variant="outline" size="large" @click="handleClick(2)">自定义内容</t-button>
+          <t-button theme="primary" variant="outline" size="large">自定义内容</t-button>
         </template>
         <template #content>
           <div class="custom__list">
@@ -44,20 +45,10 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const visibleList = ref([false, false, false]);
-
-const handleClick = (number: number) => {
-  const newVisibleList = visibleList.value.map((item, index) => {
-    if (index === number) {
-      return !item;
-    }
-    return false;
-  });
-  visibleList.value = newVisibleList;
-};
+const visible = ref(false);
 
-const handleVisibleChange = (visible: boolean) => {
-  console.log('visible is: ', visible);
+const handleVisibleChange = (val: boolean) => {
+  visible.value = val;
 };
 </script>
 

diff --git a/src/popover/popover.en-US.md b/src/popover/popover.en-US.md
@@ -5,6 +5,7 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+closeOnClickOutside | Boolean | true | \- | N
 content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 placement | String | top | options：top/left/right/bottom/top-left/top-right/bottom-left/bottom-right/left-top/left-bottom/right-top/right-bottom | N

diff --git a/src/popover/popover.md b/src/popover/popover.md
@@ -5,6 +5,7 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+closeOnClickOutside | Boolean | true | 是否在点击外部元素后关闭菜单  | N
 content | String / Slot / Function | - | 确认框内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | 触发元素，同 triggerElement。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 placement | String | top | 浮层出现位置。可选项：top/left/right/bottom/top-left/top-right/bottom-left/bottom-right/left-top/left-bottom/right-top/right-bottom | N