随笔分类 - Vue 杂记
vue项目中遇到的问题
vue实现点击任意位置关闭侧滑显示
摘要：需求：点击el-table列表展示侧滑框，再次点击列表中不同数据，刷新侧滑框中数据；点击外部任意位置关闭侧滑框 思路：给整个页面加点击事件 click，通过target判断点击的外层元素以及点击的位置，执行关闭侧滑框方法 代码：mounted中监听click事件 mounted() { let do
阅读全文
vue3+TS+vite实现瀑布流列表
摘要：安装依赖 npm install vue-waterfall-plugin-next vue文件中引入使用 <script setup lang="ts"> import { RouterLink } from 'vue-router' import { Waterfall } from 'vue-
阅读全文
el-table使用sortablejs推拽排序卡顿问题解决
摘要：使用sortablejs拖拽el-table排序时，对于纯文本表格，正常使用即可，不会卡顿 initSort() { const tbody = document.querySelector('.el-table__body-wrapper tbody') const _this = this So
阅读全文
Vue 项目报错Uncaught SyntaxError: Unexpected token ＜ 刷新之后又可以继续访问问题解决
摘要：场景： 页面打开不操作，前端项目代码更新重新部署后（比如Jenkins发布部署）页面不刷新，操作页面(点击打开弹窗、切换菜单等)，页面没有反应，控制台报错 Uncaught SyntaxError: Unexpected token <。这个问题偶现，只有在项目重新部署后会出现，页面刷新后就恢复正常
阅读全文
前端使用WebSocket
摘要：// 初始化 let socketUrl = "ws://127.0.0.1/notification/1920102920123232"; // 也有加密的协议 let socketUrl = "wss://127.0.0.1/notification/1920102920123232"; let
阅读全文
window.open页面卡死
摘要：使用window.open()打开新页面预览文件，父子页面均卡死，查资料找到解决方案： window.open(url,"_blank","noopener"); 加第三个参数“noopener” 参考： https://blog.csdn.net/wuyulkl/article/details/1
阅读全文
多个Echarts快速切换数据显示错乱问题
摘要：问题：Echarts图表快速切换，最后一次渲染中有上次的数据 解决：在 setOption方法之前，先clear // 快速切换显示错乱 先清理上次数据 Chart?.clear() Chart?.setOption(option)
阅读全文
JS获取302重定向后的地址
摘要：使用fetch API来发送一个HTTP请求，然后获取response.url属性 fetch('原始URL') .then(function(response) { if (response.ok) { var redirectedURL = response.url; console.log(r
阅读全文
JS获取URL字符串中的参数
摘要：// 获取完整的URL字符串 var url = window.location.href; // 获取URL字符串中的参数部分 var params = url.split('?')[1]; // 将参数部分按照&符号分割成数组 var paramsArray = params.split('&'
阅读全文
前端添加配置文件——webpack打包部署后可配置
摘要：1.在public文件夹下，新建config/config.js文件 window["edmConfig"] = { loginConfig: { loginSource: "d d d", loginUrl: "a a a", service: "c c c" } } 2.在index.html中
阅读全文
vue引入外部样式只在当前文件生效
摘要：引入外部文件时，想要只在当前组件使用，但是我们使用如下方式时，会在全局使用。因为在scoped起作用的时候，import还没有引入这个文件 <style scoped> @import "../../xx.css" </style> 使用以下方式即可 <style scoped src="../..
阅读全文
vue3+element-Plus表格滚动联动
摘要：const Table0 = ref() const Table1 = ref() function syncScroll() { for (let i = 0; i < compareData.compareInfo.length; i++) { let firstTable = Table0.v
阅读全文
前端全局页面添加水印
摘要：// 下载npm包npm install watermark-package -S 使用 import watermark from "watermark-package"; // 添加水印 watermark.setWaterMark({ w_texts: [data.userName, data
阅读全文
elementUI使用v-if控制tab标签显示报错 Duplicate keys detected: 'xxx'
摘要：<el-tabs @tab-click="handleClick" v-model="activeTabName"> <el-tab-pane v-if="" label="用户管理" name="first" ref="first" >...</el-tab-pane> <el-tab-pane
阅读全文
vue Router通过params传参，设置参数不必传
摘要：params传递参数要在路由表中配置参数 参数不必传加个 ? 即可 path: '/process/design/:code?',
阅读全文
vue使用纯CSS实现多行文本的“展开”与“收起”功能
摘要：// 创建组件 <template> <!-- 文档搜索列表展开/收起组件 实现了文档搜索列表页 文档超过5行会显示展开/收起的功能 --> <div class="mj-text-hide"> <input :id="`group-members_exp${index}`" class="grou
阅读全文
vue连接WebSocket
摘要：// webSocket.js let Socket = '' let setIntervalWesocketPush = null let socketUrl = ""; /** * 建立websocket连接 * @param {string} url ws地址 */ export const
阅读全文
前端下载文件时responseType设置为'arraybuffer'，响应转JSON对象
摘要：设置为'arraybuffer'后当响应是400或500时也会下载下来，因此转位JSON对象做判断 const result = await Promise.all(promise); if (result) { try { // 转换成功 let enc = new TextDecoder('ut
阅读全文
vue中实现拖动调整 左右/上下 div的宽度
摘要：vue中实现拖动调整 左右/上下 div的宽度
阅读全文
