vue-qeelyn-components

vue-qeelyn-components

所有qeelyn vue web项目 的vue处理公共部分 iview 已升级到4.x版本

获取方式

npm install vue-qeelyn-components --save

公共部分

1. iview-components  (iview公共组件库)
2. util  （基础工具、excel处理）
3. vuex  （vuex 公共部分的库）

替换iview 上的控件

说明：目前大部分都还是根据ivieiw上的文档继续执行不会改变iview源码，而是对源码对应的控件进行替换成本项目的控件进行设置。但api会增加不会改变原来iview的文档

使用位置 -> admin.js

import doInputNumber from 'vue-qeelyn-components/iview-components/doInputNumber'
// 在Vue.use(iView)下方增加引入,InputNumber对应iview的控件命名这样项目内会自己替换掉
Vue.component('InputNumber', doInputNumber);

目前替换的控件

1.InputNumber  //主要处理控件输入的值问题
2.Table        //主要添加了自定义表头数据展示的功能

组件库 调用方式

在 *.vue中使用

import Header from "vue-qeelyn-components/iview-components/header";
export default {
    components: {
        LayoutHeader: Header   //担心冲突就这样写  不担心直接放入Header
    },
    ...
}

util 调用方式

util 基础工具

import Util from "vue-qeelyn-components/util";

引入api 配合的 sign 处理

• 默认在页面入口controller设置Cookie http.js 就会帮你处理sign

ctx.cookies.set('appkey', 'test_key');

vuex 调用方式

在 store.js 中使用

import qeelynModules from "vue-qeelyn-components/vuex";
import othenModules from "..."; //外部项目vuex
let modules = Object.assign(qeelynModules,othenModules);
export default new Vuex.Store({
    ...
    modules,
    ...
})

在main.js中，store设置uid与orgId

store.dispatch('qeelynLocal/setUid', window.eggUid);
store.dispatch('qeelynLocal/setOrgId',window.eggOrgId);
store.dispatch('qeelynLocal/setLoginOrgId',window.eggLoginOrgId);

模板html添加egg模板渲染

<script>
   window.eggOrgId = '{{orgId}}'
   window.eggLoginOrgId = '{{loginOrgId}}'
   window.eggUid = '{{uid}}'
</script>

引用的一些外部库

• 拖拽控件