Skip to content

A
ant-design-pro-vue
Commit 686a2b72 by Sendya
Options

fix: ellipsis full length out '...'

parent be1fafab
Showing with 355 additions and 354 deletions
src/components/Ellipsis/Ellipsis.vue
<script> <script>
import Tooltip from 'ant-design-vue/es/tooltip' import Tooltip from 'ant-design-vue/es/tooltip'
import { cutStrByFullLength, getStrFullLength } from '@/components/_util/StringUtil' import { cutStrByFullLength, getStrFullLength } from '@/components/_util/StringUtil'
/* /*
const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined; const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
const TooltipOverlayStyle = { const TooltipOverlayStyle = {
overflowWrap: 'break-word', overflowWrap: 'break-word',
wordWrap: 'break-word', wordWrap: 'break-word',
}; };
*/ */
export default { export default {
name: 'Ellipsis', name: 'Ellipsis',
...@@ -37,16 +37,16 @@ ...@@ -37,16 +37,16 @@
} }
}, },
methods: { methods: {
getStrDom (str) { getStrDom (str, fullLength) {
return ( return (
<span>{ cutStrByFullLength(str, this.length) + '...' }</span> <span>{ cutStrByFullLength(str, this.length) + (fullLength > this.length ? '...' : '') }</span>
) )
}, },
getTooltip ( fullStr) { getTooltip (fullStr, fullLength) {
return ( return (
<Tooltip> <Tooltip>
<template slot="title">{ fullStr }</template> <template slot="title">{ fullStr }</template>
{ this.getStrDom(fullStr) } { this.getStrDom(fullStr, fullLength) }
</Tooltip> </Tooltip>
) )
} }
...@@ -54,10 +54,11 @@ ...@@ -54,10 +54,11 @@
render () { render () {
const { tooltip, length } = this.$props const { tooltip, length } = this.$props
const str = this.$slots.default.map(vNode => vNode.text).join('') const str = this.$slots.default.map(vNode => vNode.text).join('')
const strDom = tooltip && getStrFullLength(str) > length ? this.getTooltip(str) : this.getStrDom(str) const fullLength = getStrFullLength(str)
const strDom = tooltip && fullLength > length ? this.getTooltip(str, fullLength) : this.getStrDom(str, fullLength)
return ( return (
strDom strDom
) )
} }
} }
</script> </script>
\ No newline at end of file
src/config/router.config.js
import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts' // eslint-disable-next-line
import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
export const asyncRouterMap = [
export const asyncRouterMap = [
{
path: '/', {
name: 'index', path: '/',
component: BasicLayout, name: 'index',
meta: { title: '首页' }, component: BasicLayout,
redirect: '/dashboard/workplace', meta: { title: '首页' },
children: [ redirect: '/dashboard/workplace',
// dashboard children: [
{ // dashboard
path: '/dashboard', {
name: 'dashboard', path: '/dashboard',
redirect: '/dashboard/workplace', name: 'dashboard',
component: RouteView, redirect: '/dashboard/workplace',
meta: { title: '仪表盘', icon: 'dashboard', permission: [ 'dashboard' ] }, component: RouteView,
children: [ meta: { title: '仪表盘', icon: 'dashboard', permission: [ 'dashboard' ] },
{ children: [
path: '/dashboard/analysis', {
name: 'Analysis', path: '/dashboard/analysis',
component: () => import('@/views/dashboard/Analysis'), name: 'Analysis',
meta: { title: '分析页', permission: [ 'dashboard' ] } component: () => import('@/views/dashboard/Analysis'),
}, meta: { title: '分析页', permission: [ 'dashboard' ] }
{ },
path: '/dashboard/monitor', {
name: 'Monitor', path: '/dashboard/monitor',
hidden: true, name: 'Monitor',
component: () => import('@/views/dashboard/Monitor'), hidden: true,
meta: { title: '监控页', permission: [ 'dashboard' ] } component: () => import('@/views/dashboard/Monitor'),
}, meta: { title: '监控页', permission: [ 'dashboard' ] }
{ },
path: '/dashboard/workplace', {
name: 'Workplace', path: '/dashboard/workplace',
component: () => import('@/views/dashboard/Workplace'), name: 'Workplace',
meta: { title: '工作台', permission: [ 'dashboard' ] } component: () => import('@/views/dashboard/Workplace'),
} meta: { title: '工作台', permission: [ 'dashboard' ] }
] }
}, ]
},
// forms
{ // forms
path: '/form', {
redirect: '/form/basic-form', path: '/form',
component: PageView, redirect: '/form/basic-form',
meta: { title: '表单页', icon: 'form', permission: [ 'form' ] }, component: PageView,
children: [ meta: { title: '表单页', icon: 'form', permission: [ 'form' ] },
{ children: [
path: '/form/base-form', {
name: 'BaseForm', path: '/form/base-form',
component: () => import('@/views/form/BasicForm'), name: 'BaseForm',
meta: { title: '基础表单', permission: [ 'form' ] } component: () => import('@/views/form/BasicForm'),
}, meta: { title: '基础表单', permission: [ 'form' ] }
{ },
path: '/form/step-form', {
name: 'StepForm', path: '/form/step-form',
component: () => import('@/views/form/stepForm/StepForm'), name: 'StepForm',
meta: { title: '分步表单', permission: [ 'form' ] } component: () => import('@/views/form/stepForm/StepForm'),
}, meta: { title: '分步表单', permission: [ 'form' ] }
{ },
path: '/form/advanced-form', {
name: 'AdvanceForm', path: '/form/advanced-form',
component: () => import('@/views/form/advancedForm/AdvancedForm'), name: 'AdvanceForm',
meta: { title: '高级表单', permission: [ 'form' ] } component: () => import('@/views/form/advancedForm/AdvancedForm'),
} meta: { title: '高级表单', permission: [ 'form' ] }
] }
}, ]
},
// list
{ // list
path: '/list', {
name: 'list', path: '/list',
component: PageView, name: 'list',
redirect: '/list/query-list', component: PageView,
meta: { title: '列表页', icon: 'table', permission: [ 'table' ] }, redirect: '/list/query-list',
children: [ meta: { title: '列表页', icon: 'table', permission: [ 'table' ] },
{ children: [
path: '/list/query-list', {
name: 'QueryList', path: '/list/query-list',
component: () => import('@/views/list/TableList'), name: 'QueryList',
meta: { title: '查询表格', permission: [ 'table' ] } component: () => import('@/views/list/TableList'),
}, meta: { title: '查询表格', permission: [ 'table' ] }
{ },
path: '/list/edit-table', {
name: 'EditList', path: '/list/edit-table',
component: () => import('@/views/list/TableInnerEditList'), name: 'EditList',
meta: { title: '内联编辑表格', permission: [ 'table' ] } component: () => import('@/views/list/TableInnerEditList'),
}, meta: { title: '内联编辑表格', permission: [ 'table' ] }
{ },
path: '/list/user-list', {
name: 'UserList', path: '/list/user-list',
component: () => import('@/views/list/UserList'), name: 'UserList',
meta: { title: '用户列表', permission: [ 'table' ] } component: () => import('@/views/list/UserList'),
}, meta: { title: '用户列表', permission: [ 'table' ] }
{ },
path: '/list/role-list', {
name: 'RoleList', path: '/list/role-list',
component: () => import('@/views/list/RoleList'), name: 'RoleList',
meta: { title: '角色列表', permission: [ 'table' ] } component: () => import('@/views/list/RoleList'),
}, meta: { title: '角色列表', permission: [ 'table' ] }
{ },
path: '/list/system-role', {
name: 'SystemRole', path: '/list/system-role',
component: () => import('@/views/role/RoleList'), name: 'SystemRole',
meta: { title: '角色列表2', permission: [ 'table' ]} component: () => import('@/views/role/RoleList'),
}, meta: { title: '角色列表2', permission: [ 'table' ]}
{ },
path: '/list/permission-list', {
name: 'PermissionList', path: '/list/permission-list',
component: () => import('@/views/list/PermissionList'), name: 'PermissionList',
meta: { title: '权限列表', permission: [ 'table' ] } component: () => import('@/views/list/PermissionList'),
}, meta: { title: '权限列表', permission: [ 'table' ] }
{ },
path: '/list/basic-list', {
name: 'BasicList', path: '/list/basic-list',
component: () => import('@/views/list/StandardList'), name: 'BasicList',
meta: { title: '标准列表', permission: [ 'table' ] } component: () => import('@/views/list/StandardList'),
}, meta: { title: '标准列表', permission: [ 'table' ] }
{ },
path: '/list/card', {
name: 'CardList', path: '/list/card',
component: () => import('@/views/list/CardList'), name: 'CardList',
meta: { title: '卡片列表', permission: [ 'table' ] } component: () => import('@/views/list/CardList'),
}, meta: { title: '卡片列表', permission: [ 'table' ] }
{ },
path: '/list/search', {
name: 'SearchList', path: '/list/search',
component: () => import('@/views/list/search/SearchLayout'), name: 'SearchList',
redirect: '/list/search/article', component: () => import('@/views/list/search/SearchLayout'),
meta: { title: '搜索列表', permission: [ 'table' ] }, redirect: '/list/search/article',
children: [ meta: { title: '搜索列表', permission: [ 'table' ] },
{ children: [
path: '/list/search/article', {
name: 'SearchArticles', path: '/list/search/article',
component: () => import('../views/list/TableList'), name: 'SearchArticles',
meta: { title: '搜索列表（文章）', permission: [ 'table' ] } component: () => import('../views/list/TableList'),
}, meta: { title: '搜索列表（文章）', permission: [ 'table' ] }
{ },
path: '/list/search/project', {
name: 'SearchProjects', path: '/list/search/project',
component: () => import('../views/list/TableList'), name: 'SearchProjects',
meta: { title: '搜索列表（项目）', permission: [ 'table' ] } component: () => import('../views/list/TableList'),
}, meta: { title: '搜索列表（项目）', permission: [ 'table' ] }
{ },
path: '/list/search/application', {
name: 'SearchApplications', path: '/list/search/application',
component: () => import('../views/list/TableList'), name: 'SearchApplications',
meta: { title: '搜索列表（应用）', permission: [ 'table' ] } component: () => import('../views/list/TableList'),
}, meta: { title: '搜索列表（应用）', permission: [ 'table' ] }
] },
}, ]
] },
}, ]
},
// profile
{ // profile
path: '/profile', {
name: 'profile', path: '/profile',
component: RouteView, name: 'profile',
redirect: '/profile/basic', component: RouteView,
meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] }, redirect: '/profile/basic',
children: [ meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] },
{ children: [
path: '/profile/basic', {
name: 'ProfileBasic', path: '/profile/basic',
component: () => import('@/views/profile/basic/Index'), name: 'ProfileBasic',
meta: { title: '基础详情页', permission: [ 'profile' ] } component: () => import('@/views/profile/basic/Index'),
}, meta: { title: '基础详情页', permission: [ 'profile' ] }
{ },
path: '/profile/advanced', {
name: 'ProfileAdvanced', path: '/profile/advanced',
component: () => import('@/views/profile/advanced/Advanced'), name: 'ProfileAdvanced',
meta: { title: '高级详情页', permission: [ 'profile' ] } component: () => import('@/views/profile/advanced/Advanced'),
} meta: { title: '高级详情页', permission: [ 'profile' ] }
] }
}, ]
},
// result
{ // result
path: '/result', {
name: 'result', path: '/result',
component: PageView, name: 'result',
redirect: '/result/success', component: PageView,
meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] }, redirect: '/result/success',
children: [ meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
{ children: [
path: '/result/success', {
name: 'ResultSuccess', path: '/result/success',
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'), name: 'ResultSuccess',
meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] } component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
}, meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
{ },
path: '/result/fail', {
name: 'ResultFail', path: '/result/fail',
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'), name: 'ResultFail',
meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] } component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
} meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] }
] }
}, ]
},
// Exception
{ // Exception
path: '/exception', {
name: 'exception', path: '/exception',
component: RouteView, name: 'exception',
redirect: '/exception/403', component: RouteView,
meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] }, redirect: '/exception/403',
children: [ meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] },
{ children: [
path: '/exception/403', {
name: 'Exception403', path: '/exception/403',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'), name: 'Exception403',
meta: { title: '403', permission: [ 'exception' ] } component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
}, meta: { title: '403', permission: [ 'exception' ] }
{ },
path: '/exception/404', {
name: 'Exception404', path: '/exception/404',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'), name: 'Exception404',
meta: { title: '404', permission: [ 'exception' ] } component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
}, meta: { title: '404', permission: [ 'exception' ] }
{ },
path: '/exception/500', {
name: 'Exception500', path: '/exception/500',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'), name: 'Exception500',
meta: { title: '500', permission: [ 'exception' ] } component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
} meta: { title: '500', permission: [ 'exception' ] }
] }
}, ]
},
// account
{ // account
path: '/account', {
component: RouteView, path: '/account',
name: 'account', component: RouteView,
meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] }, name: 'account',
children: [ meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
{ children: [
path: '/account/center', {
name: 'center', path: '/account/center',
component: () => import('@/views/account/center/Index'), name: 'center',
meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] } component: () => import('@/views/account/center/Index'),
}, meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
{ },
path: '/account/settings', {
name: 'settings', path: '/account/settings',
component: () => import('@/views/account/settings/Index'), name: 'settings',
meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ] }, component: () => import('@/views/account/settings/Index'),
redirect: '/account/settings/base', meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ] },
alwaysShow: true, redirect: '/account/settings/base',
children: [ alwaysShow: true,
{ children: [
path: '/account/settings/base', {
name: 'BaseSettings', path: '/account/settings/base',
component: () => import('@/views/account/settings/BaseSetting'), name: 'BaseSettings',
meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ] } component: () => import('@/views/account/settings/BaseSetting'),
}, meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
{ },
path: '/account/settings/security', {
name: 'SecuritySettings', path: '/account/settings/security',
component: () => import('@/views/account/settings/Security'), name: 'SecuritySettings',
meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ] } component: () => import('@/views/account/settings/Security'),
}, meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
{ },
path: '/account/settings/custom', {
name: 'CustomSettings', path: '/account/settings/custom',
component: () => import('@/views/account/settings/Custom'), name: 'CustomSettings',
meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ] } component: () => import('@/views/account/settings/Custom'),
}, meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
{ },
path: '/account/settings/binding', {
name: 'BindingSettings', path: '/account/settings/binding',
component: () => import('@/views/account/settings/Binding'), name: 'BindingSettings',
meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ] } component: () => import('@/views/account/settings/Binding'),
}, meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ] }
{ },
path: '/account/settings/notification', {
name: 'NotificationSettings', path: '/account/settings/notification',
component: () => import('@/views/account/settings/Notification'), name: 'NotificationSettings',
meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ] } component: () => import('@/views/account/settings/Notification'),
}, meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ] }
] },
}, ]
] },
} ]
] }
}, ]
{ },
path: '*', redirect: '/404', hidden: true {
} path: '*', redirect: '/404', hidden: true
] }
]
/**
* 基础路由 /**
* @type { *[] } * 基础路由
*/ * @type { *[] }
export const constantRouterMap = [ */
{ export const constantRouterMap = [
path: '/user', {
component: UserLayout, path: '/user',
redirect: '/user/login', component: UserLayout,
hidden: true, redirect: '/user/login',
children: [ hidden: true,
{ children: [
path: 'login', {
name: 'login', path: 'login',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login') name: 'login',
}, component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
{ },
path: 'register', {
name: 'register', path: 'register',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register') name: 'register',
}, component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
{ },
path: 'register-result', {
name: 'registerResult', path: 'register-result',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult') name: 'registerResult',
} component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
] }
}, ]
},
{
path: '/test', {
component: BlankLayout, path: '/test',
redirect: '/test/home', component: BlankLayout,
children: [ redirect: '/test/home',
{ children: [
path: 'home', {
name: 'TestHome', path: 'home',
component: () => import('@/views/Home') name: 'TestHome',
} component: () => import('@/views/Home')
] }
}, ]
},
{
path: '/404', {
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404') path: '/404',
}, component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
},
]
]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment