vue2.0
vue2+element
vue2+antdesign
沉默是金~
这个作者很懒,什么都没留下…
展开
-
Vue +Lucksheet实现预览编辑Excel 支持保存、导入、导出(附源码)
代码:把相关lucksheet相关代码放到publick下面 (资源已上传)封装的lucksheet组件直接拿来使用。lucksheet组件。原创 2023-12-29 19:36:15 · 1047 阅读 · 0 评论 -
elementUI moment 年月日转时间戳 时间限制
【代码】elementUI moment 年月日转时间戳 时间限制。原创 2023-08-24 17:44:47 · 883 阅读 · 0 评论 -
Vue2嵌入HTML页面空白、互相传参、延迟加载等问题解决方案
html页面同样也要根据传递过来不同的参数 去调整自己的逻辑,首先知道html是如何接收到vue传来的消息的,window监听message即可接收postMessage发送来的消息。通过window.parent['vue里面绑定的名称'](需要传递的参数) 可以定义一个对象来传参 这种方法就可以调用到vue里面的方法啦!html页面接收时是通过message统一接收的,针对发送多个消息的情况下, 我们这里做下区分,将html页面通过iframe的方式嵌入进来之后,发现页面是空白的,不显示任何元素,原创 2023-08-10 13:51:15 · 3147 阅读 · 0 评论 -
AntdesignVue 针对局部全屏不显示问题来全局配置消息类Modal组件
通过Vue.extend创建构造器子类 暴露构造函数。首先封装Modal弹窗组件。main.js中全局配置。原创 2023-04-26 17:23:33 · 604 阅读 · 0 评论 -
AntdesignVue 使用a-pagination实现假分页
因为slice不改变原数组 可以截取想要的数据 splice改变原数组不能用。pageSize默认5条 改变当前页和条数时 双向绑定渲染数据。假分页就是只查询一次数据库 把数据放到一个数组中。用slice函数进行操作。这里默认显示5条一页。原创 2023-06-06 18:21:54 · 498 阅读 · 0 评论 -
AntdesignVue 局部全屏后Message、Select 、Modal、Date等组件不显示问题解决方案(最终版)
1、对this.$message.....这种的消息提示组件解决方案如下1、对this.$message.....这种的消息提示组件解决方案如下在main.js中全局配置消息提示测试可以在父组件DIV全屏后可以弹出提示。原创 2023-04-25 11:54:44 · 4076 阅读 · 2 评论 -
vue + echarts 动态添加HTML元素
【代码】vue + echarts 动态添加HTML元素。原创 2023-04-14 18:38:09 · 749 阅读 · 0 评论 -
vue watch监听对象的属性
【代码】vue watch监听对象的属性。原创 2022-11-17 14:42:54 · 175 阅读 · 0 评论 -
ElementUI e-dialog 弹出框可以编辑底部输入框 去掉遮罩层
1、去掉e-dialog遮罩层modal="false"2、弹出modal仍然可以编辑底部输入框。原创 2022-07-29 13:38:13 · 2000 阅读 · 0 评论 -
vue +ts 子组件触发父组件方法 触发后的回调
父子组件通信原创 2022-07-20 17:03:55 · 336 阅读 · 0 评论 -
vue+ts 监听函数 父组件传子组件 子组件调用父组件
1、父组件 index.vueasync chosepat(row) { // 双击患者触发 this.leftChosedRow = row await this.getPatientInfoById(row.registrationId) // 获取当前患者信息 await this.initView(this.currentPatInfo) // 初始化 this.isChangePatient = !this.isChangePatien原创 2022-04-15 19:53:50 · 1291 阅读 · 0 评论 -
vue 子组件触发父组件方法 兄弟组件通信 eventBus
1、创建eventBus.ts 实例化vue对象import Vue from 'vue'export default new Vue({})2、父组件监听eventBus.$on('getReportLists', this.getReportLists)3、子组件触发eventBus.$emit('getReportLists')原创 2022-01-12 17:06:45 · 320 阅读 · 0 评论 -
ztree 修改自定义图标标题两种方式
1、最简洁方式edit添加removeTitle: '删除',renameTitle: '修改' treeSetting = { data: { simpleData: { enable: true, idKey: 'docTemplateId', pIdKey: 'pid', rootPId: 0 }, key: { name: 'templateName'原创 2021-12-29 14:22:47 · 1397 阅读 · 0 评论 -
vue 修改node_mdoule的源码之后如何打补丁(修改ztree的样式为例)
1、首先执行命令 npx -v 看下是否安装了patch-package执行命令:npm install patch-package --save-dev2、安装完后在package.json中添加这一行"postinstall": "patch-package"3、修改ztree源码4、执行命令创建补丁文件5、创建完成6、打开文件查看修改后的源码7、提交代码到远程仓库...原创 2021-12-23 11:29:01 · 786 阅读 · 0 评论 -
vue的异步函数 async和await
vue中异步函数async和await的用法 - zhouj2019 - 博客园先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数 ashttps://www.cnblogs.com/zhoujuan/p/11692818.html...翻译 2021-11-24 12:03:34 · 759 阅读 · 0 评论 -
Vue、angular10 post请求接口 下载文件
1、调用后台接口和传参 this.bizCommonConfigService.downLoadExcel(`${this.commonConfig.getTransactionUrl()}/refundOrder/downloadPdf`,params).then(()=>{ this.imgName = null});2、核心方法 downLoadExcel(downloadURl: string, query: any) { const datas = que...原创 2021-01-12 16:53:54 · 396 阅读 · 0 评论 -
vue audio组件封装 直接调用方法播放音频源码
封装 index.jsindex.js源码import Vue from 'vue'import TzAudio from './audio'let TzInstancelet getInstance = function () { if (TzInstance) return TzInstance const vm = new Vue({ data: {}, render (h) { return h(TzAudio, {}) } }..原创 2020-09-18 17:03:31 · 1454 阅读 · 0 评论 -
vue this.$set和Object.assign的区别
两者都是给对象修改或新增属性值$set会直接更新视图 而Object.assign则不会,需要建立一个空对象才能实时更新$set(this.obj,'a','555555555') 等同于 Object.assign({},this.obj,{a:555555555})原创 2020-09-09 16:03:05 · 1536 阅读 · 0 评论 -
vue+iview 实现无操作后退出登录功能
其实现原理就是监听用户有没有点击页面,在没有任何操作的情况下倒计时提示退出上图 用户点击了页面则重新倒计时监听时间超过多少秒后提示用户退出页面前销毁定时器原创 2020-09-03 15:28:54 · 399 阅读 · 0 评论 -
使用koa框架搭建node后台项目并实现读写本地数据,在前端展示用户列表
1、搭建node后台项目安装koa安装koa-router安装koa-bodyparser配置index.jspackage.json文件文件读写代码读取学生信息api前端项目用vue_cli4.0搭建配置代理服务main.js UI框架使用vue+iview读取学生信息页面效果如下...原创 2020-09-03 13:59:15 · 433 阅读 · 0 评论 -
vue 使用proxy设置代理来解决跨域问题
vue-config.js文件中配置设置代理,通过pathRewrite将代理标识设置为空重写访问路径解决跨域调用接口的时候这样调用原创 2020-08-27 16:22:31 · 4379 阅读 · 0 评论 -
node fs模块写文件到本地
1.获取文件内容2.写入文件原创 2020-08-24 13:40:09 · 971 阅读 · 0 评论 -
vue 利用ActiveXobject组件调取打印组件
<template> <div> <object classid="clsid:0671FEBB-ADE5-4250-B539-BF5DFEB0EAB2" width="0" height="0" ref="TzPrintTool" id="TzPrintTool"></object> </div></template><script> import isIe from '@/libs/isIe'.原创 2020-08-24 11:24:15 · 4161 阅读 · 0 评论 -
vue+pdf.js 印章签署完后鼠标滑过显示签章信息
效果图核心思想:pdf.js签署印章,搜索相关文档就好签署完后,每一页可能有多个印章,将这些印章跟随鼠标移动显示印章信息首先思考将这些印章的提示信息放在生成的div中,然后添加鼠标移动事件,根据页数和鼠标移动的坐标判断是否经过了某一页的印章核心代码if(this.sginData!=null){for(var key in this.sginData){ console.log('kye====', key) for(var i=0 ; i < thi.原创 2020-08-13 18:53:31 · 2263 阅读 · 6 评论 -
npm ERR! missing script: dev 报错问题
一张图你就明白了 npm run serve原创 2020-07-29 14:38:28 · 1385 阅读 · 0 评论 -
vue 挑战最强大脑 记忆力5分 观察力5分 推理力4分
首先在90s时间内记忆相同的图片位置90s后覆盖所有图片,选手通过记忆观察所有相同照片的位置进行两两抵消(类似消消乐)每消错一次,整个图片按照顺时针旋转90°,这里考验选手的记忆力和推理力有兴趣的小伙伴可以挑战一波了,看看你是不是最强大脑呢~源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title<...原创 2020-07-13 09:41:08 · 7050 阅读 · 0 评论 -
vue 实现购物车
效果图源码html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--<#include "/common.html">--> <link rel="stylesheet" href="../css/shop.css"><...原创 2020-07-10 16:14:09 · 273 阅读 · 0 评论 -
vue+elementUI 动态产品配置
先看效果图直接上源码<template> <div style="background:#fff;padding:20px"> <el-form :inline="true" class="demo-form-inline"> <el-form-item label="产品名称"> <el-input v-model="name" ...原创 2020-07-09 16:12:29 · 1361 阅读 · 0 评论 -
vue+avue 头像裁剪上传
利用vue-image-crop-upload这个插件首先进行安装源码分享<template> <div style="background:#FFF" v-loading="loading"> <div class="title">用户绑定</div> <div class="uploadImg"> <my-upload @crop-success="cropSu...原创 2020-07-07 09:28:28 · 18882 阅读 · 0 评论 -
vue-router this.$router.push报错Uncaught (in promise)
捕捉路由异常即可原创 2020-07-06 14:02:24 · 1312 阅读 · 0 评论 -
vue this.$router.push is not undefined问题解决
在使用cdn方式引用的路由插件报以下错误基本原因就是在vue组件上没有实例化路由解决方法尝试了一下没有报错,OK!原创 2020-07-06 13:56:49 · 6022 阅读 · 0 评论 -
[Vue warn]: Do not mount Vue to 「html」 or 「body」 - mount to normal elements instead.
不要将Vue挂载到<html>或<body> - mount到普通元素如下图就会报这个错误改成这样即可原创 2020-07-01 10:17:09 · 1313 阅读 · 0 评论 -
vue之浏览器顶部进度条
import NProgress from 'nprogress' // progress barNProgress.start()//显示进度条NProgress.done()//隐藏进度条用在axios请求拦截器和aixos响应拦截器中原创 2020-05-29 13:58:21 · 372 阅读 · 0 评论 -
vue-router的实现原理以及使用方法讲解
vue中的vue-router是通过hash和history两种模式实现前端跳转路由,更新视图但不重新请求页面”是前端路由原理的核心之一,实现主要有两种方式 hash---- 利用URL中的hash(“#”) 利用Historyinterface在 HTML5中新增的方法 实现方式首先在router/index.js中注册路由 Vue.use(Router)这里把路由单独写在一个routes.js中并导出,注意别忘了导出 export default routes...原创 2020-05-28 10:36:08 · 1793 阅读 · 1 评论 -
vue 报错 Failed to mount component template or render function not defined
页面中缺少<template></template>标签原创 2020-05-26 15:19:17 · 1545 阅读 · 0 评论 -
vue Unknown custom element: xxxx did you register the component correctly
报如下错误的话啊,可以看出elementui组件没有被注册注册之后即可原创 2020-05-26 15:09:53 · 48149 阅读 · 13 评论 -
Vue 实现a标签下载图片而不是直接打开的问题解决方案
当下载文件中存在jpg、txt等浏览器可以直接预览的文件时,上面的方法就会出现问题,即使加了download仍然会在浏览器中打开下载文件我们可以将下载地址借助Blob转换成二进制,然后,作为a标签的href属性,配合download属性,实现下载。具体实现代码如下:Vue.directive('down', { inserted: (el, binding) => { el.style.cssText = 'cursor: pointer;color:write;' el.ad...原创 2020-05-22 15:21:58 · 11233 阅读 · 5 评论 -
Vue.directive自定义指令demo以及它的生命周期
Vue.directive 指令demo<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0"> <title>Title</title> <script src="js/vue.js">...原创 2020-05-22 15:12:21 · 416 阅读 · 0 评论 -
vue.js 父组件向子组件传值props 子组件向父组件传值 this.$emit 基本用法详细介绍
子组件:<template> <div class="hello"> <h1 @click="submitDa">{{ msg }}</h1>//submitDa向父组件传值的方法 <h1>{{activeId}}</h1> <h2>Essential Links</h2> </div></template><script>expo...原创 2020-05-19 15:31:38 · 1010 阅读 · 0 评论 -
vue报错 RangeError: Maximum call stack size exceeded
报这个错意思是程序死循环原创 2020-05-08 16:14:41 · 2096 阅读 · 0 评论