# MyTreeSelect

该组件主要用于永策平台迁移左侧组织树到底部筛选栏，可结合 [webpack loader inject-tree-select](../../../webpack-loader/src/inject-tree-select.js) 使用

[详细需求，请阅读文档](https://doc.weixin.qq.com/doc/w3_AOIAUQYwAKopxcrTeH5TniNZvBnY4?scode=AD4AmwcwAA4KwS515DAOIAUQYwAKo)

## 基本使用

一、子应用全局注册

```js
import { MyTreeSelect } from '@kt/unity-components';

import {
  /* ... */
  TreeSelect
  /* ... */
} from 'ant-design-vue';

// 注册 TreeSelect 为全局组件
app.use(TreeSelect);

// 注册 MyTreeSelect 为全局组件
app.component('my-tree-select', MyTreeSelect);
```

二、子应用注入 my-tree-select 组件方案

1. vue.config.js 配置 loader（推荐）

```js
chainWebpack: config => {
  /* ... */

  config.module
    .rule('vue-mine')
    .after('vue')
    .test(/\.vue$/)
    .use('my-loader')
    .loader('@kt/unity-webpack-loader/inject-tree-select')
    .end()
    .exclude.add([
      /node_modules/
      // path.resolve(__dirname, 'foo.vue'),
    ])
    .end();
  // .include.add([
  //   path.resolve(__dirname, 'foo.vue')
  // ])
  // .end();

  /* ... */
},
```

2. 手写 my-tree-select 占位

在页面上合适的位置写 `<my-tree-select />` 进行占位

三、基座需要定义全局变量让子应用识别

在基座 main.ts 入口文件定义 yc 标志

```js
window.__base_type__ = 'yc';
```
