必备UI组件
将用到的组件：
Badge 徽章
Popover 弹出框/气泡卡片
Tabs 标签页
Avatar 头像
Tag 标签
Scrollbar 滚动条
组件设计
新建src\components\baseline\notification\index.ts
import { App } from 'vue'
import Notification from './src/index.vue'
export { Notification }
//组件可通过use的形式使用
export default {
Notification,
install(app: App) {
app.component('bs-notification', Notification)
},
}
新建src\components\baseline\notification\src\index.vue
新建src\views\baseline\notification\index.vue
修改src\router\index.ts
/*
* @Author: bobokaka
* @Date: 2021-12-19 11:26:38
* @LastEditTime: 2021-12-24 23:34:35
* @LastEditors: Please set LastEditors
* @Description: 路由
* @FilePath: \vue3-element-ui-baseline\src\router\index.ts
*/
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home/index.vue'
import Container from '../components/baseline/container/src/index.vue'
const routes: RouteRecordRaw[] = [
{
path: '/',
component: Container,
children: [
{
path: '/',
component: Home,
},
{
path: '/chooseIcon',
component: () => import('../views/baseline/chooseIcon/index.vue'),
},
{
path: '/chooseArea',
component: () => import('../views/baseline/chooseArea/index.vue'),
},
{
path: '/trend',
component: () => import('../views/baseline/trend/index.vue'),
},
{
path: '/notification',
component: () => import('../views/baseline/notification/index.vue'),
},
],
},
]
const router = createRouter({
routes,
history: createWebHistory(),
})
export default router
打开网页http://localhost:8080/notification
image.png
实现点击打开一个列表组件
修改src\views\baseline\notification\index.vue
修改src\components\baseline\notification\index.ts
image.png
从官网复制一个过来，点击图标的效果如上，这里我们不需要标题，删掉如下代码：
title="Title"
整体修改后如下：
修改src\views\baseline\notification\index.vue
这是一个标题
image.png
菜单组件封装
新建src\components\baseline\list\src\index.vue
List
新建src\components\baseline\list\index.ts
import { App } from 'vue'
import List from './src/index.vue'
export { List }
//组件可通过use的形式使用
export default {
List,
install(app: App) {
app.component('bs-list', List)
},
}
修改src\views\baseline\notification\index.vue
import { App } from 'vue'
import ChooseArea from './chooseArea'
import ChooseIcon from './chooseIcon'
import Container from './container'
import Trend from './trend'
import Notification from './notification'
import List from './list'
const components = [
ChooseArea,
ChooseIcon,
Container,
Trend,
Notification,
List,
]
export { ChooseArea, ChooseIcon, Container, Trend, Notification, List }
//组件可通过use的形式使用
export default {
install(app: App) {
components.map(item => {
app.use(item)
})
},
ChooseArea,
ChooseIcon,
Container,
Trend,
Notification,
List,
}
修改src\components\baseline\notification\src\index.vue
......
运行效果如下：
image.png
列表组件
这里需要构建一个即将出场的列表组件。
新建src\components\baseline\list\src\index.vue
List
新建src\components\baseline\list\src\type.ts
export interface ListItem {
//头像
avatar?: string
//标题
title?: string
//描述
desc: string
//时间
time?: string
//标签内容
tag?: string
tagType?: 'success' | 'info' | 'warning' | 'danger'
}
/**
* 列表
*/
export interface listOptions {
title: string
content: ListItem[]
}
export interface ActionOptions {
text: string
icon?: string
}
新建src\components\baseline\list\index.ts
import { App } from 'vue'
import List from './src/index.vue'
export { List }
//组件可通过use的形式使用
export default {
List,
install(app: App) {
app.component('bs-list', List)
},
}
初始化，完毕，开始使用改造：
准备数据，新建src\views\baseline\notification\data.ts
/*
* @Author: your name
* @Date: 2021-12-28 18:45:30
* @LastEditTime: 2021-12-29 01:03:45
* @LastEditors: Please set LastEditors
* @Description: 模拟数据
* @FilePath: \vue3-element-ui-baseline\src\views\baseline\notification\data.ts
*/
export const list = [
{
title: '通知',
content: [
{
title: '鲁迅回复了你的邮件',
time: '2021-12-24 17:47:54',
avatar: 'https://upload-images.jianshu.io/upload_images/16102290-ce12da7b12204094.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
},
{
title: '刘备邀请你参加会议',
time: '2021-12-28 9:15:27',
avatar: 'https://www.baidu.com',
},
{
title: '诸葛孔明已批准了你的休假申请',
time: '2021-12-27 16:47:33',
avatar: 'https://www.baidu.com',
},
],
},
{
title: '关注',
content: [
{
title: '鲁迅 评论了你',
desc: '愿中国青年都摆脱冷气,只是向上走,不必听自暴自弃者的话。',
time: '2021-12-24 17:47:54',
avatar: 'https://www.baidu.com',
},
{
title: '刘备 评论了你',
desc: '惟贤惟德,能服于人!',
time: '2021-12-28 9:15:27',
avatar: 'https://www.baidu.com',
},
{
title: '诸葛孔明 评论了你',
desc: '恢弘志士之气，不宜妄自菲薄。',
time: '2021-12-27 16:47:33',
avatar: 'https://www.baidu.com',
},
],
},
{
title: '代办',
content: [
{
title: '鲁迅发表文章，待审核',
desc: '需要在2021-12-30 18:00:00前审核',
avatar: 'https://www.baidu.com',
tag: '未开始',
tagType: '',
},
{
title: '刘备出兵计划发起',
desc: '刘备提交于2021-12-27 16:04:00 需要在2021-12-30 18:00:00前审核',
time: '2021-12-28 9:15:27',
avatar: 'https://www.baidu.com',
tag: '即将过期',
tagType: 'danger',
},
{
title: '诸葛孔明科目二考试',
desc: '需要在2021-12-29 18:00:00前审核',
time: '2021-12-27 16:47:33',
avatar: 'https://www.baidu.com',
tag: '已过期',
tagType: 'warning',
},
{
title: '鲁迅发表文章，待审核',
desc: '需要在2021-12-30 18:00:00前审核',
avatar: 'https://www.baidu.com',
tag: '未开始',
tagType: '',
},
{
title: '刘备出兵计划发起',
desc: '刘备提交于2021-12-27 16:04:00 需要在2021-12-30 18:00:00前审核',
time: '2021-12-28 9:15:27',
avatar: 'https://www.baidu.com',
tag: '即将过期',
tagType: 'danger',
},
{
title: '诸葛孔明科目二考试',
desc: '需要在2021-12-29 18:00:00前审核',
time: '2021-12-27 16:47:33',
avatar: 'https://www.baidu.com',
tag: '已过期',
tagType: 'warning',
},
],
},
]
export const actions = [
{
text: '清空代办',
icon: 'el-icon-delete',
},
{
text: '查看更多',
icon: 'el-icon-edit',
},
]
修改src\views\baseline\notification\index.vue
修改src\components\baseline\list\src\index.vue
{{ item2.tag }}
{{ item2.desc }}
{{ item2.time }}
修改src\style\ui.scss
//修改组件库内部的样式
//1.需要自定义一个类名空间
//2.浏览器中调试样式
//3.调试好的类名放在这个类名中
//4.在App.vue里面引入这个文件
//5.在组件内需要改样式的元素的父元素加上这个类名
.bk--choose-icon-dialog-body-height {
.el-dialog__body {
height: 5rem;
overflow-y: scroll;
overflow-x: auto;
}
}
//去掉el-tabs盒子默认的padding
.el-popper {
padding: 0 !important;
}
效果如下：
image.png
image.png
list组件完善
修改src\components\baseline\list\src\index.vue
{{ item2.tag }}
{{ item2.desc }}
{{ item2.time }}
修改src\views\baseline\notification\index.vue
这样就实现了点击响应.
如上代码为了兼容别名使用，修改vite.config.ts
增加如下代码：
resolve: {
alias: {
'@': '/src',
'@style': '/src/style',
'@com': '/src/components',
'@baseline': '/src/components/baseline',
'@business': '/src/components/business',
},
},
完整代码如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': '/src',
'@style': '/src/style',
'@com': '/src/components',
'@baseline': '/src/components/baseline',
'@business': '/src/components/business',
},
},
server: {
port: 8080,
},
})
修改tsconfig.json
增加如下代码：
"types": ["vite/client"],
// ++ 这里加上baseUrl 和 path即可 ++
"baseUrl": "./",
"paths": {
// 根据别名配置相关路径
"@/*": ["./src/*"],
"@style/*": ["./src/style/*"],
"@com/*": ["./src/components/*"],
"@baseline/*": ["./src/components/baseline/*"],
"@business/*": ["./src/components/business/*"]
}
完整代码如下：
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"importHelpers": true,
"isolatedModules": true,
"lib": ["esnext", "dom"],
"types": ["vite/client"],
// ++ 这里加上baseUrl 和 path即可 ++
"baseUrl": "./",
"paths": {
// 根据别名配置相关路径
"@/*": ["./src/*"],
"@style/*": ["./src/style/*"],
"@com/*": ["./src/components/*"],
"@baseline/*": ["./src/components/baseline/*"],
"@business/*": ["./src/components/business/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
结果如下：
image.png