随笔分类 - vue
摘要：vue3之跳转页面时判断是否跳转 onBeforeRouteLeave((to, from, next) => ( if (ruleAllChange .value）{ ElMessageBoxconfirm( "数据未保存，请问是否继续跳转？", "确认" {confirmButtonText:"
阅读全文
摘要：Top-level await 新特性 「ECMAScript」提案 Top-level await 由 Myles Borins 提出，它可以让你在模块的最高层中使用 await 操作符。在这之前，你只能通过在 async 函数或 async generators 中使用 await 操作符。To
阅读全文
摘要：vue3+tiff.js展示tif文件 场景：tif格式的文件需要在页面上预览（预览的tif文件较小） 组件：tiff.js npm install tiff.js 组件引入： import 'tiff.js'; 注意：网络上的信息引入使用import Tiff from 'tiff.js' 但是实
阅读全文
摘要：vue加载依赖报错：npm ERR! cb() never called! npm ERR! This is an error with npm itself. npm install 报错： npm ERR! cb() never called! npm ERR! This is an error
阅读全文
摘要：vue之$emit返回值 应用场景：子组件调用父组件的方法并获取到父组件方法的返回值 // 父组件getdata(){ return data}// 子组件let data = this.$emit("getdata", bounds) return data 这种写法是错误的，拿到的data是指向
阅读全文
摘要：vue之在方法中添加dom 写vue代码的过程中经常碰到需要动态添加dom的情况，一直没有找到合适的解决方法。今天记录一个比较蠢的玩法。 js原生创建dom，再添加进dom中去。 代码示例： 1.添加a标签后点击，经常用在下载文件的实践封装： let link = document.createEl
阅读全文
摘要：video.js视频播放 npm引入： npm i video.js 引入： import Video from 'video.js' import 'video.js/dist/video-js.css' html： <video ref="myVideo" class="video-js" st
阅读全文
摘要：vue之监听对象的改变 一、对象监听 1. 深度监听 <template> <div id="test"> <button @click="changeAge">change</button> </div> </template> <script> export default { name: 't
阅读全文
摘要：Element-ui组件库Table表格导出Excel文件 1.npm导入包 npm install --save xlsx file-saver 2.给el-table标签添加id <el-table :data="tableData" border id="out-table" > 3.引用包
阅读全文
摘要：vue 之 pdf预览 加载包：pdfvuer 引入： 组件代码(简化版)： 1 <template> 2 <div id="pdfvuer"> 3 <div ref="buttons" id="buttons"> 4 <a class="item" @click="page > 1 ? page-
阅读全文
摘要：vue-cli3 本地数据模拟后台接口 原理： 将本地的json数据在前端模拟为后台接口，然后调用接口，完成前端操作。在后台接通后可以直接在api配置文件中修改路径，完成前后台对接。 配置： 1.文件目录 2. 安装express 3.配置vue.config.js 3.1配置express 3.2
阅读全文
摘要：vue-cli之加载ico文件 vue-cli加载ico文件需要在vue.config.js设置ico加载，代码如下： 钻研不易，转载请注明出处、、、、、、
阅读全文
摘要：sass之mixin的全局引入（vue3.0） 1.scss文件（mixin.scss） 2.配置loader 3.使用 在css中直接使用@include调用mixin即可。 钻研不易，转载请注明出处......
阅读全文
摘要：vue之scoped穿透 问题：在页面中，需要了第三方插件的样式，又不想取消scoped，防止造成样式污染 方法：>>> 代码： tab 为需要穿透的组件id 注意： 在sass等解析器中>>>可能不会被识别，需要使用/deep/代替（/deep/ 为 >>> 的别名） 代码： 钻研不易，转载请注明
阅读全文
摘要：iview之tabs嵌套 说明： iview组件中当嵌套使用 Tabs时，需要在Tabs中指定 name 属性来区分层级，然后在TabPane 中设置 tab 属性指向对应 Tabs 的 name 字段。 正确示例： 在每一个Tabs中都需要设置name属性，然后在其包含的所有直接TabPane中设
阅读全文
摘要：iview表单验证之正则 正则验证： 代码： 函数验证： 1.首先在data中定义验证方法 2.在表单验证中插入验证 钻研不易，转载请注明出处......
阅读全文
摘要：$store.getters调用不执行 api：https://vuex.vuejs.org/zh/guide/getters.html 场景： 在登录时将登录得到的用户信息存储在vuex的state和sessionStorage中。使用时在state中获取，当因为刷新等原因导致state中没有数据
阅读全文
摘要：使用iview 的表单组件验证 Upload 组件 结果： 点击提交按钮, 没有填的form 项, 提示错误, 当填入数据后提示验证成功 代码： 钻研不易，转载请注明出处。。。。。。
阅读全文
摘要：axios+FormData文件上传 原理：FormData上传 创建一个FormData对象，将得到的文件流对象放在FormData内，然后使用axios上传 注意： 1.请求头设置 2.FormData对象 无论是用input type=“file”还是一些框架的上传组件，都可以的到一个file
阅读全文
摘要：vue之回车触发表单提交 操作： 在From标签中添加： 注意： 1.若添加在Input标签上，只有聚焦在该input框上有效 2.@keyup是触发键盘事件 3..enter和.13相同 4.加上.native覆盖原有封装的keyup事件 5.handleSubmit是提交方法 钻研不易，转载请注
阅读全文
