@moment-design/select-page-dialog

ResourceManagement

选择链接组件

运行环境

名称	版本号
Node.js	15+
NPM	7+
Vue.js	3+
@moment-design/web-vue	1+

API 说明

初始化

参数名	描述	类型	必须	默认值
baseUrl	业务接口域名	() => string	是	-
kshUrl	可视化接口域名	() => string	是	-
errorCallback	云资源请求错误回调	(err) => void	是	-
getToken	请求 token	() => string	是	-

函数调用

参数名	描述	类型	必须	默认值
disabled	禁用路径	PathDetail	否	-
defaultPage	默认选中路径	PathDetail[]	否	-
confirm	回调函数	(PathDetail) => void;	是	-

PathDetail说明：
{
    "name": "首页",
    "link": "",
    "key": "home",
    "wxLink": {
        "name": "home",
        "iosPath": "ZDHomeViewController",
        "path": "pages/home/index",
        "isTab": true,
        "meta": {
            "title": "首页"
        },
        "query": {}
    }
}

使用组件

1. 安装依赖

   npm install @moment-design/select-page-dialog --save

2. 引用组件

   在main.ts中全局引入组件

   import { createApp } from 'vue';
   import app from './App.vue';
   import theLinkManager from '@moment-design/select-page-dialog';
   
   const App = createApp(app);
   App.use(theLinkManager, {
     baseUrl: () => {
       return '';
     },
     kshUrl: () => {
       return '';
     },
     errorCallback: (err) => {
       console.error('=========errorCallback=============', err);
     },
     getToken: () => {
       return '';
     },
   });

3. 函数调用

   <template>
     <m-space>
       <m-button @click="onShow(1)">点击选择链接</m-button>
       <m-button @click="onShow(2)">显示禁用链接</m-button>
       <m-button @click="onShow(3)">显示默认选择链接</m-button></m-space
     >
   
     <p>{{ link1 }}</p>
   </template>
   
   <script lang="ts" setup>
   import { ref } from '@vue/runtime-core';
   import theLinkManager from '@moment-design/select-page-dialog';
   
   const link1 = ref<any>();
   
   const onShow = (index: number): void => {
     theLinkManager.show({
       defaultPage:
         index === 3
           ? {
               name: '首页',
               link: '',
               key: 'home',
               wxLink: {
                 name: 'home',
                 iosPath: 'ZDHomeViewController',
                 path: 'pages/home/index',
                 isTab: true,
                 meta: { title: '首页' },
               },
             }
           : null,
       disabled:
         index === 2
           ? [
               {
                 name: '我的',
                 link: '',
                 key: 'user-center',
                 wxLink: {
                   name: 'user-center',
                   path: 'pages/user/center/index',
                   iosPath: 'ZDMyViewController',
                   isTab: true,
                   meta: { title: '我的' },
                 },
               },
               {
                 name: '购物车',
                 link: '',
                 key: 'shopping-cart-for-tabbar',
                 wxLink: {
                   name: 'shopping-cart-for-tabbar',
                   path: 'pages/product/shopping-cart-for-tabbar/index',
                   isTab: true,
                   iosPath: 'ZDShopCartViewController',
                   meta: { title: '购物车' },
                 },
               },
             ]
           : [],
       confirm: (res: any) => {
         link1.value = res;
       },
     });
   };
   </script>