随笔分类 -  vue

vue 多级表头及表头对角线
摘要：展示效果 HTML部分 <el-table :data="tableData4" style="width: 100%" customClass="table4"> <el-table-column label="指标" align="right" width="90"> <el-table-col 阅读全文
posted @ 2021-03-09 18:13 搜戴斯 阅读(957) 评论(0) 推荐(0)
vue 读取本地.txt文件
摘要：vue 读取本地.txt文件 methods: { getdev() { // 更新数据devInfo.txt文件接口 let xhr = new XMLHttpRequest(), okStatus = document.location.protocol "file:" ? 0 : 200; x 阅读全文
posted @ 2021-02-22 17:44 搜戴斯 阅读(12168) 评论(0) 推荐(0)
vue indexedDB的使用
摘要：vue indexedDB的使用 import Idb from 'idb-js' // 引入Idb import db_student_config from './db_student_config' // 引入数据库配置 methods: { getdev() { Idb(db_student 阅读全文
posted @ 2021-02-22 17:43 搜戴斯 阅读(1465) 评论(0) 推荐(0)
vue 引入pako解压与压缩字符串
摘要：vue 引入pako解压与压缩字符串 import pako from 'pako' //引入pako解压与压缩字符串 methods: { // 设备浏览-加载设备信息 getDeviceInfo() { let that = this; //后端接口获取压缩数据 getDeviceInfo(). 阅读全文
posted @ 2021-02-22 17:37 搜戴斯 阅读(2709) 评论(0) 推荐(0)
vue 页面定时器
摘要：data() { return { intervalId:null, // 定时器 }; }, methods: { // 定时刷新数据函数 30s // 参考教程-> https://www.cnblogs.com/aurora-ql/p/13300202.html dataRefreh() { 阅读全文
posted @ 2021-02-22 16:30 搜戴斯 阅读(119) 评论(0) 推荐(0)
vue websocket长连接
摘要：created() { //页面刚进入时开启长连接 this.initWebSocket(); }, destroyed: function () { //页面销毁时关闭长连接 this.websocketclose(); }, methods: { initWebSocket() { //初始化w 阅读全文
posted @ 2021-02-22 16:28 搜戴斯 阅读(371) 评论(0) 推荐(0)
vue 监听键盘&窗口&是否全屏变化
摘要：mounted() { // 监听浏览器窗口大小变化 window.onresize = () => { return (() => { this.clientWidth = document.body.clientWidth-210; this.clientHeight = document.bo 阅读全文
posted @ 2021-02-22 15:51 搜戴斯 阅读(780) 评论(0) 推荐(0)
vue下canvas裁剪图片
摘要：vue下canvas裁剪图片 阅读全文
posted @ 2020-04-15 23:42 搜戴斯 阅读(1149) 评论(0) 推荐(0)
VUE项目开发中使用WebSocket
摘要：初始化WebSocket initWebSocket(){ //初始化weosocket const wsuri = 'ws://10.100.45.8:8888/websocket';//ws地址 this.websock = new WebSocket(wsuri); this.websock. 阅读全文
posted @ 2019-10-15 15:05 搜戴斯 阅读(2192) 评论(0) 推荐(0)
VUE父子组件相互传值
摘要：passer.vue中代码 首先在文件中引入组件 import canvasDraw from '@/components/CanvasDraw/canvasDraw' 局部注册组件：components: { canvasDraw }, HTML中使用组件 <canvas-Draw :imgSrc 阅读全文
posted @ 2019-10-15 15:04 搜戴斯 阅读(200) 评论(0) 推荐(0)
时间戳与时间格式互换方法
摘要：方法一 //时间格式 let time = '2019-09-17 17:26:20'; console.log(time); //时间格式转换成中国标准时间 let date = new Date(time); console.log(date); //获取毫秒时间戳减去6分钟后转换成中国标准时间 阅读全文
posted @ 2019-09-18 18:03 搜戴斯 阅读(713) 评论(0) 推荐(0)
vue下canvas绘制矩形
摘要：起因：根据项目需求本人写了一个绘制矩形的组件。功能：在图片中绘制矩形，根据图片大小进行自适应展示，获取图片矩形坐标。思路：首先定义一个固定大小的DIV，DIV标签中有监测鼠标变化的四个事件mousedown，mousemove，mouseup，mouseleave。 第二在DIV标签内有img，ca 阅读全文
posted @ 2019-09-17 15:51 搜戴斯 阅读(6631) 评论(39) 推荐(0)
Pako.js压缩解压,vue压缩解压,前后端之间高效数据传输
摘要：项目开发中常常会遇到前后端之间有大量数据传输占用带宽导致页面响应慢的问题，这时候我们可以考虑使用Pako.js对信息进行压缩之后传输。 我在前端使用的是vue-element-admin前端框架。框架中有Pako.js包所以直接使用就行。 第一步引入Pako import pako from 'pa 阅读全文
posted @ 2019-09-05 17:20 搜戴斯 阅读(4264) 评论(0) 推荐(0)
vue cavnas绘制矩形，并解决由clearRec带来的闪屏问题
摘要：起因：在cavnas绘制矩形时 鼠标移动一直在监测中，所以鼠标移动的轨迹会留下一个个的矩形框， 要想清除矩形框官方给出了ctx.clearRect() 但是这样是把整个画布给清空了，因此需要不断 向画布展示新的图片，这样就出现了不断闪屏的问题。 那么怎么解决呢？ microsoft 提供了双缓冲图形 阅读全文
posted @ 2019-09-02 11:57 搜戴斯 阅读(571) 评论(0) 推荐(0)
高效获取图片宽高的轮子
摘要：我们知道有些图片虽然没有完全加载出来，但是已经先有占位符，然后一点一点的加载。既然有占位符那应该是请求图片资源服务器响应后返回的可服务器什么时候响应并返回宽高的数据并没有触发事件,所以就有了定时检测获取宽高的方法，这种方法比img.onload方法要快，代码如下：// 创建对象 var img = 阅读全文
posted @ 2019-08-28 15:14 搜戴斯 阅读(204) 评论(0) 推荐(0)
vue修改当前页样式不影响公共样式的方法
摘要：在项目开发中需要对一些标签进行样式修改但是每次修改之后其他页面的样式也会跟着改变， 在网上找了很多方法都不好使后来大神告诉我一种方法很好用分享给大家。 1：首先在template标签下的第一个div中定义一个以本文件为名的class，只要class唯一就行。 2：在style标签添加lang="sc 阅读全文
posted @ 2019-08-13 11:33 搜戴斯 阅读(4538) 评论(0) 推荐(0)
vue-element-admin 引入高德地图并做海量点标记
摘要：第一步： 首先在index.html入口文件中添加引入高德地图的js，并填写自己在官网申请的key。如果没有申请不填写也是可以的。 第二步： 在需要的页面map.vue页面加入div并设置div的id 宽高一定要有，地图在页面呈现是canvas做图所以需要设定宽高。 <div id="contain 阅读全文
posted @ 2019-08-13 11:13 搜戴斯 阅读(5617) 评论(0) 推荐(0)