随笔分类 - Vue
【Vue】jsconfig.json compilerOptions 配置文件别名
摘要：{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, "exclude": ["node_modules", "dist"] } 功能简单说明：可以对文件目录检索做智能提示。 jsconfig.json是什么
【Vue】手写前端导出表格为CSV文件功能
摘要：参考博客 前端导出表格为CSV文件功能 代码 getExportList() { let jsonData = { trade:{ tHeader: ["名字","性别","年龄","爱好","身份证号码"], filterVal: ["name","sex","nlin","aihao","sfz
【Vue】分享 coderwhy vue3+ts 项目搭建规范
摘要：参考自 coderwhy 老师的 vue3+ts 课程，自己项目组的 Vue3 通用后台管理系统规范配置也是下面这些内容，喜欢的朋友可以点个赞哟 一. 代码规范 1.1. 集成 editorconfig 配置 EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致
【Vue】vue-pdf 的简单封装使用
摘要：参考文章 可以先去看看这篇博客，了解基本的使用方法。 vue-pdf实现pdf文件在线预览 封装组件 PdfPreview.vue <template> <div class="pdf-wrapper" ref="wrapper"> <pdf ref="pdf" :src="pdfUrl" v-fo
【Vue】拖拽电子合同签章效果 demo（适用PC端范围拖拽）
摘要：主要是为了解决公司项目需要签章获取 PDF 内印章位置的需求，非常感谢下面这个博客提供的资料。 原参考博客 vue拖拽效果（适用范围自定义表单，电子合同签章等） <template> <div class="all"> <!-- 给需要拖拽的对象设置可拖拽属性 --> <div class="one
【Vue】在 vue 2 中使用 qrcodejs2 生成二维码
摘要：安装 npm install qrcodejs2 导入 import QRCode from 'qrcodejs2' 配置 vue 编写html，必须需要一个盒子包裹放二维码的div <div class="wrapper"> <div id="qrcode_box" ref="qrCodeUrl"
【Vue】vue-lazyload图片懒加载的使用
摘要：安装 npm i vue-lazyload -S 配置 在main.js文件中进行基本配置 import VueLazyload from 'vue-lazyload' // 注册懒加载事件 Vue.use(VueLazyload, { // 设置加载的占位图片 loading: require('
【Vue】自定义指令函数节流和防抖
摘要：节流 directives: { // 自定义指令 throttle: { inserted: function(el, obj) { let timerId = null let flag = true el.addEventListener('input', function() { if (!
【Vue】面试重点真题演练
摘要：###v-show 和 v-if 的区别？ v-show 通过 CSS display 控制显示和隐藏 v-if 组件真正的渲染和销毁，而不是显示和隐藏 频繁切换显示状态用 v-show，否则用 v-if ###为何在 V-for 中使用 key？ 必须用 key，而且不能使用 index 和 ra
【Vue】什么虚拟 dom（virtial dom）？
摘要：##vdom 是什么？ vdom 既 virtial dom，也称虚拟 DOM，是一种用 JS 来模拟的 DOM 树结构 真实的 DOM 的结构 JS 模拟的 DOM 结构 你或许会有疑问？为什么使用 JavaScript 来模拟而不是 HTML、CSS？因为 JavaScript 是一门具有图灵完
【Vue】过滤器根据字符串的长度控制显示的字数超出显示省略号
摘要：利用vue中的过滤器filter处理 <span>{{ details.description | handleText }}</span> 定义过滤器 handleText(value) { if (!value) return '' if (value.length > 12) { return
【Vue】vue2 过渡搭配Velocity.js动画的基本使用
摘要：Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、转换动画(transfor
【Vue】VueCli4构建项目如何配置文件路径别名？
摘要：#1.在项目文件根目录上创建 vue.config.js 文件 #2.写入以下代码（具体内容见注释） const path = require('path') // 引入path模块 function resolve(dir) { return path.join(__dirname, dir) /
【Vue】Cube-UI组件中create-api 模块的基本使用
摘要：#1.这个模块的功能是什么？ 官方文档是这样解释的： 该模块默认暴露出一个 createAPI 函数，可以实现以 API 的形式调用自定义组件。并且既可以在 Vue 实例上下文中调用，也可以在普通 js 文件中调用。 注： 所有通过 createAPI 实现的通过 API 的形式调用的自定义组件（c
【Vue】Lodash工具库中 cloneDeep 深拷贝在 vue2 的使用
摘要：在vue向数据库提交数据的过程中，可能需要处理某些数据，比如有以下要求：传递的参数必须是以逗号分隔的分类列表 但此时如果vue组件中的数据却是数组形式的这个时候需要用到数组的 join 方法对数据进行处理 但这会导致错误，原因就是该数据已经被双向绑定，对原数据进行修改会导致错误！！！ 此时就需要用到
【Vue】项目中关闭eslint的方法
摘要：非常简单的操作方法！对于初学者来说，不用再去为了烦人的代码标准报错而苦恼了！ 方法一 在项目根目录下增加 vue.config.js 配置文件 并添加以下代码： module.exports = { lintOnSave: false } 方法二 在 .eslintrc.js 里注释掉 @vue/s
