docs(Popover): add choose placement demo

src/popover/README.zh-CN.md

@@ -28,7 +28,7 @@ Vue.use(Popover);
 | v-model | 是否展示气泡弹出层 | _boolean_ | `false` |
 | actions | 选项列表 | _Action[]_ | `[]` |
 | placement | 弹出位置 | _string_ | - |
-| theme | 主题风格，可选值为 `light` | _string_ | `dark` |
+| theme | 主题风格，可选值为 `dark` | _string_ | `light` |
 | text-color | 自定义文字颜色 | _string_ | - |
 | background-color | 自定义背景颜色 | _string_ | - |
 | overlay | 是否显示遮罩层 | _boolean_ | `false` |

src/popover/demo/index.vue

@@ -2,27 +2,62 @@
   <demo-section>
     <demo-block :title="t('basicUsage')">
       <van-popover
-        v-model="show.basic"
+        v-model="show.lightTheme"
         :actions="t('actions')"
         placement="bottom"
-      >
+        style="margin-left: 16px;"
-        <van-button type="primary" @click="show.basic = true">
-          {{ t('showPopover') }}
-        </van-button>
-      </van-popover>
-    </demo-block>
-
-    <demo-block :title="t('lightTheme')">
-      <van-popover
-        v-model="show.lightTheme"
-        theme="light"
-        :actions="t('actions')"
-        placement="right-end"
       >
         <van-button type="primary" @click="show.lightTheme = true">
           {{ t('lightTheme') }}
         </van-button>
       </van-popover>
+      <van-popover
+        v-model="show.darkTheme"
+        theme="dark"
+        :actions="t('actions')"
+        placement="bottom"
+        style="margin-left: 16px;"
+      >
+        <van-button type="primary" @click="show.darkTheme = true">
+          {{ t('darkTheme') }}
+        </van-button>
+      </van-popover>
+    </demo-block>
+
+    <demo-block :title="t('placement')">
+      <van-field
+        is-link
+        readonly
+        name="picker"
+        :value="currentPlacement"
+        :label="t('choosePlacement')"
+        :placeholder="t('placeholder')"
+        @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
+          :value="true"
+          :actions="t('actions')"
+          :placement="currentPlacement"
+        >
+          <div class="demo-popover-refer" />
+        </van-popover>
+      </div>
     </demo-block>
   </demo-section>
 </template>
@@ -32,26 +67,54 @@ export default {
   i18n: {
     'zh-CN': {
       actions: [{ text: '文本' }, { text: '文本' }, { text: '文本' }],
+      placement: '弹出位置',
+      darkTheme: '深色风格',
       lightTheme: '浅色风格',
       showPopover: '点击弹出气泡',
+      choosePlacement: '选择弹出位置',
     },
     'en-US': {
       actions: [{ text: 'Text' }, { text: 'Text' }, { text: 'Text' }],
+      placement: 'Placement',
+      darkTheme: 'Dark Theme',
       lightTheme: 'Light Theme',
       showPopover: 'Show Popover',
+      choosePlacement: 'Choose Placement',
     },
   },
 
   data() {
     return {
       show: {
-        basic: false,
+        placement: false,
+        darkTheme: false,
         lightTheme: false,
       },
+      showPicker: false,
+      currentPlacement: 'top',
+      placements: [
+        'top',
+        'top-start',
+        'top-end',
+        'left',
+        'left-start',
+        'left-end',
+        'right',
+        'right-start',
+        'right-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+      ],
     };
   },
 
-  methods: {},
+  methods: {
+    onConfirm(value) {
+      this.showPicker = false;
+      this.currentPlacement = value;
+    },
+  },
 };
 </script>
 
@@ -59,8 +122,24 @@ export default {
 @import '../../style/var';
 
 .demo-popover {
-  .van-popover__wrapper {
+  &-refer {
-    margin-left: @padding-md;
+    width: 60px;
+    height: 60px;
+    background-color: @blue;
+    border-radius: 8px;
+  }
+
+  .van-field {
+    width: auto;
+    margin: 0 12px;
+    overflow: hidden;
+    border-radius: 8px;
+  }
+
+  &-box {
+    display: flex;
+    justify-content: center;
+    margin-top: 160px;
   }
 }
 </style>

src/popover/index.js

@@ -30,7 +30,7 @@ export default createComponent({
     },
     theme: {
       type: String,
-      default: 'dark',
+      default: 'light',
     },
     actions: {
       type: Array,
@@ -49,6 +49,8 @@ export default createComponent({
   },
 
   watch: {
+    placement: 'updateLocation',
+
     value(value) {
       if (value) {
         this.updateLocation();
@@ -93,6 +95,11 @@ export default createComponent({
       this.$emit('input', value);
     },
 
+    onClick(event) {
+      event.stopPropagation();
+      this.$emit('click', event);
+    },
+
     onClickAction(action, index) {
       this.$emit('select', action, index);
 
@@ -115,11 +122,12 @@ export default createComponent({
           style={this.location}
           class={bem([this.theme, `placement-${this.placement}`])}
           overlay={this.overlay}
-          position=""
+          position={null}
           transition="van-popover-zoom"
           lockScroll={false}
           getContainer={this.getContainer}
           onInput={this.onToggle}
+          onClick={this.onClick}
         >
           <div class={bem('arrow')} />
           {this.actions.map(this.renderAction)}

src/style/demo/index.vue

@@ -104,7 +104,7 @@ export default {
     height: 100px;
     margin: -50px 0 0 -50px;
     background-color: @blue;
-    border-radius: 3px;
+    border-radius: 8px;
   }
 }
 </style>