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

2025-04-05 19:41:42 +08:00 · 2020-11-26 21:18:08 +08:00 · 2020-11-26 21:18:08 +08:00 · 1699d99272
commit 1699d99272
parent 52fdf99c69
6 changed files with 62 additions and 18 deletions
--- 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`
--- 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` |
--- 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` |
--- 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>
--- 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 }}
        >
--- 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>,