concise-layout-ui v1.1.42
layout-ui 框架UI
目录
准备
设置私服地址
npm config set registry http://peeek.cn:7001/
使用组件
npm install @concise/layout-ui
导入框架UI组件
导入框架UI的入口函数和样式
import { layout } from '@concise/layout-ui'
import '@concise/layout-ui/dist/layout-ui.css'
运行框架UI组件
layout(routeConfig, storeConfig, appConfig)
- routeConfig 参考这里。顶层路由存在子路由时无需执行
component
属性,例:
{
routes: [
{
path: '/',
name: 'home',
redirect: '/home',
children: [
{
path: 'home',
name: 'home_index',
meta: {
title: '应用管理'
},
component: () => import('@/views/app/App.vue')
},
{
path: 'setting',
name: 'setting',
meta: {
title: '配置'
},
component: () => import('@/views/setting/Setting.vue')
}
]
}
]
}
- storeConfig 参考这里
虽然storeConfig中的state、mutations、actions、modules会分别于框架内部对应的属性合并,但我们建议仅定义自己的modules,然后合并到框架内部,这样便于状态的模块化管理,更易于解耦,避免发生与
rootState
冲突。下面是rootState
数据,包含用户信息、全局配置、应用菜单等信息:
{
state: {
config: {}
userInfo: {
avatar:'',
name: ''
},
apps: [],
token: ''
}
}
- appConfig
配置项 | 说明 |
---|---|
app | 应用名称 |
logo | 应用左上角logo |
name | 应用中文名称 |
cookieExpires | cookie超期时间, 默认1天 |
{
app: 'concise',
logo: '/logo.png',
name: '全国邮政数字档案室系统',
cookieExpires: 1
}
框架UI导出内容
import {
axios,
layout,
IconsData,
LayoutLR,
TransitionEx
} from '@concise/layout-ui'
axios
HTTP 客户端,框架UI封装后的axios实例对象。
- 请求参数处理,参数采用
application/x-www-form-urlencoded; charset=UTF-8
标准头。 - 失败响应拦截器,统一拦截处理异常错误。
layout
参见 运行框架UI组件
IconsData
字体图标数据集,可以提供选择图标场景使用。使用 Font Awesome
v4.7版本。具体图标示例参考 官方网站,或者访问框架UI的图标示例路由 /icons/index
。
示例:
{
icons: [
{
name: 'Glass',
id: 'glass',
unicode: 'f000',
created: 1,
filter: ['martini', 'drink', 'bar', 'alcohol', 'liquor'],
categories: ['Web Application Icons']
},
{
name: 'Music',
id: 'music',
unicode: 'f001',
created: 1,
filter: ['note', 'sound'],
categories: ['Web Application Icons']
},
...
]
}
LayoutLR
比较常用的左右布局样式的Vue组件。
示例:
<LayoutLR title="消息中心">
<div slot="left">
左侧内容
</div>
<div slot="right">
右侧内容
</div>
</LayoutLR>
- 属性
属性名 | 类型 | 说明 |
---|---|---|
title | String | 布局左上角显示内容,作为醒目的标题显示 |
- 插槽
插槽名 | 说明 |
---|---|
title | 布局左上角显示内容,作为醒目的标题显示,替换同名 title 属性 |
left | 左侧内容,可以放置菜单选项等 |
right | 右侧内容,放置主要业务逻辑界面 |
TransitionEx
封装常用的过渡动画Vue组件。过渡动画使用 Velocity.js实现。
示例,内容显示时的样式从隐藏状态变为透明度0.3的样式,内容隐藏时则相反:
<TransitionEx :show="showStyle" :hidden="hiddenStyle">
<div>
过渡动画应用内容
</div>
</LayoutLR>
export default {
data () {
return {
showStyle: { opacity: 0.3 },
hiddenStyle: { opacity: 0 }
}
}
}
- 属性
属性名 | 类型 | 说明 |
---|---|---|
before | Object | 进入过渡动画前的样式,可以为空 |
show | Object、String | 内容显示时的样式,或者Velocity.js支持的动画指令 |
hidden | Object、String | 内容隐藏时的样式,或者Velocity.js支持的动画指令 |
- 插槽
默认插槽,过渡动画应用的内容
框架UI集成内容
clickoutside命令
框架UI对Vue组件扩展了 v-clickoutside
命令,使用 v-clickoutside
命令可以处理元素外部点击事件。下面是示例:
<template>
<div v-clickoutside="handleOut">
内容
</div>
</template>
handleOut () {
console.log('点击了内容元素外部区域')
}
发布
每次发布前要升级
package.json
中的version
编译打包
npm run dist
登录私服,按提示输入用户名密码
npm login --registry=http://peeek.cn:7001/
发布
npm publish --registry=http://peeek.cn:7001/
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago