npm package: @moment-design/select-page-dialog
Description: 选择链接组件
Latest version: 0.1.7

# 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; | 是   | -      |

```typescript
PathDetail说明：
{
    "name": "首页",
    "link": "",
    "key": "home",
    "wxLink": {
        "name": "home",
        "iosPath": "ZDHomeViewController",
        "path": "pages/home/index",
        "isTab": true,
        "meta": {
            "title": "首页"
        },
        "query": {}
    }
}
```



## 使用组件

1. 安装依赖

   ```bash
   npm install @moment-design/select-page-dialog --save
   ```

2. 引用组件

   在`main.ts`中全局引入组件

   ```typescript
   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. 函数调用

   ```typescript
   <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>
   
   ```