javascript： 8 篇

2024年2月

router.go()妙用

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 小结#

果然还是得实践。

2024年1月

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

前端 javascript vue3 element plus

1 背景#

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

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

2 实现#

构造一个用 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 啦。

2023年12月

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

前端 javascript vue3 element plus

1 需求来源#

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

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，列数需要是固定的，不然我们不知道“展开/收起”按钮展示及切换的时机。

2023年11月

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

前端 javascript vue3 vue router

1 需求#

直接上需求：

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

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

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

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

2023年10月

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

前端 javascript vue3 vue router

1 起源#

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

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

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

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 ,就到这里啦，对此你有何看法或想法呢，欢迎提出讨论呀~

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>