breaking change(Popover): adjust trigger default value to click

youzan · Nov 26, 2020 · 1699d99 · 1699d99
1 parent 52fdf99
commit 1699d99
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 18 deletions.
diff --git a/docs/markdown/migrate-from-v2.zh-CN.md b/docs/markdown/migrate-from-v2.zh-CN.md
@@ -197,6 +197,10 @@ Vue 3.0 中增加了 `Teleport` 组件，提供将组件渲染到任意 DOM 位
 - 默认开启 `show-toolbar` 属性
 - 级联选择下，`confirm`、`change` 事件返回的回调参数将包含为完整的选项对象。
 
+#### Popover
+
+- `trigger` 属性的默认值调整为 `click`
+
 #### SwipeCell
 
 - `open` 事件的 `detail` 参数重命名为 `name`

diff --git a/src/popover/README.md b/src/popover/README.md
@@ -17,7 +17,7 @@ app.use(Popover);
 ```html
 <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
   <template #reference>
-    <van-button type="primary"> Light Theme </van-button>
+    <van-button type="primary">Light Theme</van-button>
   </template>
 </van-popover>
 ```
@@ -51,7 +51,7 @@ Using the `theme` prop to change the style of Popover.
 ```html
 <van-popover v-model:show="showPopover" theme="dark" :actions="actions">
   <template #reference>
-    <van-button type="primary"> Dark Theme </van-button>
+    <van-button type="primary">Dark Theme</van-button>
   </template>
 </van-popover>
 ```
@@ -99,7 +99,7 @@ bottom-end    # Bottom right
 ```html
 <van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
-    <van-button type="primary"> Show Icon </van-button>
+    <van-button type="primary">Show Icon</van-button>
   </template>
 </van-popover>
 ```
@@ -126,7 +126,7 @@ Using the `disabled` option to disable an action.
 ```html
 <van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
-    <van-button type="primary"> Disable Action </van-button>
+    <van-button type="primary">Disable Action</van-button>
   </template>
 </van-popover>
 ```
@@ -146,6 +146,41 @@ export default {
 };
 ```
 
+### Custom Content
+
+```html
+<van-popover v-model:show="showPopover">
+  <van-grid
+    square
+    clickable
+    :border="false"
+    column-num="3"
+    style="width: 240px;"
+  >
+    <van-grid-item
+      v-for="i in 6"
+      :key="i"
+      text="Option"
+      icon="photo-o"
+      @click="showPopover = false"
+    />
+  </van-grid>
+  <template #reference>
+    <van-button type="primary">Custom Content</van-button>
+  </template>
+</van-popover>
+```
+
+```js
+export default {
+  data() {
+    return {
+      showPopover: false,
+    };
+  },
+};
+```
+
 ## API
 
 ### Props
@@ -156,7 +191,7 @@ export default {
 | actions | Actions | _Action[]_ | `[]` |
 | placement | Placement | _string_ | `bottom` |
 | theme | Theme，can be set to `dark` | _string_ | `light` |
-| trigger `v2.11.1` | Trigger mode，can be set to `click` | - |
+| trigger `v2.11.1` | Trigger mode，can be set to `manual` | `click` |
 | offset | Distance to reference | _[number, number]_ | `[0, 8]` |
 | overlay | Whether to show overlay | _boolean_ | `false` |
 | close-on-click-action | Whether to close when clicking action | _boolean_ | `true` |

diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
@@ -23,7 +23,7 @@ app.use(Popover);
 ```html
 <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
   <template #reference>
-    <van-button type="primary"> 浅色风格 </van-button>
+    <van-button type="primary">浅色风格</van-button>
   </template>
 </van-popover>
 ```
@@ -54,7 +54,7 @@ Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme`
 ```html
 <van-popover v-model:show="showPopover" theme="dark" :actions="actions">
   <template #reference>
-    <van-button type="primary"> 深色风格 </van-button>
+    <van-button type="primary">深色风格</van-button>
   </template>
 </van-popover>
 ```
@@ -102,7 +102,7 @@ bottom-end    # 底部右侧位置
 ```html
 <van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
-    <van-button type="primary"> 展示图标 </van-button>
+    <van-button type="primary">展示图标</van-button>
   </template>
 </van-popover>
 ```
@@ -129,7 +129,7 @@ export default {
 ```html
 <van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
-    <van-button type="primary"> 禁用选项 </van-button>
+    <van-button type="primary">禁用选项</van-button>
   </template>
 </van-popover>
 ```
@@ -171,7 +171,7 @@ export default {
     />
   </van-grid>
   <template #reference>
-    <van-button type="primary"> 自定义内容 </van-button>
+    <van-button type="primary">自定义内容</van-button>
   </template>
 </van-popover>
 ```
@@ -196,7 +196,7 @@ export default {
 | actions | 选项列表 | _Action[]_ | `[]` |
 | placement | 弹出位置 | _string_ | `bottom` |
 | theme | 主题风格，可选值为 `dark` | _string_ | `light` |
-| trigger `v2.11.1` | 触发方式，可选值为 `click` | - |
+| trigger `v2.11.1` | 触发方式，可选值为 `manual` | `click` |
 | offset | 出现位置的偏移量 | _[number, number]_ | `[0, 8]` |
 | overlay | 是否显示遮罩层 | _boolean_ | `false` |
 | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |

diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
@@ -7,7 +7,7 @@
       @select="onSelect"
     >
       <template #reference>
-        <van-button type="primary" @click="show.lightTheme = true">
+        <van-button type="primary">
           {{ t('lightTheme') }}
         </van-button>
       </template>
@@ -19,7 +19,7 @@
       @select="onSelect"
     >
       <template #reference>
-        <van-button type="primary" @click="show.darkTheme = true">
+        <van-button type="primary">
           {{ t('darkTheme') }}
         </van-button>
       </template>
@@ -70,7 +70,7 @@
       @select="onSelect"
     >
       <template #reference>
-        <van-button type="primary" @click="show.showIcon = true">
+        <van-button type="primary">
           {{ t('showIcon') }}
         </van-button>
       </template>
@@ -82,7 +82,7 @@
       @select="onSelect"
     >
       <template #reference>
-        <van-button type="primary" @click="show.disableAction = true">
+        <van-button type="primary">
           {{ t('disableAction') }}
         </van-button>
       </template>
@@ -111,7 +111,7 @@
         />
       </van-grid>
       <template #reference>
-        <van-button type="primary" @click="show.customContent = true">
+        <van-button type="primary">
           {{ t('customContent') }}
         </van-button>
       </template>

diff --git a/src/popover/index.js b/src/popover/index.js
@@ -2,7 +2,7 @@ import { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
 import { createPopper, offsetModifier } from '@vant/popperjs';
 
 // Utils
-import { createNamespace } from '../utils';
+import { createNamespace, stopPropagation } from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant';
 
 // Composition
@@ -19,7 +19,6 @@ export default createComponent({
 
   props: {
     show: Boolean,
-    trigger: String,
     overlay: Boolean,
     offset: {
       type: Array,
@@ -29,6 +28,10 @@ export default createComponent({
       type: String,
       default: 'light',
     },
+    trigger: {
+      type: String,
+      default: 'click',
+    },
     actions: {
       type: Array,
       default: () => [],
@@ -159,6 +162,7 @@ export default createComponent({
           teleport={props.teleport}
           transition="van-popover-zoom"
           lockScroll={false}
+          onClick={stopPropagation}
           onTouchstart={onTouchstart}
           {...{ ...attrs, 'onUpdate:show': toggle }}
         >

diff --git a/src/popover/test/index.spec.js b/src/popover/test/index.spec.js
@@ -11,6 +11,7 @@ test('should toggle popover when trigger is "click" and the reference element is
   const wrapper = mount(Popover, {
     props: {
       show: true,
+      trigger: 'manual',
     },
     slots: {
       reference: () => <div class="reference"></div>,