Fork me on GitHub

vue 实践与优化

在使用 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])

}

展开全文 >>

linux 常用命令

用命令netstat查侦听端口

netstat 是一个命令行工具，可以提供有关网络连接的信息。

要列出正在侦听的所有TCP或UDP端口，包括使用端口和套接字状态的服务，请使用以下命令：

1
sudo netstat -tunlp

此命令中使用的选项具有以下含义：

  • -t - 显示TCP端口。
  • -u - 显示UDP端口。
  • -n - 显示数字地址而不是解析主机。
  • -l - 仅显示侦听端口。
  • -p - 显示监听器进程的PID和名称。仅当您以root或sudo用户身份运行命令时，才会显示此信息。
more >>

展开全文 >>

项目中遇到的样式问题

scss 文件引入样式不生效

​ vue + sacc 项目, 公用样式 common.scss 样式嵌套写法导入不生效

现象：样式表只有最外层样式生效，嵌套样式不生效（没有解析嵌套语法）

下面这种方式导入，样式不能嵌套写。 必须使用 层级选择器方式

1
@import url('@/style/common.scss');

解决：

1
@import '@/style/common.scss';
more >>

展开全文 >>

页面 rem 适配

rem 自适应方案

宽度 1920 时, 1rem 等于 100px.方便换算

1
2
3
4
5
6
7
8
9
10
11
12
(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
    recalc = function() {
        var width = docEl.clientWidth / 19.20;
        docEl.style.fontSize = width + "px";
        scaleNum = width;
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);
more >>

展开全文 >>

patch-package

patch-package 这个库来解决这类问题。一方面，它能记录第三方库代码的改动，另一方面也能将改动同步到团队每个成员。

1
npm install patch-package -D

注意: 要改动的包在 package.json 中必须声明确定的版本，不能有~或者^的前缀。

more >>

展开全文 >>

typescript 语法基础

基本数据类型

number，string，boolean，symbol、bigint、object，null或undefined

基本类型

  • any 类型

    any 类型可以赋值任何类型，同样 any 类型可以赋值给其他类型造成污染

  • unkonwn 为避免any类型污染问题，unknown类型作用与any一致，但是它只能赋值到unknown/any类型的变量上

    要想使用 unknown 类型，必须缩小范围，否则无法使用

    • uknouwn运算有限， 只能进行比较运算（运算符==、===、!=、!==、||、&&、?）、取反运算（运算符!）、typeof运算符和instanceof运算符这几种

      1
      2
      3
      4
      5
      let a:unknown = 1;

      if (typeof a === 'number') {
        let r = a + 10; // 正确
      }
    1
    2
    3
    4
    5
    let a:unknown = 1;

    if (typeof a === 'number') {
      let r = a + 10; // 正确
    }

  • never

    为了保持与集合论的对应关系，以及类型运算的完整性，TypeScript 还引入了“空类型”的概念，即该类型为空，不包含任何值。

    由于不存在任何属于“空类型”的值，所以该类型被称为never，即不可能有这样的值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    1、函数抛出错误，不可能有返回值
    function f():never {
      throw new Error('Error');
    }
    2、剩余的情况就属于never类型
    function fn(x:string|number) {
      if (typeof x === 'string') {
        // ...
      } else if (typeof x === 'number') {
        // ...
      } else {
        x; // never 类型
      }
    }
    3、变量x的类型是never，就不可能赋给它任何值，否则都会报错。
    let x:never;

  • object 类型

    大写的Object类型代表 JavaScript 语言里面的广义对象。所有可以转成对象的值，都是Object类型，这囊括了几乎所有的值。除了 Null / undefined

    1
    2
    3
    4
    5
    6
    7
    8
    let obj:Object;
     
    obj = true;
    obj = 'hi';
    obj = 1;
    obj = { foo: 123 };
    obj = [1, 2];
    obj = (a:number) => a + 1;

  • undefined/null

    既是值，又是类型。

    作为值，它们有一个特殊的地方：任何其他类型的变量都可以赋值为undefined或null。

1
2
3
4
5
6
7
8
9
const str: string = 'hello there'

const num: number = 123

const bool: boolean = false

let n: null = null

let u: undefined = undefined
more >>

展开全文 >>

isarray 兼容旧版本浏览器

判断一个对象是否为数组，兼容 哪些旧版本浏览器。

如果 不需要兼容旧版浏览器，建议直接使用 数组的 isArray 方法

安装

1
$ npm install isarray

示例

1
2
3
4
var isArray = require('isarray');
 
console.log(isArray([])); // => true
console.log(isArray({})); // => false

简单的展示其原理

1
const isArray = Array.isArray || list => ({}).toString.call(list) === '[object Array]'

展开全文 >>

方便快捷的实现图片裁剪

JavaScript image cropper

官网

1.5.12文档

CDN 地址

1
2
3
4
5
6
7
// 2.0
<link href="https://cdn.bootcdn.net/ajax/libs/cropperjs/2.0.0-alpha.1/cropper.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/cropperjs/2.0.0-alpha.1/cropper.min.js"></script>

// 1.5.12
<link href="https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.12/cropper.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# cropper - 裁剪图片 - IE9+

## 使用 cropperjs

import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
this.myCropper = new Cropper('被裁剪对象', '配置对象') //返回一个cropper对象

this.myCropper.getCroppedCanvas().toDataURL('image/jpeg') //拿到裁剪后的base64的图片
this.myCropper.getCropBoxData();    //获取裁剪框数据
this.myCropper.setCropBoxData();    //设置裁剪框数据
this.myCropper.getCanvasData();      //获取图片数据
this.myCropper.setCanvasData();      //设置图片数据

more >>

展开全文 >>

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

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