vue
文章平均质量分 63
qq_24800489
面歧路者有行迷之虑,仰高山者有飞天之志
展开
-
通过pdfjs实现在VUE-CLI中进行PDF预览,并禁用打印及下载功能
官网:PDF.js官方demo:PDF.js viewer下载本文主要针对vue-cli4版本的文件 因为pdf.js是不支持跨域文件加载的 直接加载是不会成功的。会报 “file origin doesnot match viewer”错误,所以需要把viewer.js文件内的抛出错误这一行报错注释掉 既然是新框架,肯定想先玩玩试试效果,很简单,页面放一个iframe,然后src等于到viewer.html的public路径,直接(pdfjs/***)即可。效果就跟 官方原创 2022-06-02 18:03:23 · 4963 阅读 · 6 评论 -
vue $bus事件总线
vue $bus事件总线任意两个组件之间传值常用事件总线 ,适用于项目不大情况自定义bus// Bus:事件派发、监听和回调管理class Bus { constructor() { this.callbacks = {}; } $on(name, fn) { this.callbacks[name] = this.callbacks[name] || []; this.callbacks[name].push(fn); } $emit(name, arg原创 2020-07-15 15:34:14 · 2197 阅读 · 0 评论 -
vue自动路由生成
标题vue-cli自动路由生成在写vue的项目中,一般情况下我们每添加一个新页面都得添加一个新路由。为此我们在项目中会专门的一个文件夹(router)来管理路由,在一个大型项目中,会根据需要配置对应的路由规则,而对应的路由规则对应一个vue文件路径,所以我们的文件夹和路由是完全能够对应上的,只要知道路由,就能很快的找到对应的文件。那么有没有办法能够读取我们二级目录下的所有文件,然后根据文件名来生成路由呢?答案是有的 原理require.contextwebpack就提供了一个context方法来获取原创 2020-07-15 11:38:25 · 1860 阅读 · 0 评论 -
VUE表单双向绑定及校验原理
1、双向绑定原理就是绑定value值,监听input事件即,父组件通过props传递value值,子组件通过监听Input事件来实时将value值通过$emit传递给父组件。<div> <input :type="type" :value="value" @input="onInput"></div>export default { ...原创 2019-11-07 09:27:29 · 1223 阅读 · 0 评论 -
vue中edge浏览器html2canvas兼容问题
这几天工作之余遇到一个比较棘手的问题,是就是利用html2canvas生成图片,在Chrome中使用没有问题但是在edge和ie浏览器中报错:1、在edge浏览器中提示:t无法获取未定义或 null 引用的属性“toBlob”2、在ie浏览器(ie11)中提示:117ms html2canvas: Unable to access cssRules property118ms html...原创 2019-05-05 23:27:13 · 2861 阅读 · 0 评论 -
解决VUE框架下heatmap数据变更图层叠加问题
这是因为在vue框架中,视图更新是和数据相关,如果采用插件引入的方式直接在this.$nextTick中生成热力图,就必须同时清除已经存在的热力图。由于是手机写博客不方便上图,大致如下:var heatmapBox = document.getElementById("heatmap");var oldCanvas = heatmapBox.cheldren[1];//删除之前生...原创 2019-05-21 20:22:15 · 1406 阅读 · 3 评论 -
解决elment-ui折叠和收缩导航栏延时动画效果
解决方法:1、最外层包一层div2、通过div类名设置样式穿透.ibps-layout-header-aside-menu-side >>> .collapse-transition { -webkit-transition: 0s height, 0s padding-top, 0s padding-bottom; transition: 0s heigh...原创 2019-09-08 11:03:54 · 6814 阅读 · 3 评论 -
记一次js-model数据模型使用
为javascript准备的数据模型工具官方中文文档安装npm安装npm install js-model --saveModel字段定义:String: "" || String Number: 0 || Number Date: Date Array: [] Object: {}Default Parameter{ //dispose的时候移除...原创 2019-09-19 15:31:32 · 2354 阅读 · 1 评论 -
记一次vue-fullscreen的使用
官方中文文档安装使用npm命令安装npm install vue-fullscreen使用引入vue-fullscreen,并使用Vue.use()注册插件,之后即可使用。个人代码<template> <div style="height: 100%;"> <fullscreen ref="fullscreen" ...原创 2019-09-19 15:38:23 · 8138 阅读 · 4 评论