Fork me on GitHub

vue 实践与优化

字数统计: 2.6k字   |   阅读时长≈ 13分

在使用 element UI 的 el-image 时，首次加载图片出现白色闪现效果

这是应为 组件内 在加载前和加载中是一个类名为el-image__placeholder的div标签，在加载后和加载出错后的处理分别是一个div和img标签。

解决方法：在加载前和加载后的样式上做更改，可以重写覆盖类名el-image__placeholder和el-image__error来自定义自己想要的效果了

1
2
3
4
5
6
7
// 将默认的白色背景去除

::v-deep .el-image__placeholder,
::v-deep .el-image__error
{
    background: none !important;
}

vue 路由 tab切换时，动态判断左右切换过渡动画

预置三种动画

  1. opacity-scale
  2. switch-right
  3. switch-left
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/**
    transition-动画 [透明缩放]
    name: "opacity-scale"
 */
.opacity-scale-enter-active {
    transition: all 0.65s ease;
}
.opacity-scale-leave-active {
    transition: all 0.65s ease;
}
.opacity-scale-enter {
    opacity: 0;
    transform: scale(0.9);
}
.opacity-scale-enter-to {
    opacity: 1;
    transform: scale(1);
}
.opacity-scale-leave {
    opacity: 1;
    transform: scale(1);
}
.opacity-scale-leave-to {
    opacity: 0;
    transform: scale(0.9);
}

/**
    transition-动画 [透明]
    name: "opacity-scale"
 */
 .opacity-enter-active {
    transition: all 0.65s ease;
}
.opacity-leave-active {
    transition: all 0.65s ease;
}
.opacity-enter {
    opacity: 0;
}
.opacity-enter-to {
    opacity: 1;
}
.opacity-leave {
    opacity: 1;
}
.opacity-leave-to {
    opacity: 0;
}

/**
    transition-动画 [幻灯片（从左向右）]
    name: "switch-left"
 */
.switch-left-enter-active {
    transition: all 0.85s ease;
}
.switch-left-leave-active {
    transition: all 0.85s ease;
}
.switch-left-enter {
    transform: translateX(-100%);
    opacity: .85;
}
.switch-left-enter-to {
    transform: translateX(0);
    opacity: 1;
}
.switch-left-leave {
    transform: translateX(0);
    opacity: 1;
}
.switch-left-leave-to {
    transform: translateX(100%);
    opacity: .85;
}

/**
    transition-动画 [幻灯片（从右向左）]
    name: "switch-right"
 */
.switch-right-enter-active {
    transition: all 0.85s ease;
}
.switch-right-leave-active {
    transition: all 0.85s ease;
}
.switch-right-enter {
    transform: translateX(100%);
    opacity: .85;
}
.switch-right-enter-to {
    transform: translateX(0);
    opacity: 1;
}
.switch-right-leave {
    transform: translateX(0);
    opacity: 1;
}
.switch-right-leave-to {
    transform: translateX(-100%);
    opacity: .85;
}

/**
    菜单下拉动画
 */
.menu-upbit-anim {
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-name: menu-top-to-bottom;
}

@keyframes menu-top-to-bottom{
    from{
        opacity:.3;
        margin-top: -30px;
    }
    to{
        opacity:1;
        margin-top: 0;
    }
}

设置路由

通过设置路由属性 meta.sort 来记录路由位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
const routers = [
	 {
    path: "/defectControl",
    name: "defectControl",
    meta: {
      keepAlive: false,
      sort: "c-1",
    },
    component: () =>
      import(
        /* webpackChunkName: "defectControl-index" */ "@/views/defectControl/index.vue"
      ),
    children: [
      {
        // 首页
        path: "frontPage",
        name: "defectControl-frontPage",
        meta: {
          keepAlive: false,
          sort: "c-2",
        },
        component: () =>
          import(
            /* webpackChunkName: "defectControl-frontPage" */ "@/views/defectControl/frontPage.vue"
          ),
      },
      {
        path: "defectPool",
        name: "defectControl-defectPool",
        meta: {
          keepAlive: false,
          sort: "c-3",
        },
        component: () =>
          import(
            /* webpackChunkName: "defectControl-defectPool" */ "@/views/defectControl/defectPool.vue"
          ),
      },
      {
        path: "defectCondition",
        name: "defectControl-defectCondition",
        meta: {
          keepAlive: false,
          sort: "c-4",
        },
        component: () =>
          import(
            /* webpackChunkName: "defectControl-defectCondition" */ "@/views/defectControl/defectCondition.vue"
          ),
      },
      {
        path: "defectFocal",
        name: "defectControl-defectFocal",
        meta: {
          keepAlive: false,
          sort: "c-5",
        },
        component: () =>
          import(
            /* webpackChunkName: "defectControl-defectFocal" */ "@/views/defectControl/defectFocal.vue"
          ),
      },
      {
        path: "defect",
        name: "defectControlConfiguration-defectConfig",
        meta: {
          keepAlive: false,
          sort: "c-6",
        },
        component: () =>
          import(
            /* webpackChunkName: "defectControlConfiguration-defectConfig" */ "@/views/defectControl/defectControlConfiguration/defectView.vue"
          ),
      },
    ],
  },
]

监听路由变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
    data() {
        return {
            transitionName: "opacity-scale"
        }
    },
	watch: {
		$route(to, from) {
          // 查看路由元信息中是否设置了动画名
          if (to?.meta?.transitionName) {
            return (this.transitionName = to.meta.transitionName);
          }
          // 如果是主模块，不是子模块不需要动画
          if (from.path === "/defectControl") {
            return (this.transitionName = "none");
          }
          const toSort = to?.meta?.sort;
          const fromSort = from?.meta?.sort;
          // 未设置路由元信息位置，默认透明缩放效果
          if (!isString(toSort) || !isString(fromSort)) {
            return (this.transitionName = "opacity-scale");
          }
          // 比较路由位置判断左右切换的动画名称
          this.transitionName =
            toSort.localeCompare(fromSort) > 0 ? "switch-right" : "switch-left";
        },
	}
}

退出登录再登录提示路由重复问题

本质上就是路由重复注册导致的提示，我们可以在每次登出时，清除注册路由

在 router 文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import Vue from 'vue'
import VueRouter from 'vue-router'

import BaseLayout from "@/layouts/BaseLayout.vue"
Vue.use(VueRouter)

export const constantRoutes = [
  {
    path: '/',
    redirect: '/login', // 重定向到 /home 路径
    component: BaseLayout,
    children: [
      {
        name: 'home',
        path: '/home', 
        component: () => import(/* webpackChunkName: "Home" */ '@/views/home/Home.vue')
      },
 
    ], 
  },
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '@/views/login/Login.vue')
  },

]

const router = new VueRouter({
  routes: constantRoutes
})

// 解决重复点击导航时，控制台出现报错
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
  return VueRouterPush.call(this, to).catch(err => err)
}
// 路由重置，解决退出登录后路由重复提示
const createRouter = () => new VueRouter({
  routes: constantRoutes,// 添加默认路由，找不到路由可能导致报错
})
export function resetRouter() {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher;
}

export default router

退出登录时调用

1
2
3
4
5
6
7
loginOut() {
    this.$store.dispatch('globalModule/FedLogOut').then(()=> {
        resetRouter();
        // 此处确保 login 路由存在
        this.$router.push({name: 'login'});
    })
},

参考链接

用户在指定页面因token过期而导致返回登录页，登陆后回到此页面

需要在 axios 响应拦截时处理

1
2
3
4
5
6
7
8
if(code == 401) {
    Vue.prototype.$message.error("登录状态已过期,请重新登录");
    store.dispatch('globalModule/LogOut').then(() => {
        // 此处路由到login并添加标记
        router.push(`/login?redirect=${store.getters.activeMenu}`)
    })
    return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
}

在全局路由前置守卫合适的地方添加判断

1
2
3
4
5
6
7
let redirect = new URLSearchParams(location.hash.slice(7)).get('redirect');
if(redirect) {
    location.hash = '';
    next({ path: redirect, replace: true })
} else {
    next()
}

vite 动态引入图片

需求：通过变量形式加载img。

1
2
3
const getAssetsFile = (url) => {
  return new URL(`../../assets/images/common/${url}`, import.meta.url).href;
};

此方式引入图片开发环境没问题，但是打包图片404

原因

解决方式1

直接导入再使用

1
2
3
4
5
6
7
8
import icon_1 from '@/assets/icon/1.png'
import icon_2 from '@/assets/icon/2.png'
// more
const images = {
    icon_1,
    icon_2
    // more
}
1
2
3
<div v-for="(item, index) in array">
    <img :src="images[`icon_${index}`]" />
</div>

解决方式2

全部导入，通过路径去匹配

1
2
3
4
5
const getAssetsFile = (name) => {
  const modules = import.meta.glob('../assets/images/common/*', { eager: true })  // 这里可以写 @ (路径别名) 或者 /src (绝对或相对路径)
  const path = `../assets/images/common/${name}` // 这里不可以写路径别名，只可以写绝对或者相对路已经
  return modules[path]?.default
}

参考文章

element-ui/plus 弹窗组件替换背景

之前替换背景样式总是不免一番大改，如果背景图空白较大，还得调整下弹窗的布局。可谓麻烦之极。所以突发奇想，有啥办法可以一劳永逸，至少不会影响弹窗的布局，比如让背景图在弹窗后面出现。这样只需将弹窗背景设置为透明就没有其他问题了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.el-dialog {
    background: transparent!important;
    &::after {
        content: '';
        background: url("@/assets/images/common/bg_dialog1.png") 0 0/100% 100% no-repeat !important;
        position: absolute;
        width: 104%;
        height: 110%;
        top: -5%;
        left: 0%;
        z-index: -1;
        transform: translateX(-2%);
    }
    &.large-dialog {
        &::after {
            content: '';
            background: url("@/assets/images/common/bg_dialog2.png") 0 0/100% 100% no-repeat !important;
            position: absolute;
            width: 104%;
            height: 110%;
            top: -5%;
            left: 0%;
            z-index: -1;
            transform: translateX(-2%);
        }
    }
}

利用伪类将弹窗等大扩展一下将原来的弹窗包裹进去，这样就可以简单的实现替换弹窗风格了

通过伪类添加图标

伪类支持url, 但是这样会有个问题，缩放时图片的尺寸不受控。如果做了 px2rem 不起作用

1
2
3
4
5
6
7
8
.box {
  &::after {
    content: url("/vite.svg");
    display: inline-block;
    width: 16px;
    height: 16px;
  }
}

修改如下

1
2
3
4
5
6
7
8
9
10
.box {
  &::after {
    content: "";
    background-image: url("/vite.svg");
    background-size: contain;
    display: inline-block;
    width: 16px;
    height: 16px;
  }
}

为element-表格 滚动条设置步进

目的是滚轮滚动一下就实现翻页效果，不分页的表格数据展示中

1
2
3
4
5
6
7
<el-table 
	:data="tableList"
	height="calc(100% - 50px)"
	ref="testTable"
>
...
</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let testTable = ref(null);
function testScroll (e) {
    e.preventDefault();
    let step = 320;
    if (e.wheelDeltaY > 0) {
        this.scrollTop -= step;
    } else {
        this.scrollTop += step;
    }
    console.log(this.scrollTop, this);
}

onMounted(()=> {
    // 获取 el-table 的滚动 DOM 容器元素
    const tableWrapper = testTable.value.$el.querySelector('.el-table__body-wrapper .el-scrollbar .el-scrollbar__wrap');  
    // 监听滚动事件  
    tableWrapper.addEventListener('wheel', testScroll);
})

通用图标解决方案

  1. iconfont

    iconfont只有 fontawesome 的css文件，没有其他用法，但是图标比 fontawesome 多，全免费，但是风格不都统一需要筛选

  2. fontawesome

    图标较少，pro版本不是免费

    1
    2
    3
    4
    5
    6
    7
    8
    |-/css/       # 用于web开发时候使用，一般情况下只需引用这里的all.min.css即可正常使用fontawesome字体图标了）
    |-/js/        # 用于一些高级用法比如配合svg使用，以及图标/动画/旋转/蒙版/等等）
    |-/less/      # 字体图标 Less 样式文件
    |-/metadata/  # 图标集 Meta 数据文件
    |-/scss/      # 字体图标 Scss 样式文件
    |-/sprites/   # 字体图标 SVG合集文件
    |-/svgs/      # 这里有全部的单独的svg图标，可以用于PPT/Axure/等原型软件
    |-/webfonts/  # 核心字体文件

vue3 路由传参，参数隐藏不在地址栏显示（history）

跳转

1
2
3
4
5
6
7
8
const SkipPage = (row) => {
    let obj = JSON.stringify(row)
    router.push({
        path: '/supplyDesc',
        state: { obj }
    })
}

接收

1
2
3
onMounted(()=>{
  console.log(JSON.parse(history.state.obj))
})

此方式传参页面刷新有效，且不能清空。除非修改history

1
2
3
4
5
// 清空当前页面的 history.state
history.pushState(null, null, location.href);
 
// 或者使用 replaceState 方法
history.replaceState(null, null, location.href);

主题相关函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
// 处理主题样式

export function handleThemeStyle(theme) {

  document.documentElement.style.setProperty('--el-color-primary', theme)

  for (let i = 1; i <= 9; i++) {

​    document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(theme, i / 10)}`)

  }

  for (let i = 1; i <= 9; i++) {

​    document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, `${getDarkColor(theme, i / 10)}`)

  }

}



// hex颜色转rgb颜色

export function hexToRgb(str) {

  str = str.replace('#', '')

  let hexs = str.match(/../g)

  for (let i = 0; i < 3; i++) {

​    hexs[i] = parseInt(hexs[i], 16)

  }

  return hexs

}



// rgb颜色转Hex颜色

export function rgbToHex(r, g, b) {

  let hexs = [r.toString(16), g.toString(16), b.toString(16)]

  for (let i = 0; i < 3; i++) {

​    if (hexs[i].length == 1) {

​      hexs[i] = `0${hexs[i]}`

​    }

  }

  return `#${hexs.join('')}`

}



// 变浅颜色值

export function getLightColor(color, level) {

  let rgb = hexToRgb(color)

  for (let i = 0; i < 3; i++) {

​    rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i])

  }

  return rgbToHex(rgb[0], rgb[1], rgb[2])

}



// 变深颜色值

export function getDarkColor(color, level) {

  let rgb = hexToRgb(color)

  for (let i = 0; i < 3; i++) {

​    rgb[i] = Math.floor(rgb[i] * (1 - level))

  }

  return rgbToHex(rgb[0], rgb[1], rgb[2])

}

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。