修改工种选择方式

src/main.js

@@ -35,7 +35,7 @@ import {
   Progress,
   Skeleton,
   Tag,
-  Popup
+  Popover
 } from "vant";
 
 window.$_http = axios;
@@ -66,7 +66,7 @@ Vue.component("VanProgress", Progress);
 Vue.component("VanCellGroup", CellGroup);
 Vue.component("VanSkeleton", Skeleton);
 Vue.component("VanTag", Tag);
-Vue.component("vanPopup", Popup);
+Vue.component("vanPopover", Popover);
 
 Object.entries(filters).forEach(([key, value]) => {
   Vue.filter(key, value);

src/styles/vant.scss

@@ -75,3 +75,8 @@
     display: none;
   }
 }
+
+/*修改popover宽度*/
+.van-popover__action {
+  width: 8rem;
+}

src/views/home/person/page-person.vue

@@ -27,21 +27,21 @@
             <span class="todayScoreNum">{{ todayPoints }}</span>
           </div>
         </div>
-        <div class="dropdown-div" @click="isShowPopup = true">
-          {{ engineeringWorkChooseValue }}
-          <van-icon name="arrow-down" />
-          <!-- <van-dropdown-menu active-color="#1989fa">
-            <van-dropdown-item
-              v-model="engineeringWorkChooseValue"
-              :options="engineeringWorkList"
-              :title="
-                engineeringWorkChooseValue
-                  ? engineeringWorkChooseValue.text
-                  : '工种选择'
-              "
-              @change="handleChangeEngneeringWorkFun"
-            />
-          </van-dropdown-menu> -->
+        <div class="dropdown-div">
+          <van-popover
+            v-model="isShowPopup"
+            trigger="click"
+            theme="dark"
+            placement="bottom-end"
+            :actions="engineeringWorkList"
+            @select="handleSelecte"
+            class="personEngineeringWork"
+          >
+            <template #reference>
+              {{ engineeringWorkChooseValue }}
+              <van-icon name="arrow-down" />
+            </template>
+          </van-popover>
         </div>
       </div>
     </div>
@@ -80,17 +80,6 @@
         </div>
       </div>
     </div>
-
-    <van-popup v-model="isShowPopup" position="bottom" style="height:40%">
-      <div
-        class="popup-engineeringWork-item"
-        v-for="(item, index) in engineeringWorkList"
-        :key="index"
-        @click="handleChangeEngneeringWorkFun(item.value)"
-      >
-        {{ item.text }}
-      </div>
-    </van-popup>
   </div>
 </template>
 
@@ -193,6 +182,9 @@ export default {
           this.$store.commit("toggleLoading", false);
         });
     },
+    handleSelecte(item) {
+      this.handleChangeEngneeringWorkFun(item.value);
+    },
     // 操作：选择了工种
     handleChangeEngneeringWorkFun(value) {
       console.log(value);