flymopet-vec/README.md

基于element-plus二次开发的公共业务组件。方便统一维护，实现。

# flymopet-vec

基于element-plus二次开发的公共业务组件。方便统一维护，实现。

vec（Vue Element Component）缩写

## 安装

```bash
npm i flymopet-vec
// 或者
yarn add flymopet-vec
```

## 使用

### 全局注册
```js
import { createApp } from 'vue'
import App from '../demo/App.vue'

import flymopetVEC from 'flymopet-vec'
import 'flymopet-vec/style.css'

const app = createApp(App)
app.use(flymopetVEC)
 app.mount('#app')
```

### table钩子函数使用

```js
import {
    useTableMethods
} from 'flymopet-vec'

export default defineComponent({
    name: 'ProTableDemo',
    setup() {
        const { tbRef, actionQuery, rowClickSelection, countSelectionRows } = useTableMethods()
        return {
            tbRef
        }
    }
})
```

## utils 工具函数
```js
import {
    localCache,
} from 'flymopet-vec'

localCache.set('key', 'value')
```

## 路由配置说明
```js
{
    // 路径，子级需要定义全量路劲 必填
    path: '/stock',
    // https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive
    // 路由名需要唯一 必填
    // 注意: 如果要缓存该组件，name值必须和组件的name值完全一致
    name: '',
    // 组件 必须采用懒加载模式
    // component: Layout,
    component: () => import('@/views/xxx/index.vue'),
    // 重定向
    redirect: '/stock/stockMgmt/skuStock',
    meta: {
        title: '', // 标题 必填
        blank: 'http://baidu.com', // 外部链接: 有值; 无值;
        hidden: false, // 菜单中隐藏: 是:true; 否:false; 选填
        cache: false, // 缓存该组件: 是:true; 否:false;
        tagView: false, // 出现在 tagsView 栏上: 是:false; 否:true;
        fixed: false, // 固定在 tagsView 栏上: 是:true; 否:false;
        iframe: false, // 是否内嵌窗口: 是:true; 否:false;
        roles: [], // 能访问的角色表
        requireAuth: true, // 为true则是需要登录权限
        icon: CustomIconComponent, // 图标: 组件
        iconSize: '', // 图标的大小
    },
    // 子级路由
    children: [
        // 嵌套的过度路由
        {
            path: '/stock/stockMgmt',
            name: '',
            component: NestedRouteView,
            meta: { title: '' },
            // 子级路由
            children: [
                {
                    path: '/stock/stockMgmt/skuStock',
                    name: '',
                    component: () => import('@/views/xxx/index.vue'),
                    meta: { title: 'SKU库存管理' }
                },
            ],
        },
    ],
} 
```

## 封装的组件

- ProTable