rtlink-vt
v0.3.7
Published
对 `rtlink` 前端框架进行扩展,仅适用于基于 `rtlink` 框架创建的vue项目。
Downloads
470
Readme
rtlink-vt
对 rtlink
前端框架进行扩展,仅适用于基于 rtlink
框架创建的vue项目。
安装
npm install rtlink-vt --save
使用
考虑到 rtlink-vt
并不是普通的组件库,而是会对前端框架的布局、样式进行修改,同时还提供示例页面、文档说明、代码生成等功能,因此配置方式较为复杂。
添加文件
在 src/plugins 中添加文件 vt.js
,其中编辑以下内容:
import Vue from 'vue'
import RtlinkVt from 'rtlink-vt';
import 'rtlink-vt/packages/theme/index.scss';
import 'rtlink-vt/packages/route';
Vue.use(RtlinkVt)
在 mock/controller 中添加文件 vt-mock.js
,其中编辑以下内容:
const mockdata = require('../../node_modules/rtlink-vt/packages/mock');
module.exports = mockdata;
修改文件
在src/mixins/tableHeight.js 中,第3行左右修改代码
tableHeight() {
const pageTabsHeight = document.querySelector('div.vt-page-tabs') ? 60 : 0;
return this.$baseTableHeight(45 - pageTabsHeight);
},
在 src/plugins/index.js 中,添加以下代码:
import './vt'
在 src/config/theme.config.js 中,第16行左右修改代码
//主题色
themeColor: '#24a2ff',
在 src/styles/base.scss 中,第116行左右修改代码
/* 注释掉关于transition的全局样式 */
* {
/*transition: $base-transition;*/
}
在 src/styles/variables.scss 中 ,第4行左右修改代码
/* 框架默认主题色 */
$base-color-default: #24a2ff;
在 src/components/layouts/index.vue 中,第52行左右,添加 ht-top-bar
,将 ht-tabs-bar
注释掉
<ht-top-bar />
<ht-nav-bar />
<!--<ht-tabs-bar v-if="tabsBar === 'true' || tabsBar === true" />-->
在 src/components/layouts/HtAppMain/index.vue 中,第7行左右,在 <transition>
的上面添加代码
<ht-tabs-bar />
在 src/components/layouts/HtSideBar/index.vue,第21行左右,将 ht-side-bar-item
修改为 vt-side-bar-item
<vt-side-bar-item
:key="route.id"
:full-path="route.path"
:item="route"
/>
在 src/components/layouts/HtTabsBar/index.vue,第36行左右,添加以下代码
<vt-demo-code />
在 src/components/layouts/HtTabsBar/index.vue,第43行左右,添加以下代码
<li class="context-menu-item">
<el-button type="text" @click="handleOperateTabs('refreshRoute')">
刷新当前标签页
</el-button>
</li>
在 mock/index.js 中,第10行左右添加代码
// 避免进程crash
process.on('uncaughtException', function (err) {
console.log('uncaughtException: ' + err);
});
在 mock/index.js 中,第61行左右修改
//使mock接口支持异步返回
//res.json(mock(respond instanceof Function ? respond(req, res) : respond))
const result = typeof respond === 'function' ? respond(req) : respond;
const promise = typeof result?.then === 'function' ? result : Promise.resolve(result);
promise.then(obj => res.json(mock(obj))).catch(e => res.json(mock(e)));
【todo】待补充 stypes/themes/header和styles/themes/login
功能说明
浅色版皮肤
应用《2023春季浅色版皮肤》,包括以下要点
(1)布局调整:页面顶部添加一个横条、标签页横条位置调整到页面内容区域
(2)样式调整:主题色调整、框架样式调整、组件库 rtlink-ui
样式调整、组件库element-ui
样式调整
(3)左侧菜单调整:3级以上菜单向右展开,支持任意层级的菜单结构
组件
提供一些组件,具体包含如下
vt-sider-list
: 列表组件,一般放在页面左侧
vt-sider-tree
: 基于 el-tree
开发的树组件,一般放在页面左侧,选择树形数据
vt-org
: 机构选择器
vt-user
: 用户选择器
指令
提供一些 Vue
指令,具体包含如下
v-sider
: 用于左右布局中,在左侧 div
添加该指令,可令其允许拖拽调整宽度
v-auth
: 用于实现按钮权限 【todo】尚未开发完成
内置示例页面
通过 npm run serve
启动项目,在浏览器输入 http://localhost:8081/front/vtdemo
,进入 rtlink-vt
的内置页面
此时,左侧菜单栏中会出现 vtdemo
项目,其中包含了一些示例页面、框架说明文档以及一些开发工具页面。
(1)示例页面
针对一些常见的页面类型或功能,提供示例页面。
示例页面并不使用数据库的数据,而是连接mock接口。
示例页面的源码位于 node_modules/rtlink-vt/packages/demo
(2)框架使用文档
提供了常用组件的接口文档和使用说明。
(3)开发工具
提供一些辅助开发的工具页面,如代码生成器等。
代码生成器
【todo】待补充
批量创建菜单
【todo】待补充