From 8f8b1260e75df6998ebea617f62d4ab6be81d721 Mon Sep 17 00:00:00 2001 From: kailong321200875 <321200875@qq.com> Date: Sun, 27 Mar 2022 08:45:16 +0800 Subject: [PATCH] feat: add inputPassword demo --- mock/role/index.ts | 9 ++++++++ src/components/Dialog/src/Dialog.vue | 2 +- .../InputPassword/src/InputPassword.vue | 2 +- src/config/app.ts | 2 +- src/locales/en.ts | 7 ++++++- src/locales/zh-CN.ts | 9 ++++++-- src/router/index.ts | 8 +++++++ src/views/Components/Icon.vue | 13 ++++++++---- src/views/Components/InputPassword.vue | 21 +++++++++++++++++++ 9 files changed, 63 insertions(+), 10 deletions(-) create mode 100644 src/views/Components/InputPassword.vue diff --git a/mock/role/index.ts b/mock/role/index.ts index 09954d8..4079507 100644 --- a/mock/role/index.ts +++ b/mock/role/index.ts @@ -249,6 +249,14 @@ const adminList = [ meta: { title: 'router.infotip' } + }, + { + path: 'input-password', + component: 'views/Components/InputPassword', + name: 'InputPassword', + meta: { + title: 'router.inputPassword' + } } ] }, @@ -468,6 +476,7 @@ const testList: string[] = [ '/components/qrcode', '/components/highlight', '/components/infotip', + '/Components/InputPassword', '/hooks', '/hooks/useWatermark', '/level', diff --git a/src/components/Dialog/src/Dialog.vue b/src/components/Dialog/src/Dialog.vue index 6db646e..69c0fe4 100644 --- a/src/components/Dialog/src/Dialog.vue +++ b/src/components/Dialog/src/Dialog.vue @@ -73,7 +73,7 @@ const dialogStyle = computed(() => { } &__bar { - background-color: var(--el-text-color-disabled-base); + background-color: var(--el-text-color-disabled); border-radius: var(--el-border-radius-base); &::before, diff --git a/src/config/app.ts b/src/config/app.ts index 91b3389..b278b4f 100644 --- a/src/config/app.ts +++ b/src/config/app.ts @@ -66,7 +66,7 @@ export const appModules: AppState = { layout: wsCache.get('layout') || 'classic', // layout布局 isDark: wsCache.get('isDark') || false, // 是否是暗黑模式 - currentSize: wsCache.get('default') || 'default', // 组件尺寸 + currentSize: wsCache.get('default') || '', // 组件尺寸 theme: wsCache.get('theme') || { // 主题色 elColorPrimary: '#409eff', diff --git a/src/locales/en.ts b/src/locales/en.ts index 3000c1c..1a0db82 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -131,7 +131,8 @@ export default { authorization: 'Authorization', user: 'User management', role: 'Role management', - document: 'Document' + document: 'Document', + inputPassword: 'InputPassword' }, analysis: { newUser: 'New user', @@ -411,5 +412,9 @@ export default { remark: 'Remark', remarkMessage1: 'Back end control routing permission', remarkMessage2: 'Front end control routing permission' + }, + inputPasswordDemo: { + title: 'InputPassword', + inputPasswordDes: 'Secondary packaging of Input components based on ElementPlus' } } diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index 9c2ca6d..f4bdb82 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -131,7 +131,8 @@ export default { authorization: '权限管理', user: '用户管理', role: '角色管理', - document: '文档' + document: '文档', + inputPassword: '密码输入框' }, analysis: { newUser: '新增用户', @@ -374,7 +375,7 @@ export default { }, descriptionsDemo: { descriptions: '描述', - descriptionsDes: '基于 ElementPlus 的 descriptions 组件二次封装', + descriptionsDes: '基于 ElementPlus 的 Descriptions 组件二次封装', username: '用户名', nickName: '昵称', phone: '联系电话', @@ -407,5 +408,9 @@ export default { remark: '备注', remarkMessage1: '后端控制路由权限', remarkMessage2: '前端控制路由权限' + }, + inputPasswordDemo: { + title: '密码输入框', + inputPasswordDes: '基于 ElementPlus 的 Input 组件二次封装' } } diff --git a/src/router/index.ts b/src/router/index.ts index 72c8e43..0bf6c69 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -300,6 +300,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [ meta: { title: t('router.infotip') } + }, + { + path: 'input-password', + component: () => import('@/views/Components/InputPassword.vue'), + name: 'InputPassword', + meta: { + title: t('router.inputPassword') + } } ] }, diff --git a/src/views/Components/Icon.vue b/src/views/Components/Icon.vue index 50fe599..7ec3273 100644 --- a/src/views/Components/Icon.vue +++ b/src/views/Components/Icon.vue @@ -12,6 +12,11 @@ const keyClick = (key: string) => { window.open('https://iconify.design/') } } + +const peoples = useIcon({ icon: 'svg-icon:peoples' }) +const money = useIcon({ icon: 'svg-icon:money' }) +const aim = useIcon({ icon: 'ep:aim' }) +const alarmClock = useIcon({ icon: 'ep:alarm-clock' }) diff --git a/src/views/Components/InputPassword.vue b/src/views/Components/InputPassword.vue new file mode 100644 index 0000000..bfae7e5 --- /dev/null +++ b/src/views/Components/InputPassword.vue @@ -0,0 +1,21 @@ + + +