chore(Popover): refactor with composition api

docs/markdown/migrate-from-v2.zh-CN.md

@@ -59,6 +59,7 @@ GoodsAction 商品导航组件重命名为 **ActionBar 行动栏**。
 - Dialog
 - ImagePreview
 - Notify
+- Popover
 - Popup
 - ShareSheet
 

src/popover/README.md

@@ -3,10 +3,11 @@
 ### Install
 
 ```js
-import Vue from 'vue';
+import { createApp } from 'vue';
 import { Popover } from 'vant';
 
-Vue.use(Popover);
+const app = createApp();
+app.use(Popover);
 ```
 
 ## Usage
@@ -14,7 +15,7 @@ Vue.use(Popover);
 ### Basic Usage
 
 ```html
-<van-popover v-model="showPopover" :actions="actions" @select="onSelect">
+<van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       Light Theme
@@ -50,7 +51,7 @@ export default {
 Using the `theme` prop to change the style of Popover.
 
 ```html
-<van-popover v-model="showPopover" theme="dark" :actions="actions">
+<van-popover v-model:show="showPopover" theme="dark" :actions="actions">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       Dark Theme
@@ -100,7 +101,7 @@ bottom-end    # Bottom right
 ### Show Icon
 
 ```html
-<van-popover v-model="showPopover" :actions="actions">
+<van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       Show Icon
@@ -129,7 +130,7 @@ export default {
 Using the `disabled` option to disable an action.
 
 ```html
-<van-popover v-model="showPopover" :actions="actions">
+<van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       Disable Action
@@ -159,14 +160,14 @@ export default {
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| v-model | Whether to show Popover | _boolean_ | `false` |
+| v-model:show | Whether to show Popover | _boolean_ | `false` |
 | actions | Actions | _Action[]_ | `[]` |
 | placement | Placement | _string_ | `bottom` |
 | theme | Theme，can be set to `dark` | _string_ | `light` |
 | overlay | Whether to show overlay | _boolean_ | `false` |
 | close-on-click-action | Whether to close when clicking action | _boolean_ | `true` |
 | close-on-click-outside | Whether to close when clicking outside | _boolean_ | `true` |
-| get-container | Return the mount node for Popover | _string \| () => Element_ | `body` |
+| teleport | Return the mount node for Popover | _string \| Element_ | `body` |
 
 ### Data Structure of Action
 

src/popover/README.zh-CN.md

@@ -7,10 +7,11 @@
 ### 引入
 
 ```js
-import Vue from 'vue';
+import { createApp } from 'vue';
 import { Popover } from 'vant';
 
-Vue.use(Popover);
+const app = createApp();
+app.use(Popover);
 ```
 
 ## 代码演示
@@ -20,7 +21,7 @@ Vue.use(Popover);
 当 Popover 弹出时，会基于 `reference` 插槽的内容进行定位。
 
 ```html
-<van-popover v-model="showPopover" :actions="actions" @select="onSelect">
+<van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       浅色风格
@@ -53,7 +54,7 @@ export default {
 Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme` 属性设置为 `dark` 可切换为深色风格。
 
 ```html
-<van-popover v-model="showPopover" theme="dark" :actions="actions">
+<van-popover v-model:show="showPopover" theme="dark" :actions="actions">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       深色风格
@@ -103,7 +104,7 @@ bottom-end    # 底部右侧位置
 在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。
 
 ```html
-<van-popover v-model="showPopover" :actions="actions">
+<van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       展示图标
@@ -132,7 +133,7 @@ export default {
 在 `actions` 数组中，可以通过 `disabled` 字段来禁用某个选项。
 
 ```html
-<van-popover v-model="showPopover" :actions="actions">
+<van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       禁用选项
@@ -161,7 +162,7 @@ export default {
 通过默认插槽，可以在 Popover 内部放置任意内容。
 
 ```html
-<van-popover v-model="showPopover">
+<van-popover v-model:show="showPopover">
   <van-grid
     square
     clickable
@@ -201,14 +202,14 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| v-model | 是否展示气泡弹出层 | _boolean_ | `false` |
+| v-model:show | 是否展示气泡弹出层 | _boolean_ | `false` |
 | actions | 选项列表 | _Action[]_ | `[]` |
 | placement | 弹出位置 | _string_ | `bottom` |
 | theme | 主题风格，可选值为 `dark` | _string_ | `light` |
 | overlay | 是否显示遮罩层 | _boolean_ | `false` |
 | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |
 | close-on-click-outside | 是否在点击外部元素后关闭菜单 | _boolean_ | `true` |
-| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` |
+| teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | `body` |
 
 ### Action 数据结构
 

src/popover/demo/index.vue

@@ -1,11 +1,9 @@
 <template>
-  <demo-section>
   <demo-block :title="t('basicUsage')">
     <van-popover
-        v-model="show.lightTheme"
+      v-model:show="show.lightTheme"
       :actions="t('actions')"
       placement="bottom-start"
-        style="margin-left: 16px;"
       @select="onSelect"
     >
       <template #reference>
@@ -15,10 +13,9 @@
       </template>
     </van-popover>
     <van-popover
-        v-model="show.darkTheme"
+      v-model:show="show.darkTheme"
       theme="dark"
       :actions="t('actions')"
-        style="margin-left: 16px;"
       @select="onSelect"
     >
       <template #reference>
@@ -39,14 +36,14 @@
     />
 
     <van-popup
-        v-model="showPicker"
+      v-model:show="showPicker"
       round
       position="bottom"
       get-container="body"
     >
       <div class="demo-popover-box">
         <van-popover
-            v-model="show.placement"
+          v-model:show="show.placement"
           theme="dark"
           :actions="t('shortActions')"
           :placement="currentPlacement"
@@ -57,16 +54,19 @@
           </template>
         </van-popover>
       </div>
-        <van-picker :columns="placements" @change="onPickerChange" />
+      <van-picker
+        :columns="placements"
+        :show-toolbar="false"
+        @change="onPickerChange"
+      />
     </van-popup>
   </demo-block>
 
   <demo-block :title="t('actionOptions')">
     <van-popover
-        v-model="show.showIcon"
+      v-model:show="show.showIcon"
       :actions="t('actionsWithIcon')"
       placement="bottom-start"
-        style="margin-left: 16px;"
       @select="onSelect"
     >
       <template #reference>
@@ -77,9 +77,8 @@
     </van-popover>
 
     <van-popover
-        v-model="show.disableAction"
+      v-model:show="show.disableAction"
       :actions="t('actionsDisabled')"
-        style="margin-left: 16px;"
       @select="onSelect"
     >
       <template #reference>
@@ -92,7 +91,7 @@
 
   <demo-block :title="t('customContent')">
     <van-popover
-        v-model="show.customContent"
+      v-model:show="show.customContent"
       placement="top-start"
       style="margin-left: 16px;"
       @select="onSelect"
@@ -119,7 +118,6 @@
       </template>
     </van-popover>
   </demo-block>
-  </demo-section>
 </template>
 
 <script>
@@ -209,7 +207,7 @@ export default {
   },
 
   methods: {
-    onPickerChange(picker, value) {
+    onPickerChange(value) {
       setTimeout(() => {
         this.show.placement = true;
         this.currentPlacement = value;
@@ -233,6 +231,10 @@ export default {
     border-radius: 8px;
   }
 
+  .van-popover__wrapper {
+    margin-left: @padding-md;
+  }
+
   .van-field {
     width: auto;
     margin: 0 12px;
@@ -244,6 +246,10 @@ export default {
     display: flex;
     justify-content: center;
     margin: 110px 0;
+
+    .van-popover__wrapper {
+      margin-left: 0;
+    }
   }
 }
 </style>

src/popover/index.js

@@ -1,11 +1,14 @@
+import { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
 import { createPopper } from '@popperjs/core/lib/popper-lite';
 import offsetModifier from '@popperjs/core/lib/modifiers/offset';
 import extendsHelper from '@babel/runtime/helpers/esm/extends';
+
+// Utils
 import { createNamespace } from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant';
 
-// Mixins
+// Composition
-import { ClickOutsideMixin } from '../mixins/click-outside';
+import { useClickAway } from '@vant/use';
 
 // Components
 import Icon from '../icon';
@@ -21,15 +24,10 @@ if (!Object.assign) {
 const [createComponent, bem] = createNamespace('popover');
 
 export default createComponent({
-  mixins: [
+  inheritAttrs: false,
-    ClickOutsideMixin({
-      event: 'touchstart',
-      method: 'onClickOutside',
-    }),
-  ],
 
   props: {
-    value: Boolean,
+    show: Boolean,
     overlay: Boolean,
     textColor: String,
     backgroundColor: String,
@@ -49,8 +47,8 @@ export default createComponent({
       type: String,
       default: 'bottom',
     },
-    getContainer: {
+    teleport: {
-      type: [String, Function],
+      type: [String, Object],
       default: 'body',
     },
     closeOnClickAction: {
@@ -59,26 +57,16 @@ export default createComponent({
     },
   },
 
-  watch: {
+  emits: ['select', 'touchstart', 'update:show'],
-    value: 'updateLocation',
-    placement: 'updateLocation',
-  },
 
-  mounted() {
+  setup(props, { emit, slots, attrs }) {
-    this.updateLocation();
+    let popper;
-  },
+    const wrapperRef = ref();
+    const popoverRef = ref();
 
-  beforeDestroy() {
+    const createPopperInstance = () => {
-    if (this.popper) {
+      return createPopper(wrapperRef.value, popoverRef.value.popupRef.value, {
-      this.popper.destroy();
+        placement: props.placement,
-      this.popper = null;
-    }
-  },
-
-  methods: {
-    createPopper() {
-      return createPopper(this.$refs.wrapper, this.$refs.popover.$el, {
-        placement: this.placement,
         modifiers: [
           {
             name: 'computeStyles',
@@ -90,111 +78,99 @@ export default createComponent({
           {
             ...offsetModifier,
             options: {
-              offset: this.offset,
+              offset: props.offset,
             },
           },
         ],
       });
-    },
+    };
 
-    updateLocation() {
+    const updateLocation = () => {
-      this.$nextTick(() => {
+      nextTick(() => {
-        if (!this.value) {
+        if (!props.show) {
           return;
         }
 
-        if (!this.popper) {
+        if (!popper) {
-          this.popper = this.createPopper();
+          popper = createPopperInstance();
         } else {
-          this.popper.setOptions({
+          popper.setOptions({
-            placement: this.placement,
+            placement: props.placement,
           });
         }
       });
-    },
+    };
 
-    renderAction(action, index) {
+    const toggle = (value) => {
+      emit('update:show', value);
+    };
+
+    const onTouchstart = (event) => {
+      event.stopPropagation();
+      emit('touchstart', event);
+    };
+
+    const onClickAction = (action, index) => {
+      if (action.disabled) {
+        return;
+      }
+
+      emit('select', action, index);
+
+      if (props.closeOnClickAction) {
+        toggle(false);
+      }
+    };
+
+    const onClickAway = () => {
+      toggle(false);
+    };
+
+    const renderAction = (action, index) => {
       const { icon, text, disabled, className } = action;
       return (
         <div
           class={[bem('action', { disabled, 'with-icon': icon }), className]}
-          onClick={() => this.onClickAction(action, index)}
+          onClick={() => onClickAction(action, index)}
         >
           {icon && <Icon name={icon} class={bem('action-icon')} />}
           <div class={[bem('action-text'), BORDER_BOTTOM]}>{text}</div>
         </div>
       );
-    },
+    };
 
-    onToggle(value) {
+    onMounted(updateLocation);
-      this.$emit('input', value);
+    onBeforeUnmount(() => {
-    },
+      if (popper) {
-
+        popper.destroy();
-    onTouchstart(event) {
+        popper = null;
-      event.stopPropagation();
-      this.$emit('touchstart', event);
-    },
-
-    onClickAction(action, index) {
-      if (action.disabled) {
-        return;
       }
+    });
 
-      this.$emit('select', action, index);
+    watch([() => props.show, () => props.placement], updateLocation);
 
-      if (this.closeOnClickAction) {
+    useClickAway(wrapperRef, onClickAway, { eventName: 'touchstart' });
-        this.$emit('input', false);
-      }
-    },
 
-    onClickOutside() {
+    return () => (
-      this.$emit('input', false);
+      <span ref={wrapperRef} class={bem('wrapper')}>
-    },
-
-    onOpen() {
-      this.$emit('open');
-    },
-
-    /* istanbul ignore next */
-    onOpened() {
-      this.$emit('opened');
-    },
-
-    onClose() {
-      this.$emit('close');
-    },
-
-    /* istanbul ignore next */
-    onClosed() {
-      this.$emit('closed');
-    },
-  },
-
-  render() {
-    return (
-      <span ref="wrapper" class={bem('wrapper')}>
         <Popup
-          ref="popover"
+          ref={popoverRef}
-          value={this.value}
+          show={props.show}
-          class={bem([this.theme])}
+          class={bem([props.theme])}
-          overlay={this.overlay}
+          overlay={props.overlay}
           position={null}
+          teleport={props.teleport}
           transition="van-popover-zoom"
           lockScroll={false}
-          getContainer={this.getContainer}
+          onTouchstart={onTouchstart}
-          onOpen={this.onOpen}
+          {...{ ...attrs, 'onUpdate:show': toggle }}
-          onClose={this.onClose}
-          onInput={this.onToggle}
-          onOpened={this.onOpened}
-          onClosed={this.onClosed}
-          nativeOnTouchstart={this.onTouchstart}
         >
           <div class={bem('arrow')} />
           <div class={bem('content')}>
-            {this.slots('default') || this.actions.map(this.renderAction)}
+            {slots.default ? slots.default() : props.actions.map(renderAction)}
           </div>
         </Popup>
-        {this.slots('reference')}
+        {slots.reference?.()}
       </span>
     );
   },

src/popover/index.less

@@ -253,7 +253,7 @@
     }
   }
 
-  &-zoom-enter,
+  &-zoom-enter-from,
   &-zoom-leave-active {
     transform: scale(0.8);
     opacity: 0;

src/popup/index.js

@@ -14,6 +14,7 @@ import { createNamespace, isDef } from '../utils';
 
 // Composition
 import { useEventListener } from '@vant/use';
+import { useExpose } from '../composables/use-expose';
 import { useLockScroll } from '../composables/use-lock-scroll';
 import { useLazyRender } from '../composables/use-lazy-render';
 
@@ -108,6 +109,7 @@ export default createComponent({
     let shouldReopen;
 
     const zIndex = ref();
+    const popupRef = ref();
 
     const [lockScroll, unlockScroll] = useLockScroll(() => props.lockScroll);
 
@@ -194,6 +196,7 @@ export default createComponent({
       return (
         <div
           v-show={props.show}
+          ref={popupRef}
           style={style.value}
           class={bem({
             round,
@@ -239,6 +242,8 @@ export default createComponent({
       }
     );
 
+    useExpose({ popupRef });
+
     useEventListener('popstate', () => {
       if (props.closeOnPopstate) {
         close();