跳到主要内容位置
18
2024年6月
12
2024年5月

Vue3使用Element Plus单个Tag标签文字过长自动换行代码实现

前端Element Plusvue3

1 需求引入#

直接上图，原先程序显示效果是这样：

image-20240807172107258

由上图可见，element plus 的 tag 标签组件里面内容过长时，把页面都撑开了，不能自动换行，我的 tag 标签代码原先是这样写的

<div style="width: 100%; margin-bottom: 5px">
<el-tag v-if="uploadMessage.successMessage.length > 0" :type="'success'" effect="plain">
{{ uploadMessage.successMessage }}
</el-tag>
</div>

2 解决需求，代码实现#

先看解决效果图：

image-20240807172500463

如何解决的呢，只要我们再单独写一下 css 的样式就 ok 了，看下面的 css 样式代码：

.el-tag {
white-space: normal;
height: auto;
padding: 2px;
display: inline-block;
}

好了，直接加上上面这段 css 代码就 ok 了。

3 小结#

我当时用这个标签是显示错误信息的，后来发现 element 的 Alert 组件用于现实错误信息才比较合适，因为那个有个关闭的按钮，既然已经写了，就记录一下吧~ 希望对看文章的你也有些用吧 ~ >_< ~

10
2024年4月

async、await的这个小细节你知道？async、await多次实践使用后的一点小结（async返回异步问题）

前端vscodeES6javascript

前言#

我们都知道async、await 是用来将“同步函数变成异步函数，可以同步获取到里面异步函数的返回值”的，比如我们在请求一个接口的时候，这个接口的返回值是一个异步的，那我们就可以用 await 将这个异步接口返回变成同步，使我们可以同步的获取到接口的返回值，然后在紧接着的下文中就可以直接用这个接口的返回值。

一 实例 1#

循序渐进，先上一个简单的代码

const asyncFun = (value: number) => {
return new Promise((resolve, reject) => {
// 模拟一个异步请求
setTimeout(() => {
resolve(value + 1)
}, 2000)
})
}
const getValue = async () => {
let result = await asyncFun(1)
console.log('result:', result)
}
getValue() // result:2

如上图代码，输出的结果是

result: 2

我们来浅分析一下这段代码，这段代码其实我们是模拟了一个接口请求的操作，asyncFun(value: number)返回一个 Promise，Promise 就代表这个结果是一个异步的，当我们调用这个函数时得到的结果就会等所有同步代码执行完以后才会得到这个 Promise 的结果。

如果我们调用asyncFun(value: number)这个函数想要同步获取到里面的结果，获取完这个结果后，紧接着同步执行下面的代码，那我们就要使用async、await 来解决，这是ES6 推出的新语法，好用的很啊，但是也有一些细节需要注意（下文会提到）。

所以我们在使用getValue() 这个函数调用asyncFun(value: number)时，首先在getValue()函数头部加了 async，声明咱这个函数是一个异步函数，这样在这个函数里面我们就可以用await将异步的返回值转为同步获取到了，所以await asyncFun(1); 的意思是等这里完全执行完（2 秒之后），获取到value+1这个具体数值，然后才会执行console.log('result:', result); 这句话。

所以上面这段代码最后输出的就是

result: 2

二 实例 2（踩坑记录）#

同样的，咱们也是直接上代码块，大家看一下这段代码输出的是个啥：

const asyncFun = (value: number) => {
return new Promise((resolve, reject) => {
// 模拟一个异步请求
setTimeout(() => {
resolve(value + 1)
}, 2000)
})
}
const getValue = async () => {
let result = await asyncFun(1)
return result
}
const add666Value = () => {
let result: any = getValue()
result = result + '666'
console.log('result:', result)
}
add666Value()

上面这段代码就是将getValue()方法又封装了一遍，得到这个结果，然后再去输出这个结果，那么大家觉得这个是个啥值呢？可能有的人会认为输出的是result: 2666，其实不然，真正输出的结果是：

result: [object Promise]666

嘿嘿，这是为啥呢？这就是前面说的那个小细节了，使用 async 声明的函数其返回值是一个 Promise。通常我们写一个普通函数，想 return 啥它就能直接 return 啥，但是只要在这个函数头上加了 async ，那它就会返回 Promise 类型，这个函数的返回值就是一个异步的了，等到所有同步函数执行完以后才会等到里面的确切值。

比如这个小例子 1：

const littleExample1 = () => {
const a = 1
return a
}

这个littleExample1()的返回值就是一个 number 类型的 1;

而看下面这个小例子 2：

const littleExample2 = async () => {
const a = 1
return a
}

嘿，这个小例子 2 返回的就是个 Promise 了，你就说细节不细节，之前都没关注过，但这个场景确实在实际使用中有用到的，然后我就说为啥返回值不是预期的值呢，结果一排查就是这个 async 的原因。

三 实例 2 解决方案#

话不多说，我们来看看 实例2 中的代码块如何处理才能得到一个我们预期的值，也就是： result: 2666 ，直接上代码：

const asyncFun = (value: number) => {
return new Promise((resolve, reject) => {
// 模拟一个异步请求
setTimeout(() => {
resolve(value + 1)
}, 2000)
})
}
const getValue = async () => {
let result = await asyncFun(1)
return result
}
const add666Value = async () => {
let result: any = await getValue()
result = result + '666'
console.log('result:', result)
}
add666Value()

ok，这样子就是我们预期的输出结果了，也就是我们将add666Value()前面加了个 async ，将其声明为异步函数 ，getValue()前面再加个await ,这样getValue()返回的结果就不是 Promise 了，result 就可以得到一个 number 类型的 2，number 类型+string 类型时前面的 number 类型会变成 string 类型，相当于'2'+'666'，所以最终输出的结果就是：

result: 2666

至此，async返回异步问题已解决。

四 加强记忆#

知识点参考：

  • AsyncFunction

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction

4
2024年3月

vscode代码片段自动转图标禁用（el-tag代码自动转成了图标问题排查）

前端vscode

前言#

今天在写代码时，一时觉得代码里面有一些图标，光标移到那里代码又显示处理了，这样会使那行代码忽长忽短，看起来很变扭，着实难受。早就看到了，但是不知道这个是啥原因导致的，然后就百度了一度，本以为是插件的原因，结果发现是 vscode 配置导致，下面情况问题及解决方案：

1 有图标的代码显示#

img

2 改完之后无图标的代码显示#

img

这样看起来比之前舒服多了....

3 详细解决流程#

设置->搜索 iconify，然后把下面这个 √ 去掉就 OK 了~

img

改为这个就 ok 啦~ 代码就会自动变为代码了~

2
2024年2月

router.go()妙用

前端javascriptvue3element plus

1 背景#

最近在做动态路由相关的功能实现，涉及到一些页面跳转的功能，我们都知道返回上一页用的是 router.go(-1)，它的意思就是说返回上一个路由地址。

但是，现在有这么一个场景（技术栈：vue3+"vue-router": "^4.1.6"），比如原来我是在路由地址 A，然后我点击了路由 B，我会在前置路由钩子里面先检测当前访问的路由地址 B，如果 B 没有权限访问那么就会默认跳转地址 C（这个是 404 页面），在地址 C 的 404 页面里面有个返回上一页按钮。

我给返回上一页按钮写的事件如下：

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { House } from '@element-plus/icons-vue'
const router = useRouter()
const goIndex = () => {
router.go(-1)
}
</script>
<template>
<div class="container">
<img src="../assets/picture/common/404.png" alt="" class="img" />
<div class="text">当前页面不存在</div>
<el-link type="primary" :icon="House" @click="goIndex">回到上一页</el-link>
</div>
</template>

可是呀，事实情况总是事与愿违，但我执行router.go(-1) 这句话的时候并不能直接返回我原来的路由地址（A 地址），而是返回了那个没有权限访问的 B 地址（尽管页面没有真正跳转到 B 地址，但是路由地址里面会显示），而且再点击一下才会真正返回到想要的上一页路由地址 A 页面。

显然，这不是我想要的，那咋办呢，请看我下面的实现：

2 突发奇想的实现#

我想既然跳转一次不行，那我跳转 2 次呢，实现如下：

const goIndex = () => {
router.go(-1)
router.go(-1)
}

哈哈，我运行了上面这段代码，显然不行，于是乎，我又改成了下面这样，

const goIndex = () => {
router.go(-2)
}

果然，将-1 改成了-2，就可以直接跳转到前两页的位置，竟然就是这么简单！

3 小结#

果然还是得实践。

6
2024年1月

vue3+element puls upload组件回显图片base64的实现

前端javascriptvue3element plus

1 背景#

最近遇到个需求，需要基于 vue3+element plus 的 upload 组件回显图片，通常我们是通过后端直接返回的 url 来回显就行了，而且在 element plus 也给出了示例：

image-20240123171340359

不过，o_O，我们下面将要以 base64 的形式来填充，其实也很简单，自己构造一个这样的对象就行了，url 里面放我们 base64 字符串，然后其他的造成即可，下面请看我的实现样例：

2 实现#

image-20240126173506038

  • 构造一个用 base64 字符串填充的文件列表
let fileList = ref([
{
// 这是文件名字
name: '文件名1',
// 这里是我自己定义的自定义属性，可有可无
fileId: '1',
// 这里是base64字符串，咳咳我们后端返回的格式有点特殊，所以我又给转换了一下，成为真正的base64字符串
url: 'data:image/png;base64,' + new BaseTool().arrayBufferToBase64(temp?.arrayBuffer)
}
])
  • 将图片列表渲染到组件里
<el-upload action="#" list-type="picture-card" v-model:file-list="fileList" :auto-upload="false">
<el-icon><Plus /></el-icon>
<template #file="{ file }">
<div>
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<el-icon><zoom-in /></el-icon>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file, item.dataValue)"
>
<el-icon><Delete /></el-icon>
</span>
</span>
</div>
</template>
</el-upload>

重点就是替换上面 fileList 就可。

3 小结#

ok 啦。

15
2023年12月

vue3+element plus实现查询条件展开和收起功能

前端javascriptvue3element plus

1 需求来源#

image-20231129134425954

如图所示，这样一个查询页面，上面的条件太多，使得下面的列表展示的空间就变得很小了。所以，需要有一个东西控制，当条件太多时，就展示一个展开/收起按钮，可以控制查询条件的展开和收起。

2 实现效果图#

我们先直接来看下最终实现的效果图

screenshots

如果这就是你想要的，可以继续看下面的实现关键代码

3 具体实现关键代码#

<script setup lang="ts">
const conditionFold = ref(true)
const conditionInitShowLength = 6
const areConditionFold = () => {
conditionFold.value = !conditionFold.value
}
</script>
<template>
<div class="header customDiv">
<el-form ref="formRef" :inline="true" :model="formDataConfig" class="demo-form-inline">
<el-row>
<el-col :span="6">
<el-form-item label="查询逻辑">
<el-select v-model="filtersLogic" placeholder="默认同时符合">
<el-option label="同时符合" :value="0" />
<el-option label="部分符合" :value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col
:span="6"
v-for="(item, index) in formDataConfig.slice(
0,
conditionFold ? conditionInitShowLength : formDataConfig.length
)"
:key="item.key"
>
<el-form-item :label="item.label" :prop="`[${index}]value`">
<el-date-picker
v-if="item.type === 'date'"
v-model="item.value"
type="datetimerange"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
/>
<el-input
v-else-if="item.type === 'input' || !item.type"
v-model="item.value"
placeholder="请输入"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-button type="primary" @click="onSubmit(formRef)">查询</el-button>
<el-button type="primary" @click="resetForm(formRef)">重置</el-button>
<el-button
v-if="formDataConfig.length > conditionInitShowLength"
type="primary"
link
@click="areConditionFold"
>
{{ conditionFold ? '展开' : '收起' }}
<el-icon v-if="conditionFold"><ArrowDown /></el-icon>
<el-icon v-else><ArrowUp /></el-icon>
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>

ok，代码就是上面的代码，可能少了一些变量，但是思路还是挺清晰的，主要就是通过conditionFold来控制按钮是否展示，conditionInitShowLength来控制收起时显示的默认长度。

4 技术小结#

当我们使用“展开/收起”按钮时，需要搭配row、col，列数需要是固定的，不然我们不知道“展开/收起”按钮展示及切换的时机。

23
2023年11月

vue3+element plus图片预览直接点击按钮就显示图片的预览形式

前端javascriptvue3vue router

1 需求#

直接上需求：

我想要直接点击下面这个“预览”按钮，然后呈现出预览图片的形式

image-20231120090930791

也就是点击完“预览”按钮，会像下面这样：

image-20231120091054028

ok，需求知道了，下面让我们来看看如何实现吧 ~

2 实现#

template 部分

<el-button type="primary" size="small" @click="handlePreview(scope.$index, scope.row)">预览</el-button>
<!-- 图片预览 -->
<el-image-viewer v-if="showImagePreview" :zoom-rate="1.2" @close="closePreview" :url-list="imgPreviewList" />

script 部分

const imgPreviewList = ref < any > []
const showImagePreview = ref(false)
const currentBase64FileData = reactive({
base64: '',
name: ''
})
const handlePreview = async (index: number, row: any) => {
let res = await handleDownload(index, row, true)
currentBase64FileData.base64 = 'data:image/png;base64,' + res?.base64
currentBase64FileData.name = res?.name
showImagePreview.value = true
// 下面数组里可以放一个url，如'https://raw.githubusercontent.com/JACK-ZHANG-coming/map-depot/master/2023image-20231120091054028.png'，我这里放的是一个base64数据，也可以用来显示图片
imgPreviewList.value = [currentBase64FileData.base64]
}
const closePreview = () => {
imgPreviewList.value = []
showImagePreview.value = false
}

ok，经过上面简单几句代码，就实现了“点击按钮直接显示图片的预览形式”啦 ~

3 技术小结#

技术栈： vue3+ element plus，其中 vue3 采用的是 script setup 组合式语法的形式。

这部分功能其实在 element plus 官方文档中有写，

https://element-plus.org/zh-CN/component/image.html#image-viewer-api

image-20231120100147616

不同的是，这里 element plus 并没有给出实际样例，只是用文字描述了下，咱就是说，家人们，这坑不坑，我还是看了别人的博客才知道这块的用处>_<

18
2023年10月

Vue3+Vue Router跳转相同路由监听页面刷新并执行某个操作

前端javascriptvue3vue router

1 起源#

最近遇到了个这样的需求，大概就是：点击某个按钮，进入某个页面，然后再在这个页面执行某个操作（比如请求某个接口、赋初始值啥的）。

image-20231116163902611

这个需求看似简单，其实也不难。但是，我遇到了个问题，就是当在那个页面点击这个按钮的时候，因为跳转路由路径是一样的原因，页面是不会刷新的，那我怎么判断我是否我是否点击了那个按钮并且跳到了这个页面呢？

于是，我想到了路由传参，通过路由传参的方式，判断这个参数是否变化了，变化了就代表这个路由再次进入了。

2 解决方案#

用 query 的方式传参，参数附上时间戳，这样每进来一次都是不同的参数

点击按钮如下操作：

const router = useRouter()
const goDocumentNotification = () => {
router.push({
path: `/documentNotification`,
query: {
t: Date.now()
}
})
}

在进入的那个页面增加如下代码：

// 使用 watch 监听 route 的变化
watch(
() => route.query.t,
(newPath, oldPath) => {
// 路由变化，执行相应操作
query()
}
)

ok，经过上面的操作便可以在跳转相同路由下，监听页面刷新并执行某个操作啦。

3 知识扩展-关于 Vue Router 路由传参的几种常用方式#

说到这里，vue-router 传参的几种方式也顺便总结一下吧

3.1 params 传参（显示参数）#

浏览器里路由地址显示为这样：

http://127.0.0.1:5190/drs/index.html#/documentNotification/0

声明式：

// 子路由配置 { path: '/documentNotification/:id?', // ?代表这个参数为可传可不传 name: 'documentNotification', component: () => import('@/views/documentNotification/index.vue'), meta: { title: '发放通知', } } // 父路由组件
<router-link :to="/documentNotification/123">进入documentNotification路由</router-link>

编程式：

// 子路由配置
{
path: '/documentNotification/:id?', // ?代表这个参数为可传可不传
name: 'documentNotification',
component: () => import('@/views/documentNotification/index.vue'),
meta: {
title: '发放通知',
}
}
// 父路由编程式传参(一般通过事件触发)
router.push({
path:'/documentNotification/${yourParam}',
})

关于参数的获取：

route.params.id

3.2 params 传参（不显示参数）#

由于从 Vue Router 的 2022-8-22 这次更新后，便不能再用这种方式来写，关于不显示参数的传参，可以参考下面这篇博客：

https://blog.csdn.net/m0_57033755/article/details/129927829

3.3 query 传参#

浏览器里路由地址显示为这样：

http://localhost:3000/#/documentNotification?t=1700140985974

声明式：

//子路由配置
{
path: '/documentNotification',
name: 'documentNotification',
component: () => import('@/views/documentNotification/index.vue'),
meta: {
title: '发放通知'
}
}
//父路由组件
<router-link :to="{name:'documentNotification',query:{t:123}}">进入documentNotification路由</router-link>

编程式：

//子路由配置
{
path: '/documentNotification',
name: 'documentNotification',
component: () => import('@/views/documentNotification/index.vue'),
meta: {
title: '发放通知'
}
}
router.push({
path: `/documentNotification`,
query: {
t: Date.now()
}
})

关于参数的获取：

route.query.t

4 结语#

ok ,就到这里啦，对此你有何看法或想法呢，欢迎提出讨论呀~

19
2023年6月

浏览器自带api语音播报speechSynthesis.speak()无法自动播报问题分析及非完美解决方案

前端javascript

在这里插入图片描述

1 需求描述#

最近遇到一个需求，就是前端页面要实时监听后端传过来的数据，同时当后端传过来这条数据时前端界面要语音播报这条数据。

2 分析与解决方案#

这里主要说说语音播报的部分。本来觉得用浏览器自带的 API 来实现直接写一句话就 ok 了，但是没想到居然有一个 bug。那就是这条语音有时候能播报，有时候就没有声音了？为什么呢，查了半天，是浏览器的安全限制的问题，需要用户交互才能播放声音，这个问题困扰了一两天，找到了如下两条解决方案：

  • 第一个就是用按钮点击，当我们播报声音时，第一次播报必须得是用户用交互动作操作才行，显然我这里不能让用户点击，因为它是后台自动播报的，嘿嘿，这可难不到我，写了个模拟按钮点击事件，就 ok 啦~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>语音播报</title>
</head>
<body>
<h3>点击下方按钮可以进行语音播报</h3>
<hr />
<button onclick="areSpeak('哈哈哈哈哈，这是声音~')">播放声音</button>&nbsp;&nbsp;<button onclick="beQuiet()">停止播放</button>
</body>
<script>
//#region 语音播报封装
const areSpeak = newMsg => {
// 初次播报使用模拟按钮触发
virtualClick(SpeakVoice)
speakWithDelay(newMsg)
}
/**
* 语音播报
* @param msg 播报的信息
*/
const SpeakVoice = (msg = '') => {
const speech = new SpeechSynthesisUtterance(msg)
// 设置兼容中文
const voices = window.speechSynthesis.getVoices()
speech.voice = voices.filter(function (voice) {
return voice.localService == true && voice.lang == 'zh-CN'
})[0]
window.speechSynthesis.speak(speech)
}
/**
* 语音播报 带延迟 异步
* 搭配async await
* @param msg 播报的信息
*/
const speakWithDelay = (utterance, delay = 1000) => {
return new Promise(resolve => {
const speech = new SpeechSynthesisUtterance(utterance)
// 设置兼容中文
let voices = window.speechSynthesis.getVoices()
speech.voice = voices.filter(function (voice) {
return voice.localService == true && voice.lang == 'zh-CN'
})[0]
speech.onend = () => {
setTimeout(resolve, delay)
}
window.speechSynthesis.speak(speech)
})
}
/**
* 模拟按钮点击
* @param callback
*/
const virtualClick = callback => {
let button = document.createElement('button')
button.textContent = '点击我'
// 添加点击事件处理程序
button.addEventListener('click', function () {
console.log('按钮被点击了')
callback && callback()
})
// 模拟用户点击事件
let event = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
})
button.dispatchEvent(event)
}
const beQuiet = () => {
console.log('停止')
window.speechSynthesis.cancel()
SpeakVoice('')
}
//#endregion
</script>
</html>
  • 第二种解决方案就是用其他第三方的库，不过基于浏览器的安全限制，可能也会存在无法在后台自动播放的情况，所以这里还是没有采用其他第三方的库。

3 参考链接#

官方文档：

​ https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesis

其他小伙伴的博客：

​ https://blog.csdn.net/pridas/article/details/119097189

​ https://blog.csdn.net/qq_47247479/article/details/126933326

4 源码地址#

https://github.com/JACK-ZHANG-coming/frontEnd-all-knowledge/tree/master/examples/funnyDemo/a05%E8%AF%AD%E9%9F%B3%E6%92%AD%E6%8A%A5%E5%8A%9F%E8%83%BD

如果屏幕前的小伙伴有什么好的解决方案也可以分享一下哦