widget.qw 1.0.0 → 1.0.1

package/build/style.css

@@ -762,25 +762,25 @@
   margin:3px;
 }
 
-.cascader-pop[data-v-08539c1e] {
+.cascader-pop[data-v-54dee272] {
     width: 100%;
     overflow: hidden;
 }
-.cascader-selector[data-v-08539c1e] {
+.cascader-selector[data-v-54dee272] {
     padding: 10px;
 }
-.search-buttons[data-v-08539c1e] {
+.search-buttons[data-v-54dee272] {
     display: flex;
     gap: 10px;
 }
-.clear-btn[data-v-08539c1e] {
+.clear-btn[data-v-54dee272] {
     background-color: #f2f3f5;
     border: none;
     border-radius: 4px;
     padding: 4px 8px;
     font-size: 14px;
 }
-.confirm-btn[data-v-08539c1e] {
+.confirm-btn[data-v-54dee272] {
     background-color: #1989fa;
     color: white;
     border: none;
@@ -788,19 +788,19 @@
     padding: 4px 8px;
     font-size: 14px;
 }
-.no-results[data-v-08539c1e] {
+.no-results[data-v-54dee272] {
     text-align: center;
     padding: 20px;
     color: #969799;
 }
-.cascader-header[data-v-08539c1e] {
+.cascader-header[data-v-54dee272] {
     padding: 10px;
     border-bottom: 1px solid #ebedf0;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
-.current-path[data-v-08539c1e] {
+.current-path[data-v-54dee272] {
     flex: 1;
     font-size: 14px;
     color: #323233;
@@ -808,25 +808,25 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.header-right[data-v-08539c1e] {
+.header-right[data-v-54dee272] {
     display: flex;
     gap: 8px;
     margin-left: auto;
 }
-.cancel-btn[data-v-08539c1e] {
+.cancel-btn[data-v-54dee272] {
     color: #969799;
     margin-right: 5px;
 }
-.scroll-container[data-v-08539c1e] {
+.scroll-container[data-v-54dee272] {
     height: calc(80vh - 150px);
     overflow-y: auto;
 }
-.cell-content[data-v-08539c1e] {
+.cell-content[data-v-54dee272] {
     display: flex;
     align-items: center;
     gap: 12px;
 }
-.circle-selector[data-v-08539c1e] {
+.circle-selector[data-v-54dee272] {
     width: 20px;
     height: 20px;
     border-radius: 50%;
@@ -836,29 +836,29 @@
     transition: all 0.2s;
     flex-shrink: 0;
 }
-.circle-selector.selected[data-v-08539c1e] {
+.circle-selector.selected[data-v-54dee272] {
     background-color: #1989fa;
     border-color: #1989fa;
 }
-.circle-selector.selected .van-icon[data-v-08539c1e] {
+.circle-selector.selected .van-icon[data-v-54dee272] {
     color: white;
     font-size: 14px;
 }
-.van-cell__right-icon[data-v-08539c1e] {
+.van-cell__right-icon[data-v-54dee272] {
     color: #969799;
     font-size: 16px;
     margin-left: 8px;
 }
-.name[data-v-08539c1e] {
+.name[data-v-54dee272] {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.cancel-btn[data-v-08539c1e] {
+.cancel-btn[data-v-54dee272] {
     color: #969799;
 }
 
-.user[data-v-f30fa640]{
+.user[data-v-50c3a19a]{
   padding:4px 8px;
 }

package/build/widget.qw.es.js

@@ -20569,7 +20569,7 @@ const _sfc_main$2 = {
   }
 };
 var TreePicker = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-6744b874"]]);
-var CascaderPop_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.cascader-pop[data-v-08539c1e] {\r\n    width: 100%;\r\n    overflow: hidden;\n}\n.cascader-selector[data-v-08539c1e] {\r\n    padding: 10px;\n}\n.search-buttons[data-v-08539c1e] {\r\n    display: flex;\r\n    gap: 10px;\n}\n.clear-btn[data-v-08539c1e] {\r\n    background-color: #f2f3f5;\r\n    border: none;\r\n    border-radius: 4px;\r\n    padding: 4px 8px;\r\n    font-size: 14px;\n}\n.confirm-btn[data-v-08539c1e] {\r\n    background-color: #1989fa;\r\n    color: white;\r\n    border: none;\r\n    border-radius: 4px;\r\n    padding: 4px 8px;\r\n    font-size: 14px;\n}\n.no-results[data-v-08539c1e] {\r\n    text-align: center;\r\n    padding: 20px;\r\n    color: #969799;\n}\n.cascader-header[data-v-08539c1e] {\r\n    padding: 10px;\r\n    border-bottom: 1px solid #ebedf0;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\n}\n.current-path[data-v-08539c1e] {\r\n    flex: 1;\r\n    font-size: 14px;\r\n    color: #323233;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\n}\n.header-right[data-v-08539c1e] {\r\n    display: flex;\r\n    gap: 8px;\r\n    margin-left: auto;\n}\n.cancel-btn[data-v-08539c1e] {\r\n    color: #969799;\r\n    margin-right: 5px;\n}\n.scroll-container[data-v-08539c1e] {\r\n    height: calc(80vh - 150px);\r\n    overflow-y: auto;\n}\n.cell-content[data-v-08539c1e] {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\n}\n.circle-selector[data-v-08539c1e] {\r\n    width: 20px;\r\n    height: 20px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: all 0.2s;\r\n    flex-shrink: 0;\n}\n.circle-selector.selected[data-v-08539c1e] {\r\n    background-color: #1989fa;\r\n    border-color: #1989fa;\n}\n.circle-selector.selected .van-icon[data-v-08539c1e] {\r\n    color: white;\r\n    font-size: 14px;\n}\n.van-cell__right-icon[data-v-08539c1e] {\r\n    color: #969799;\r\n    font-size: 16px;\r\n    margin-left: 8px;\n}\n.name[data-v-08539c1e] {\r\n    flex: 1;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\n}\n.cancel-btn[data-v-08539c1e] {\r\n    color: #969799;\n}\r\n")();
+var CascaderPop_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.cascader-pop[data-v-54dee272] {\r\n    width: 100%;\r\n    overflow: hidden;\n}\n.cascader-selector[data-v-54dee272] {\r\n    padding: 10px;\n}\n.search-buttons[data-v-54dee272] {\r\n    display: flex;\r\n    gap: 10px;\n}\n.clear-btn[data-v-54dee272] {\r\n    background-color: #f2f3f5;\r\n    border: none;\r\n    border-radius: 4px;\r\n    padding: 4px 8px;\r\n    font-size: 14px;\n}\n.confirm-btn[data-v-54dee272] {\r\n    background-color: #1989fa;\r\n    color: white;\r\n    border: none;\r\n    border-radius: 4px;\r\n    padding: 4px 8px;\r\n    font-size: 14px;\n}\n.no-results[data-v-54dee272] {\r\n    text-align: center;\r\n    padding: 20px;\r\n    color: #969799;\n}\n.cascader-header[data-v-54dee272] {\r\n    padding: 10px;\r\n    border-bottom: 1px solid #ebedf0;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\n}\n.current-path[data-v-54dee272] {\r\n    flex: 1;\r\n    font-size: 14px;\r\n    color: #323233;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\n}\n.header-right[data-v-54dee272] {\r\n    display: flex;\r\n    gap: 8px;\r\n    margin-left: auto;\n}\n.cancel-btn[data-v-54dee272] {\r\n    color: #969799;\r\n    margin-right: 5px;\n}\n.scroll-container[data-v-54dee272] {\r\n    height: calc(80vh - 150px);\r\n    overflow-y: auto;\n}\n.cell-content[data-v-54dee272] {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\n}\n.circle-selector[data-v-54dee272] {\r\n    width: 20px;\r\n    height: 20px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: all 0.2s;\r\n    flex-shrink: 0;\n}\n.circle-selector.selected[data-v-54dee272] {\r\n    background-color: #1989fa;\r\n    border-color: #1989fa;\n}\n.circle-selector.selected .van-icon[data-v-54dee272] {\r\n    color: white;\r\n    font-size: 14px;\n}\n.van-cell__right-icon[data-v-54dee272] {\r\n    color: #969799;\r\n    font-size: 16px;\r\n    margin-left: 8px;\n}\n.name[data-v-54dee272] {\r\n    flex: 1;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\n}\n.cancel-btn[data-v-54dee272] {\r\n    color: #969799;\n}\r\n")();
 const _hoisted_1 = {
   class: "cascader-selector"
 };
@@ -20803,8 +20803,8 @@ const _sfc_main$1 = {
     };
   }
 };
-var CascaderPop = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-08539c1e"]]);
-var CascaderPicker_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.user[data-v-f30fa640]{\r\n  padding:4px 8px;\n}\r\n")();
+var CascaderPop = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-54dee272"]]);
+var CascaderPicker_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.user[data-v-50c3a19a]{\r\n  padding:4px 8px;\n}\r\n")();
 const _sfc_main = {
   __name: "CascaderPicker",
   props: {
@@ -20923,7 +20923,7 @@ const _sfc_main = {
     };
   }
 };
-var CascaderPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f30fa640"]]);
+var CascaderPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-50c3a19a"]]);
 const secret_notify = () => {
   showNotify({ type: "danger", message: "\u4E25\u683C\u6267\u884C\u4FE1\u606F\u4FDD\u5BC6\u8981\u6C42\uFF0C\u5207\u5B9E\u9632\u8303\u4F01\u4E1A\u6CC4\u5BC6\u98CE\u9669", duration: 3e3 });
 };
@@ -21036,6 +21036,10 @@ const components = [
     name: "WidgetQwTreePicker",
     widget: TreePicker
   },
+  {
+    name: "WidgetQwCascaderPop",
+    widget: CascaderPop
+  },
   {
     name: "WidgetQwCascaderPicker",
     widget: CascaderPicker

package/build/widget.qw.umd.js

@@ -20572,7 +20572,7 @@ var __async = (__this, __arguments, generator) => {
     }
   };
   var TreePicker = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-6744b874"]]);
-  var CascaderPop_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.cascader-pop[data-v-08539c1e] {\r\n    width: 100%;\r\n    overflow: hidden;\n}\n.cascader-selector[data-v-08539c1e] {\r\n    padding: 10px;\n}\n.search-buttons[data-v-08539c1e] {\r\n    display: flex;\r\n    gap: 10px;\n}\n.clear-btn[data-v-08539c1e] {\r\n    background-color: #f2f3f5;\r\n    border: none;\r\n    border-radius: 4px;\r\n    padding: 4px 8px;\r\n    font-size: 14px;\n}\n.confirm-btn[data-v-08539c1e] {\r\n    background-color: #1989fa;\r\n    color: white;\r\n    border: none;\r\n    border-radius: 4px;\r\n    padding: 4px 8px;\r\n    font-size: 14px;\n}\n.no-results[data-v-08539c1e] {\r\n    text-align: center;\r\n    padding: 20px;\r\n    color: #969799;\n}\n.cascader-header[data-v-08539c1e] {\r\n    padding: 10px;\r\n    border-bottom: 1px solid #ebedf0;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\n}\n.current-path[data-v-08539c1e] {\r\n    flex: 1;\r\n    font-size: 14px;\r\n    color: #323233;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\n}\n.header-right[data-v-08539c1e] {\r\n    display: flex;\r\n    gap: 8px;\r\n    margin-left: auto;\n}\n.cancel-btn[data-v-08539c1e] {\r\n    color: #969799;\r\n    margin-right: 5px;\n}\n.scroll-container[data-v-08539c1e] {\r\n    height: calc(80vh - 150px);\r\n    overflow-y: auto;\n}\n.cell-content[data-v-08539c1e] {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\n}\n.circle-selector[data-v-08539c1e] {\r\n    width: 20px;\r\n    height: 20px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: all 0.2s;\r\n    flex-shrink: 0;\n}\n.circle-selector.selected[data-v-08539c1e] {\r\n    background-color: #1989fa;\r\n    border-color: #1989fa;\n}\n.circle-selector.selected .van-icon[data-v-08539c1e] {\r\n    color: white;\r\n    font-size: 14px;\n}\n.van-cell__right-icon[data-v-08539c1e] {\r\n    color: #969799;\r\n    font-size: 16px;\r\n    margin-left: 8px;\n}\n.name[data-v-08539c1e] {\r\n    flex: 1;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\n}\n.cancel-btn[data-v-08539c1e] {\r\n    color: #969799;\n}\r\n")();
+  var CascaderPop_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.cascader-pop[data-v-54dee272] {\r\n    width: 100%;\r\n    overflow: hidden;\n}\n.cascader-selector[data-v-54dee272] {\r\n    padding: 10px;\n}\n.search-buttons[data-v-54dee272] {\r\n    display: flex;\r\n    gap: 10px;\n}\n.clear-btn[data-v-54dee272] {\r\n    background-color: #f2f3f5;\r\n    border: none;\r\n    border-radius: 4px;\r\n    padding: 4px 8px;\r\n    font-size: 14px;\n}\n.confirm-btn[data-v-54dee272] {\r\n    background-color: #1989fa;\r\n    color: white;\r\n    border: none;\r\n    border-radius: 4px;\r\n    padding: 4px 8px;\r\n    font-size: 14px;\n}\n.no-results[data-v-54dee272] {\r\n    text-align: center;\r\n    padding: 20px;\r\n    color: #969799;\n}\n.cascader-header[data-v-54dee272] {\r\n    padding: 10px;\r\n    border-bottom: 1px solid #ebedf0;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\n}\n.current-path[data-v-54dee272] {\r\n    flex: 1;\r\n    font-size: 14px;\r\n    color: #323233;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\n}\n.header-right[data-v-54dee272] {\r\n    display: flex;\r\n    gap: 8px;\r\n    margin-left: auto;\n}\n.cancel-btn[data-v-54dee272] {\r\n    color: #969799;\r\n    margin-right: 5px;\n}\n.scroll-container[data-v-54dee272] {\r\n    height: calc(80vh - 150px);\r\n    overflow-y: auto;\n}\n.cell-content[data-v-54dee272] {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\n}\n.circle-selector[data-v-54dee272] {\r\n    width: 20px;\r\n    height: 20px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: all 0.2s;\r\n    flex-shrink: 0;\n}\n.circle-selector.selected[data-v-54dee272] {\r\n    background-color: #1989fa;\r\n    border-color: #1989fa;\n}\n.circle-selector.selected .van-icon[data-v-54dee272] {\r\n    color: white;\r\n    font-size: 14px;\n}\n.van-cell__right-icon[data-v-54dee272] {\r\n    color: #969799;\r\n    font-size: 16px;\r\n    margin-left: 8px;\n}\n.name[data-v-54dee272] {\r\n    flex: 1;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\n}\n.cancel-btn[data-v-54dee272] {\r\n    color: #969799;\n}\r\n")();
   const _hoisted_1 = {
     class: "cascader-selector"
   };
@@ -20806,8 +20806,8 @@ var __async = (__this, __arguments, generator) => {
       };
     }
   };
-  var CascaderPop = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-08539c1e"]]);
-  var CascaderPicker_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.user[data-v-f30fa640]{\r\n  padding:4px 8px;\n}\r\n")();
+  var CascaderPop = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-54dee272"]]);
+  var CascaderPicker_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.user[data-v-50c3a19a]{\r\n  padding:4px 8px;\n}\r\n")();
   const _sfc_main = {
     __name: "CascaderPicker",
     props: {
@@ -20926,7 +20926,7 @@ var __async = (__this, __arguments, generator) => {
       };
     }
   };
-  var CascaderPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f30fa640"]]);
+  var CascaderPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-50c3a19a"]]);
   const secret_notify = () => {
     showNotify({ type: "danger", message: "\u4E25\u683C\u6267\u884C\u4FE1\u606F\u4FDD\u5BC6\u8981\u6C42\uFF0C\u5207\u5B9E\u9632\u8303\u4F01\u4E1A\u6CC4\u5BC6\u98CE\u9669", duration: 3e3 });
   };
@@ -21039,6 +21039,10 @@ var __async = (__this, __arguments, generator) => {
       name: "WidgetQwTreePicker",
       widget: TreePicker
     },
+    {
+      name: "WidgetQwCascaderPop",
+      widget: CascaderPop
+    },
     {
       name: "WidgetQwCascaderPicker",
       widget: CascaderPicker

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "widget.qw",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "marqstree Vue3组件库",
   "main": "build/widget.qw.es.js",
   "keywords": [

package/src/components/CascaderPicker.vue

@@ -18,9 +18,9 @@
 </template>
 <script setup>
 import { reactive, onMounted, watch } from "vue";
-import util from "../util"
+import util from "@/util"
 import { useVModel } from '@vueuse/core'
-import CascaderPop from './widget/CascaderPop.vue'
+import CascaderPop from './CascaderPop.vue'
 
 const props = defineProps({
     modelValue: {

package/src/components/{widget/CascaderPop.vue → CascaderPop.vue}

@@ -49,7 +49,7 @@
 
 <script setup>
 import { ref, onMounted, watch, reactive, computed } from "vue";
-import util from "../../util"
+import util from "@/util"
 import { useVModel } from '@vueuse/core'
 
 const props = defineProps({

package/src/components/index.js

@@ -27,6 +27,7 @@ import ProjectDropdown from "./ProjectDropdown.vue";
 import Switch from './Switch.vue'
 import Sheet from './Sheet.vue'
 import TreePicker from './TreePicker.vue'
+import CascaderPop from './CascaderPop.vue'
 import CascaderPicker from './CascaderPicker.vue'
 
 const components = [
@@ -138,6 +139,10 @@ const components = [
     name: 'WidgetQwTreePicker',
     widget: TreePicker
   },
+  {
+    name: 'WidgetQwCascaderPop',
+    widget: CascaderPop
+  },
   {
     name: 'WidgetQwCascaderPicker',
     widget: CascaderPicker

package/src/router/index.ts

@@ -150,6 +150,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "treepicker",
     component: () => import("../views/treepicker/index.vue"),
   },
+  {
+    path: "/cascaderpop",
+    name: "cascaderpop",
+    component: () => import("../views/cascaderpop/index.vue"),
+  },
   {
     path: "/cascaderpicker",
     name: "cascaderpicker",

package/src/views/cascaderpop/index.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="page">
+        <van-button @click="data.isShow=true">弹出</van-button>
+        <widget-qw-cascader-pop v-model="data.id" v-model:show="data.isShow" 
+            label="零件" placeholder="请选择零件"
+            :queryNodes="queryNodes" :queryNode="queryNode" @select="onSelect" />
+    </div>
+</template>
+
+<script setup>
+import { onMounted, reactive, watch } from "vue";
+import util from '@/util'
+
+const data = reactive({
+    auth: 'require',
+    id: '',
+    isShow: false,
+    projectId: 'GnsMl3mO'
+})
+
+const queryNodes = async (params, setNodes) => {
+    if (!data.projectId)
+        return
+
+    let p = {
+        projectId: data.projectId,
+        hasChildren: false
+    }
+
+    if (params.keyword)
+        p.keyword = params.keyword
+
+    if (params.parentId)
+        p.parentId = params.parentId
+
+    let res = await util.part_children(p)
+    if (res.code != 200)
+        return
+
+    let formatNodes = res.data.map(item => {
+        return {
+            id: item.id,
+            label: item.formatName,
+            formatLabel: item.path,
+            hasChildren: item.hasChildren,
+            data: item
+        }
+    })
+    setNodes(formatNodes)
+}
+
+const queryNode = async (setNode) => {
+    let params = {
+        id: data.id
+    }
+    let res = await util.part_detail(params)
+    if (res.code != 200)
+        return
+
+    let formatNode = {
+        id: res.data.id,
+        label: res.data.formatName,
+        formatLabel: item.path,
+        hasChildren: res.data.hasChildren,
+        data: res.data
+    }
+    setNode(formatNode)
+}
+
+const onSelect=(node)=>{
+    console.log('onSelect',node)
+}
+
+watch(() => data.id, (newVal, oldVal) => {
+    console.log(newVal, oldVal)
+})
+</script>
+
+<style lang="scss" scoped>
+.page {
+    height: 100vh;
+    background: #fff;
+    text-align: center;
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding: 80px 15px 0 15px;
+    box-sizing: border-box;
+}
+</style>

package/src/views/home/index.vue

@@ -32,6 +32,7 @@
     <van-button class="btn" type="primary" @click="router.push('/switch')">开关</van-button>
     <van-button class="btn" type="primary" @click="router.push('/sheet')">表格</van-button>
     <van-button class="btn" type="primary" @click="router.push('/treepicker')">树选择器</van-button>
+    <van-button class="btn" type="primary" @click="router.push('/cascaderpop')">级联弹出层</van-button>
     <van-button class="btn" type="primary" @click="router.push('/cascaderpicker')">级联选择器</van-button>
   </div>
 </template>