- 博客(83)
- 收藏
- 关注
RSS订阅原创 vue2+codemirror代码渲染，实现滚动到指定行（三 滚动指定行）
vue2+codemirror代码渲染，当代码量过大时，在几千行的代码中找到所需的方法类比较困难。这时我们需要跳转到具体方法类，代码滚动到方法类所在的代码行。这里需要先把光标指向到指定行，再滚动到该行，
2024-04-11 17:57:55
194
原创 v-model自定义双向数据绑定
1. 上面的 input 使用了 :value 而不是 v-model。2. 上面的 change1 和 model.event1 要对应起来。3. text1 属性对应起来。
2023-05-05 14:56:23
140
1
转载 element的el-table组件，在插槽slot=“header“内，数据不更新的问题
在点击事件修改phoneView的值之后，发现渲染的dom并没有修改。经过多次测试，发现在slot内部phoneView的值并没有改变，或者说改变后，又变回去了。在父组件中定义一个属性，如phoneView: false，在element的。
2023-03-29 15:06:03
788
原创 新版谷歌浏览器下载（http链接）没反应
Chrome认为使用非https链接下载文件是不安全的，在新版本中阻止了用户下载。大部分网站都已经更改为https链接，只有少量网站还是http。有些网站虽然已经是https链接，但是下载的链接却还是http的，所以还是会提示“无法安全地下载”。
2022-12-13 17:06:35
4220
原创 vue+elementui表单校验（数组嵌套、object对象嵌套）
vue+elementui表单校验时，数组嵌套、object对象嵌套的校验方法。
2022-05-25 16:01:56
2554
原创 vuedraggable中可选择复制输入框内容
当我们在做拖拽排序时，拖拽部分有输入框，或可选中的文字不需要拖拽，官方文档给出的方法是使用filter排除拖拽元素。这样做有个弊端，使用 filter 禁止拖拽后，filter禁止标签下的输入框，无法输入。这时我们可以用到另一个disabled属性去解决。当输入框获取焦点时，disabled为true，禁用拖拽操作，这时可以复制输入框中的数据。当输入框获取失去时，disabled为false，可拖拽。<draggable v-model="arr1" :disabled="disabled"
2022-05-13 16:14:34
842
原创 mxGraph核心函数mxGraph.insertVertex()和mxGraph.insertEdge()
一、mxGraph.insertVertex() mxGraph.insertVertex(parent，id，value，x，y，width，height，style)该函数用来生成模块1： parent - 作为组结构中新单元的直接父级的单元。2：id - 这是描述单元格的全局唯一标识符，它始终是一个字符串。这主要用于在外部引用持久输出中的单元格。如果您不希望自己维护id，请将null传递给此参数并确保mxGraphModel.isCreateIds（）返回true。这样，模型将管理
2022-04-08 11:11:06
849
转载 前端为何要进行打包和构建（面试题）
代码方面 体积更小，加载更快（tree-shaking，压缩合并） 编译高级语言和语法（ts，es6，模块化） 兼容性和错误提示（polyfill，postcss，eslint） 研发流程 统一、高效的开发环境 统一的构建流程和产出标准 集成公司构建规范（提测，上线） ...
2022-03-10 10:54:30
688
原创 vue使用iconfont图表库svg图标，使用color修改颜色
vue使用svg图标有两种方法，在这里介绍下载代码使用图标的方法：1.下载图标打开图标库iconfont-阿里巴巴矢量图标库，搜索图标，加入购物车：回到购物车中，选择下载代码：2.vue中引入图标将下载包中的iconfont.js文件放到项目中/assert/svg/文件夹中，重新去购物车中下载素材svg图标，放到/assert/svg/icon/文件夹内新建index.js文件，全局注册SvgIcon组件import Vue from 'vue'im...
2022-01-11 13:40:41
2965
原创 vue下载文档流
应在请求中设置返回类型：responseType: "blob"axios.get( '/api/url', { params: { id: '11', }, }, { headers: { 'responseType ': 'blob', ...
2021-12-08 10:18:49
422
原创 vue表格多单元格复制粘贴
vue表格多单元格复制插件：Handsontable is a JavaScript data grid that looks and feels like a spreadsheet - Available for React, Angular and Vue
2021-12-06 16:07:29
543
转载 Ctrl+A 只选中div中的内容，而不选择页面全部
今天碰见一个需求，要求Ctrl+A只选中div中的内容搜索以后发现给div添加contenteditable属性是个不错的方法contenteditable 元素属性默认属性: false可选属性: true | falseHTML5 引入的新属性还有可以通过onselectstart, onselect 事件来控制用户选择但是实现起来比较麻烦，所以我选择了使用contenteditable...
2021-11-06 20:17:54
598
转载 vue中provide和inject多层级组件通信的用法
provide：Object | () => Objectinject：Array<string> | { [key: string]: string | Symbol | Object }provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。是2.2.0版本 新增的。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。provide 选项应该是一个对象或返回一
2021-11-06 15:43:30
390
转载 报错 - npm ERR! [email protected] install: `node install.js`
刚克隆下来的代码在安装安装包时报了 npm ERR! [email protected] install: node install.js 这个错误，下面我来说一下解决方法1、报错情况：2.解决办法：（1）运行编译以下npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver1（2）如果上面的不行的话，就运行：npm install --ignor.
2021-10-20 18:48:35
1388
原创 vue子组件嵌套父组件报组件未定义错误
在工作中，遇到一个循环调用的场景，需要用到父组件调用子组件，然后在子组件中，再循环调用父组件。代码类似这样的：menu-item.vue<template> <div class="meun-item"> <sub-menu v-if="menu.subMenu && menu.subMenu.length" :menu="menu" /> <router-link v-else :to="m
2021-06-23 10:08:36
1643
转载 node - glob模块
node的glob模块允许你使用 *等符号, 来写一个glob规则,像在shell里一样,获取匹配对应规则的文件.这个glob工具基于javascript.它使用了 minimatch 库来进行匹配用法:首先下载glob包:npm install glob调用格式:var glob = require("glob")// options 是可选的glob("**/*.js", options, function (er, files) { // files 是匹配到的文.
2021-01-29 17:37:30
614
原创 vue build时报错ERROR in ./img/test.jpg Module build failed: Error: spawn /Users/tianxiaoli/Desktop/node
在Linux做自动化部署时，遇到的问题，1. ERROR in ./img/test.jpg Module build failed: Error: spawn /Users/tianxiaoli/Desktop/node /webPack-Te。2. mozjpeg/vender/cjpeg报错经过网上查资料，确认是图片压缩工具有问题解决方法：1. delete node_modules2.npm cache clean -f3.npm install -g cnpm --re..
2021-01-29 14:57:11
568
原创 vue中拖动元素边框 改变元素宽度-实例
我们可以做一个单独的组件，通过监听鼠标的down，move以及up事件来实现拖动边框，改变元素宽度功能。下面我们写一个组件Xhandle.vue。<template> <div class="x-handle" @mousedown="mouseDown"></div></template> <script>export default { name: "XHandle", data() { return {
2021-01-26 15:25:17
1543
2
转载 elementui生产环境图标加载时偶而乱码
最近在 使用element UI 写项目， 项目在生产环境运行了一段时间后，页面刷新偶尔会出现 （搜索，箭头。。。）各种图标乱码情况。使用的是 [email protected] 打包方式main.js 引入 element...scc文件（非 cdn,因为我需要更换主题色）解决办法：用 node-sass 打包，不要使用 dart-sass错误现象通过下面的图片可以看出 图标显示问题很严重啊卸载 dart-sass，安装node-sassnpm uninstall ...
2020-12-16 10:55:47
1646
转载 vue-cli-service build 环境设置
使用vue-cli3打包项目，通过配置不同的指令给项目设置不一样的配置。npm run serve时会把process.env.NODE_ENV设置为‘development’；npm run build 时会把process.env.NODE_ENV设置为‘production’；此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。头疼的是打包时线上环境可能分多种，比如测试环境和生产环境等等。在vue-cli2中打包时可以修改...
2020-12-09 11:02:13
3651
转载  空格报错Parsing error: missing-semicolon-after-character-reference.
用 空格时,一直会报这个错Parsing error: missing-semicolon-after-character-reference.必须在 后加分号；
2020-11-26 19:51:47
1891
转载 vue-cli3 一直运行 /sockjs-node/info?t= 解决方案
首先sockjs-node是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。服务端：sockjs-node（https://github.com/sockjs/sockjs-node）客户端：sockjs-clien（https://github.com/sockjs/sockjs-client）如果你的项目没有用到 sockjs，vuecli3 运行 npm run serve 之后 network 里面一...
2020-11-26 18:07:46
278
转载 element的table组件在flex布局下宽度不能自适应
问题描述在做数据管理系统的时候，使用了flex布局，element的table组件，但是flex布局下element的table组件宽度为页面一加载时的宽度。浏览器窗口变大，table组件跟着变大，但是当浏览器窗口变小的时候table组件的宽度还是原来的宽度，并没有随窗口自适应，（这点我也搞不懂是怎么回事，窗口变大，它能自适应变大，窗口变小，就不能自适应变小了~~~）解决办法//scss.module-result-content { flex: 1; display: fl
2020-08-31 16:54:39
1825
1
原创 vue源码理解
vue源码理解参考地址：https://vue-js.com/learn-vue/reactive/object.html#_2-%E4%BD%BFobject%E6%95%B0%E6%8D%AE%E5%8F%98%E5%BE%97-%E5%8F%AF%E8%A7%82%E6%B5%8B
2020-07-28 15:47:43
115
原创 webAPI方法属性详解
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/attributes
2020-07-28 13:55:43
205
原创 .webp格式图片详解
WebP（发音：weppy）是由谷歌于2010年推出的新一代图片格式，它同时提供了有损压缩与无损压缩（可逆压缩）；webP图片优势：它具有更优的图像数据压缩算法，能带来更小的图片体积； 拥有肉眼识别无差异的图像质量； 具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。对比 PNG 原图、PNG 无损压缩、PNG 转 WebP（无损）、PNG 转 WebP（有损）的压缩效果：更多测试查看WebP 示例 (PNG 转.
2020-07-27 16:14:09
2831
转载 VueX使用详解
vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。那么，我们一起来看看vue项目怎么使用它吧。（如果你对vuex有一定了解，不是刚接触的小白，请忽略第一步，直接查看第二步）一、适合初学者使用，保存数据以及获取数据1、在store文件夹，新建个index.js文件（命名看个人习惯，如果没有该文件夹，可以新建一个，
2020-07-23 18:16:22
115
原创 vue.js中created()、activated()、deactivated()理解
created()：在创建vue对象时，当html渲染之前触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次；activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据、keepalive缓存组件后，可执行方法；deactivated()：离开组件时执行；注意：activated()和deactivated()只有在<keep-alive></ke
2020-07-23 13:42:15
7550
转载 vue中router钩子函数的介绍与应用
模块一：全局导航钩子函数1、vue router.beforeEach（全局前置守卫）beforeEach的钩子函数，它是一个全局的before 钩子函数， （before each）意思是在 每次每一个路由改变的时候都得执行一遍。它的三个参数：to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性： path params query hash fullPath matched name meta（在matched下，但是本例可以直接用）from: (Route
2020-07-22 15:32:30
724
转载 箭头函数this指向问题
箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。而且它是固定的。function foo() { setTimeout(() => { console.log('id:', this.id); }, 100);} var id = 21; foo.call({ id: 42 });// id: 42上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是
2020-07-22 14:07:28
209
转载 浅拷贝和深拷贝
以前开发的时候遇到一个坑，就是对象的拷贝赋值问题，现在把它记录一下。大致是这样子的：var obj1 = { a: 1}var obj2 = obj1;obj2.a = 2;console.log(obj2.a); // 2console.log(obj1.a); // 2发现当我改变obj2.a值的时候，obj1.a值也相应的改变了。为什么会这样子呢？这就需要我们理解javascript的引用类型。引用类型的值引用类型值是引用类型的实例，它是保存在堆内存中
2020-07-21 16:01:22
490
转载 CSS清除浮动方法
标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒子高度为0。（浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开）。为什么要清除浮动呢？清除浮动的本质是什么？清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。1. 额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 。优点：通俗易懂，书写方便..
2020-07-21 13:27:58
173
转载 后台ui大全
做前端web开发的，经常会需要用到一些框架，看到一个技术大牛整理的一些web UI框架很不错，收藏着留以后备用。目录1.Hplus2.AceAdmin（中/英文）3.inspinia_admin （中/英文）4.H-ui.admin5.AdminLTE一，前言我想大部分人都用过EasyUI吧，一切都好，但感觉有点土了，想换成现在流行的Bootstrap为基础的...
2019-08-15 13:08:03
240
原创 pace.js网页自动加载进度条
pace.js是一种自动检测页面请求的插件，可以在页面记录加载的状态和进度。【下载附件】https://raw.github.com/HubSpot/pace/v1.0.0/pace.min.js此插件的兼容性很好，可以兼容IE8以上的所有主流插件，而且其强大之处在于，你还可以引入加载进度条的主题样式，你可以选择任意颜色和多种动画效果（例如简约、闪光灯，MAC OSX，左侧填充，顶部填充，...
2019-08-12 15:06:21
342
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人