feat(Popover): add default slot

src/popover/README.md

@@ -67,6 +67,29 @@ export default {
 };
 ```
 
+### Placement
+
+```html
+<van-popover placement="top" />
+```
+
+`placement` supports the following values:
+
+```bash
+top           # Top middle
+top-start     # Top left
+top-end       # Top right
+left          # Left middle
+left-start    # Left top
+left-end      # Left bottom
+right         # Right middle
+right-start   # Right top
+right-end     # Right bottom
+bottom        # Bottom middle
+bottom-start  # Bottom left
+bottom-end    # Bottom right
+```
+
 ### Show Icon
 
 ```html
@@ -123,29 +146,6 @@ export default {
 };
 ```
 
-### Placement
-
-```html
-<van-popover placement="top" />
-```
-
-`placement` supports the following values:
-
-```bash
-top           # Top middle
-top-start     # Top left
-top-end       # Top right
-left          # Left middle
-left-start    # Left top
-left-end      # Left bottom
-right         # Right middle
-right-start   # Right top
-right-end     # Right bottom
-bottom        # Bottom middle
-bottom-start  # Bottom left
-bottom-end    # Bottom right
-```
-
 ## API
 
 ### Props
@@ -184,4 +184,5 @@ bottom-end    # Bottom right
 
 | Name      | Description       |
 | --------- | ----------------- |
+| default   | Custom content    |
 | reference | Reference Element |

src/popover/README.zh-CN.md

@@ -66,6 +66,31 @@ export default {
 };
 ```
 
+### 弹出位置
+
+通过 `placement` 属性来控制气泡的弹出位置。
+
+```html
+<van-popover placement="top" />
+```
+
+`placement` 支持以下值：
+
+```bash
+top           # 顶部中间位置
+top-start     # 顶部左侧位置
+top-end       # 顶部右侧位置
+left          # 左侧中间位置
+left-start    # 左侧上方位置
+left-end      # 左侧下方位置
+right         # 右侧中间位置
+right-start   # 右侧上方位置
+right-end     # 右侧下方位置
+bottom        # 底部中间位置
+bottom-start  # 底部左侧位置
+bottom-end    # 底部右侧位置
+```
+
 ### 展示图标
 
 在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。
@@ -124,29 +149,43 @@ export default {
 };
 ```
 
-### 弹出位置
+### 自定义内容
 
-通过 `placement` 属性来控制气泡的弹出位置。
+通过默认插槽，可以在 Popover 内部放置任意内容。
 
 ```html
-<van-popover placement="top" />
+<van-popover v-model="showPopover">
+  <van-grid
+    square
+    clickable
+    :border="false"
+    column-num="3"
+    style="width: 240px;"
+  >
+    <van-grid-item
+      v-for="i in 6"
+      :key="i"
+      text="选项"
+      icon="photo-o"
+      @click="showPopover = false"
+    />
+  </van-grid>
+  <template #reference>
+    <van-button type="primary" @click="showPopover = true">
+      自定义内容
+    </van-button>
+  </template>
+</van-popover>
 ```
 
-`placement` 支持以下值：
+```js
-
+export default {
-```bash
+  data() {
-top           # 顶部中间位置
+    return {
-top-start     # 顶部左侧位置
+      showPopover: false,
-top-end       # 顶部右侧位置
+    };
-left          # 左侧中间位置
+  },
-left-start    # 左侧上方位置
+};
-left-end      # 左侧下方位置
-right         # 右侧中间位置
-right-start   # 右侧上方位置
-right-end     # 右侧下方位置
-bottom        # 底部中间位置
-bottom-start  # 底部左侧位置
-bottom-end    # 底部右侧位置
 ```
 
 ## API
@@ -189,4 +228,5 @@ bottom-end    # 底部右侧位置
 
 | 名称      | 说明                        |
 | --------- | --------------------------- |
+| default   | 自定义菜单内容              |
 | reference | 触发 Popover 显示的元素内容 |

src/popover/demo/index.vue

@@ -27,6 +27,36 @@
       </van-popover>
     </demo-block>
 
+    <demo-block :title="t('placement')">
+      <van-field
+        is-link
+        readonly
+        name="picker"
+        :label="t('choosePlacement')"
+        @click="showPicker = true"
+      />
+
+      <van-popup
+        v-model="showPicker"
+        round
+        position="bottom"
+        get-container="body"
+      >
+        <div class="demo-popover-box">
+          <van-popover
+            v-model="show.placement"
+            :actions="t('shortActions')"
+            :placement="currentPlacement"
+          >
+            <template #reference>
+              <div class="demo-popover-refer" />
+            </template>
+          </van-popover>
+        </div>
+        <van-picker :columns="placements" @change="onPickerChange" />
+      </van-popup>
+    </demo-block>
+
     <demo-block :title="t('actionOptions')">
       <van-popover
         v-model="show.showIcon"
@@ -54,42 +84,33 @@
       </van-popover>
     </demo-block>
 
-    <demo-block :title="t('placement')">
+    <demo-block :title="t('customContent')">
-      <van-field
-        is-link
-        readonly
-        name="picker"
-        :value="currentPlacement"
-        :label="t('choosePlacement')"
-        :placeholder="t('choosePlacement')"
-        @click="showPicker = true"
-      />
-
-      <van-popup
-        v-model="showPicker"
-        round
-        position="bottom"
-        get-container="body"
-      >
-        <van-picker
-          show-toolbar
-          :columns="placements"
-          @confirm="onConfirm"
-          @cancel="showPicker = false"
-        />
-      </van-popup>
-
-      <div class="demo-popover-box">
       <van-popover
-          v-model="show.placement"
+        v-model="show.customContent"
-          :actions="t('shortActions')"
+        placement="top-start"
-          :placement="currentPlacement"
+        style="margin-left: 16px;"
       >
+        <van-grid
+          square
+          clickable
+          :border="false"
+          column-num="3"
+          style="width: 240px;"
+        >
+          <van-grid-item
+            v-for="i in 6"
+            :key="i"
+            icon="photo-o"
+            :text="t('option')"
+            @click="show.customContent = false"
+          />
+        </van-grid>
         <template #reference>
-            <div class="demo-popover-refer" />
+          <van-button type="primary" @click="show.customContent = true">
+            {{ t('customContent') }}
+          </van-button>
         </template>
       </van-popover>
-      </div>
     </demo-block>
   </demo-section>
 </template>
@@ -116,6 +137,7 @@ export default {
       lightTheme: '浅色风格',
       showPopover: '点击弹出气泡',
       actionOptions: '选项配置',
+      customContent: '自定义内容',
       disableAction: '禁用选项',
       choosePlacement: '选择弹出位置',
     },
@@ -142,6 +164,7 @@ export default {
       lightTheme: 'Light Theme',
       showPopover: 'Show Popover',
       actionOptions: 'Action Options',
+      customContent: 'Custom Content',
       disableAction: 'Disable Action',
       choosePlacement: 'Placement',
     },
@@ -154,6 +177,7 @@ export default {
         placement: false,
         darkTheme: false,
         lightTheme: false,
+        customContent: false,
         disableAction: false,
       },
       showPicker: false,
@@ -176,13 +200,11 @@ export default {
   },
 
   methods: {
-    onConfirm(value) {
+    onPickerChange(picker, value) {
-      this.showPicker = false;
-      this.currentPlacement = value;
-
       setTimeout(() => {
         this.show.placement = true;
-      }, 300);
+        this.currentPlacement = value;
+      });
     },
   },
 };
@@ -209,7 +231,7 @@ export default {
   &-box {
     display: flex;
     justify-content: center;
-    margin: 110px 0 80px;
+    margin: 110px 0;
   }
 }
 </style>

src/popover/index.js

@@ -15,7 +15,7 @@ const [createComponent, bem] = createNamespace('popover');
 export default createComponent({
   mixins: [
     ClickOutsideMixin({
-      event: 'click',
+      event: 'touchstart',
       method: 'onClickOutside',
     }),
   ],
@@ -129,9 +129,9 @@ export default createComponent({
       this.$emit('input', value);
     },
 
-    onClick(event) {
+    onTouchstart(event) {
       event.stopPropagation();
-      this.$emit('click', event);
+      this.$emit('touchstart', event);
     },
 
     onClickAction(action, index) {
@@ -180,14 +180,16 @@ export default createComponent({
           lockScroll={false}
           getContainer={this.getContainer}
           onOpen={this.onOpen}
-          onClick={this.onClick}
           onClose={this.onClose}
           onInput={this.onToggle}
           onOpened={this.onOpened}
           onClosed={this.onClosed}
+          nativeOnTouchstart={this.onTouchstart}
         >
           <div class={bem('arrow')} />
-          {this.actions.map(this.renderAction)}
+          <div class={bem('content')}>
+            {this.slots('default') || this.actions.map(this.renderAction)}
+          </div>
         </Popup>
         {this.slots('reference')}
       </span>

src/popover/index.less

@@ -4,7 +4,7 @@
 .van-popover {
   position: absolute;
   overflow: visible;
-  border-radius: @border-radius-lg;
+  background-color: transparent;
   transition: opacity 0.15s, transform 0.15s;
 
   &__wrapper {
@@ -20,6 +20,11 @@
     border-width: 6px;
   }
 
+  &__content {
+    overflow: hidden;
+    border-radius: @border-radius-lg;
+  }
+
   &__action {
     position: relative;
     display: flex;
@@ -191,8 +196,11 @@
 
   &--light {
     color: @text-color;
+
+    .van-popover__content {
       background-color: @white;
       box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
+    }
 
     .van-popover__arrow {
       color: @white;
@@ -215,7 +223,10 @@
 
   &--dark {
     color: @white;
+
+    .van-popover__content {
       background-color: #4a4a4a;
+    }
 
     .van-popover__arrow {
       color: #4a4a4a;