VUE
哈哈哦0
没事写写代码,反正闲着也是闲着 ~_~
展开
-
vue2+codemirror代码渲染,实现滚动到指定行(三 滚动指定行)
vue2+codemirror代码渲染,当代码量过大时,在几千行的代码中找到所需的方法类比较困难。这时我们需要跳转到具体方法类,代码滚动到方法类所在的代码行。这里需要先把光标指向到指定行,再滚动到该行,原创 2024-04-11 17:57:55 · 527 阅读 · 0 评论 -
新版谷歌浏览器下载(http链接)没反应
Chrome认为使用非https链接下载文件是不安全的,在新版本中阻止了用户下载。大部分网站都已经更改为https链接,只有少量网站还是http。有些网站虽然已经是https链接,但是下载的链接却还是http的,所以还是会提示“无法安全地下载”。原创 2022-12-13 17:06:35 · 5952 阅读 · 0 评论 -
js识别字符串中的链接并使之可跳转
使用正则表达式识别字符串中的链接,并可跳转到此链接方法一:方法二:转载 2022-07-21 15:14:28 · 1815 阅读 · 0 评论 -
vue+elementui表单校验(数组嵌套、object对象嵌套)
vue+elementui表单校验时,数组嵌套、object对象嵌套的校验方法。原创 2022-05-25 16:01:56 · 2729 阅读 · 0 评论 -
vuedraggable中可选择复制输入框内容
当我们在做拖拽排序时,拖拽部分有输入框,或可选中的文字不需要拖拽,官方文档给出的方法是使用filter排除拖拽元素。这样做有个弊端,使用 filter 禁止拖拽后,filter禁止标签下的输入框,无法输入。这时我们可以用到另一个disabled属性去解决。当输入框获取焦点时,disabled为true,禁用拖拽操作,这时可以复制输入框中的数据。当输入框获取失去时,disabled为false,可拖拽。<draggable v-model="arr1" :disabled="disabled"原创 2022-05-13 16:14:34 · 927 阅读 · 0 评论 -
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 · 3110 阅读 · 0 评论 -
Ctrl+A 只选中div中的内容,而不选择页面全部
今天碰见一个需求,要求Ctrl+A只选中div中的内容搜索以后发现给div添加contenteditable属性是个不错的方法contenteditable 元素属性默认属性: false可选属性: true | falseHTML5 引入的新属性还有可以通过onselectstart, onselect 事件来控制用户选择但是实现起来比较麻烦,所以我选择了使用contenteditable...转载 2021-11-06 20:17:54 · 697 阅读 · 0 评论 -
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 · 443 阅读 · 0 评论 -
报错 - npm ERR! chromedriver@2.46.0 install: `node install.js`
刚克隆下来的代码在安装安装包时报了 npm ERR! chromedriver@2.46.0 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 · 1413 阅读 · 0 评论 -
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 · 1812 阅读 · 0 评论 -
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 · 598 阅读 · 0 评论 -
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 · 1586 阅读 · 2 评论 -
elementui生产环境图标加载时偶而乱码
最近在 使用element UI 写项目, 项目在生产环境运行了一段时间后,页面刷新偶尔会出现 (搜索,箭头。。。)各种图标乱码情况。使用的是 elementui@2.13.0 打包方式main.js 引入 element...scc文件(非 cdn,因为我需要更换主题色)解决办法:用 node-sass 打包,不要使用 dart-sass错误现象通过下面的图片可以看出 图标显示问题很严重啊卸载 dart-sass,安装node-sassnpm uninstall ...转载 2020-12-16 10:55:47 · 1673 阅读 · 0 评论 -
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 · 3785 阅读 · 0 评论 -
 空格报错Parsing error: missing-semicolon-after-character-reference.
用 空格时,一直会报这个错Parsing error: missing-semicolon-after-character-reference.必须在 后加分号;转载 2020-11-26 19:51:47 · 1950 阅读 · 0 评论 -
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 · 311 阅读 · 0 评论 -
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 · 1920 阅读 · 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 · 130 阅读 · 0 评论 -
vue源码理解和双向数据绑定理解
参考:https://segmentfault.com/a/1190000015846104转载 2020-07-24 17:06:27 · 94 阅读 · 0 评论 -
VueX使用详解
vuex是使用vue中必不可少的一部分,基于父子、兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得很无能为力,那么vuex就很好的解决了我们这种问题,它相当于一个公共仓库,保存着所有组件都能共用的数据。那么,我们一起来看看vue项目怎么使用它吧。(如果你对vuex有一定了解,不是刚接触的小白,请忽略第一步,直接查看第二步)一、适合初学者使用,保存数据以及获取数据1、在store文件夹,新建个index.js文件(命名看个人习惯,如果没有该文件夹,可以新建一个,转载 2020-07-23 18:16:22 · 152 阅读 · 0 评论 -
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 · 7954 阅读 · 0 评论 -
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 · 773 阅读 · 0 评论