fix: Popover Demo 展示修改 (#1976)

* fix: 地址icon修改

* fix: 组件icon问题修改

* fix: 地址组件修改

* fix: 地址删除props

* feat: 组件dts修改

* fix: 组件Tour和Audio添加依赖

Co-authored-by: yangxiaolu3 <yangxiaolu3@jd.com>

src/packages/__VUE/popover/demo.vue

@@ -57,21 +57,22 @@
     <h2>{{ translate('title3') }}</h2>
 
     <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
-    <nut-picker
-      v-model:visible="showPicker"
-      :columns="columns"
-      title=""
-      @change="change"
-      :swipe-duration="500"
-      @confirm="closePicker"
-      @close="closePicker"
-    >
-      <template #top>
-        <div class="brickBox">
-          <div class="brick" id="pickerTarget"></div>
-        </div>
-      </template>
-    </nut-picker>
+    <nut-popup position="bottom" v-model:visible="showPicker">
+      <nut-picker
+        :columns="columns"
+        title=""
+        @change="change"
+        :swipe-duration="500"
+        @confirm="closePicker"
+        @close="closePicker"
+      >
+        <template #top>
+          <div class="brickBox">
+            <div class="brick" id="pickerTarget"></div>
+          </div>
+        </template>
+      </nut-picker>
+    </nut-popup>
 
     <nut-popover
       v-model:visible="customPositon"
@@ -289,6 +290,7 @@ export default createDemo({
 
     const closePicker = () => {
       state.customPositon = false;
+      state.showPicker = false;
     };
 
     return {

src/packages/__VUE/tour/index.taro.vue

@@ -21,7 +21,7 @@
           :offset="step.popoverOffset || [0, 12]"
           :arrowOffset="step.arrowOffset || 0"
         >
-          <template #content>
+          <template v-slot:content>
             <slot>
               <view class="nut-tour-content" v-if="type == 'step'">
                 <view class="nut-tour-content-top">

src/sites/mobile-taro/vue/src/exhibition/pages/popover/index.vue

@@ -54,13 +54,16 @@
 
     <h2>位置自定义</h2>
     <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
-    <nut-picker v-model:visible="showPicker" :columns="columns" title="" @change="change" :swipe-duration="500">
-      <template #top>
-        <div class="brickBox">
-          <div class="brick" id="pickerTarget"></div>
-        </div>
-      </template>
-    </nut-picker>
+
+    <nut-popup position="bottom" v-model:visible="showPicker">
+      <nut-picker :columns="columns" title="" @change="change" :swipe-duration="500" @confirm="closePicker">
+        <template #top>
+          <div class="brickBox">
+            <div class="brick" id="pickerTarget"></div>
+          </div>
+        </template>
+      </nut-picker>
+    </nut-popup>
 
     <nut-popover
       v-model:visible="customPositon"
@@ -239,6 +242,11 @@ export default {
       state.customTarget = !state.customTarget;
     };
 
+    const closePicker = () => {
+      state.customPositon = false;
+      state.showPicker = false;
+    };
+
     return {
       iconItemList,
       itemList,
@@ -252,7 +260,8 @@ export default {
       change,
       handlePicker,
       clickCustomHandle,
-      renderIcon
+      renderIcon,
+      closePicker
     };
   }
 };