随笔分类 - 模板
antlr4 及monaco-editor 组合编写规则编辑器 (待总结)
摘要：巨无敌大坑：设置的文本提示项有range字段时，光标必须在range范围内，提示才会正常显示 <template> <div class="container1" v-loading="loading" element-loading-text="资源加载中..."> <div> <el-butto
阅读全文
vue实现dom元素拉伸(转载)
摘要：一、实现效果封装了三个methods方法，传入对应节点即可实现对应元素节点的拉伸收缩。 二、代码1. 函数封装 /*** * 让指定的dom元素支持沿x轴的拉伸收缩 * oBox为指定的dom节点 * e为鼠标按键默认传入的对象 */ moveX(oBox, e) { let x = e.clien
阅读全文
防抖和节流
摘要：// 防抖函数和节流函数, 使用方法antiShaking(() => { // 执行动作 // }) let timer = null; //time用来控制事件的触发 // 防抖 export function antiShaking(functionItem, timerType = "tim
阅读全文
monaco-edit 使用
摘要：版本 "monaco-editor": "^0.30.1", "monaco-editor-webpack-plugin": "^6.0.0", 使用代码 <template> <div class="container1"> <div ref="codeContainer" style="heig
阅读全文
获取数组中不同的部分
摘要：getDiffArr(oldData, newData) { //去重 let arr1 = new Set(oldData); //原数组 let arr2 = new Set(newData); //新数组 let List = []; //for of：循环数组的值 for (let k of
阅读全文
js 读取文件
摘要：// 上传文件调用 fileChange(fileData) { let raw = file.raw let fileParamList let reader = new FileReader() reader.readAsText(fileData); let _this = this read
阅读全文
echart 血缘图 引用
摘要：let tableId = 1; const data = [ [ { tableId:2, tableName:'我是祖先表AAAAAAAAAA', },{ tableId:3, tableName:'我是祖先表B', } ], [ { tableId:4, parentId:[2], table
阅读全文
导出数据
摘要：import axios from 'axios' import { Message } from 'element-ui' import { saveAs } from 'file-saver' import { getToken } from '@/utils/auth' const baseU
阅读全文
vue-code-diff 实现版本对比，带内容覆盖（仅组件，待完善内容解析）
摘要：<template> <div class="version-diff-content"> <div class="version-diff-top"> <div> <el-select v-model="versionDiffSelected.selectOne.version" placehol
阅读全文
vue 文件打包下载
摘要：1. 安装 npm 包： jszip 及 file-saver 2. let i = 1 let promises = [] let zip = new JSZip(); const _this = this; msg.forEach(item => { const promise = getFil
阅读全文
自定义元素可拖拽，拖动分离
摘要：// 普通元素拖拽 Vue.directive('drag', { bind: (el, bindings, vnode) => { Vue.nextTick(() => { // 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁，指令被重复调用 let modal = el.ge
阅读全文
vanvue model 组件可拖动指令
摘要：import Vue from 'vue' // v-drag-modal: 弹窗拖拽 Vue.directive('drag-modal', (el, bindings, vnode) => { Vue.nextTick(() => { let { visible, destroyOnClose
阅读全文
扁平数据结构转换tree
摘要：需求，将 转换为 的形式 getPidToThree(items) { const result = []; // 存放结果集 const itemMap = {}; // // 先转成map存储 for (const item of items) { itemMap[item.id] = {...
阅读全文
axios 调用接口方法
摘要：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 1. 常规使用方法 axios.get('/user?ID=12345').then((response) => { console.log(response); }).catch((error) =>
阅读全文
vuex中actions的使用
摘要：作用： 调用异步操作，获取数据后调用mutations改变state中变量的值，或返回请求的结果到页面的方法中 使用方法： 设置方法： 1. 仅改变state中变量的值 （1） 调用接口获取数据 (2) 调用mutations中方法改变state中的变量的值 （3）变量储存，方便页面之后调用 2.
阅读全文
echart 图创建以及点击事件
摘要：<template> <div> <div :class="['chart-contianer']" ref="chartContainer" :style="{ height: height || '25vh' }"></div> </div> </template> <script> const
阅读全文
可拖拽改变数据的echart图实现，可自由改变跟随改变的前后点的范围及相邻点改变的比例
摘要：<template> <div> <div class="echart-box" id="echart-box"></div> </div> </template> <script> import echarts from 'echarts' export default { data() { re
阅读全文
element ui 季节选择器
摘要：<!-- *绑定事件@change 返回选择的季节中一天的时间戳 *可传值defaultValue，传递，默认日期（格式：20200400） *可传值valueArr，传递默认月份 --> <template> <div class="quarter-select-box" v-if="choseD
阅读全文
