vue
文章平均质量分 50
可可爱爱的你吖
生活不易,时间很短,人丑就要多学习。
展开
-
实现whistle代理避开登录token、cookie实现线上地址运行本地代码
实现whistle代理避开登录token、cookie实现线上地址运行本地代码原创 2024-05-30 16:42:50 · 925 阅读 · 0 评论 -
前端实现大屏缩放自适应屏幕
前端实现大屏缩放自适应屏幕原创 2023-09-11 17:37:21 · 1767 阅读 · 0 评论 -
基于antd+vue2来实现一个简单的工作流程图功能
基于antd+vue2来实现一个简单的绘画流程图功能原创 2023-09-08 17:56:36 · 4971 阅读 · 5 评论 -
vue2--基于zm-tree-org实现公司部门组织架构图
vue2--基于zm-tree-org实现公司部门组织架构图原创 2023-02-27 13:51:17 · 4537 阅读 · 1 评论 -
好用的基于vue的组织架构图组件
都是基于vue的组织架构图,有支持vue2.x和vue3.x,可自行选择使用原创 2023-01-11 15:34:44 · 3735 阅读 · 1 评论 -
el-tree实现类似windows文件列表,并支持折叠、展开和重命名
el-tree实现类似windows文件列表,并支持折叠、展开和重命名原创 2022-10-21 14:00:32 · 1842 阅读 · 2 评论 -
vue-simple-uploader实现多文件/文件夹以及可拖拽上传
vue-simple-uploader实现多文件/文件夹以及可拖拽上传原创 2022-09-28 16:24:23 · 6513 阅读 · 10 评论 -
vue实现动态获取左侧导航宽度,右侧内容动态改变margin值
vue实现动态获取左侧导航宽度,右侧内容动态改变margin值原创 2022-08-26 17:57:40 · 3529 阅读 · 2 评论 -
修改element-ui中Tree树形结构前面的三角形图标
修改element-ui中Tree树形结构前面的三角形图标原创 2022-08-25 15:40:59 · 2621 阅读 · 0 评论 -
【踩坑】之element-ui中form表单置空
【踩坑】之element-ui中form表单置空原创 2022-08-12 13:46:01 · 1375 阅读 · 0 评论 -
LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443
在vue中使用pdfjs-express拉取事例代码的时候出现了错误:LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:4431.第一种解决办法官网文档给的clone项目地址:本地拉代码报错:解决办法:先取消代理,再拉取代码就OK了git config --global --unset http.proxy2.第二种方法:复制事例项目名:pdfjs-express-vue-sample然后再百度中搜原创 2022-04-11 11:46:06 · 14055 阅读 · 0 评论 -
vue3 之app.config.globalProperties的简单使用
vue3 之app.config.globalProperties的简单使用main.js中//一个简单对图片的处理app.config.globalProperties.$filters = { preImg(url) { if (url && url.startsWith('http')) { return url } else { url = `http://www.baidu.com${url}` return url原创 2022-02-25 17:53:59 · 2685 阅读 · 0 评论 -
canvas画图实现验证码功能
canvas画图实现验证码功能实现效果图组件html代码:<div> <!-- 验证码 --> <canvas ref="canvasRef" id="myCanvas" :width="width" :height="height" @click="clickCanvas" ></canvas> </div>js代码import { reacti原创 2022-02-22 14:02:49 · 966 阅读 · 0 评论 -
vue中动态创建a标签下载文件流,文件上传、图片上传
vue中将文件流转Blob对象并动态创建a标签下载excel表格 <el-button size="small" @click.stop="downloadTemplate"> <i class="el-icon-download" /> 模板下载</el-button>下载事件 downloadTemplate () { let downloadName = '下载模板1.xlsx' //文件名 let params ={excelT原创 2021-12-21 14:20:26 · 3299 阅读 · 0 评论 -
组件中的el-table监听滚动条实现数据懒加载
el-table表格组件部分代码watch: {//监听滚动 tableDom (newVal) { if (newVal) { this.tableDom = newVal this.tableDom.addEventListener('scroll', (res) => { let height = res.target; let clientHeight = height.clientHeight;原创 2021-12-03 16:26:58 · 1497 阅读 · 0 评论 -
分页组件的简单使用
element分页的简单封装组件<template> <div :class="{ hidden: hidden }" class="pagination-container"> <el-pagination v-show="total > pageSizes[0]" :background="background" :current-page.sync="currentPage" :page-size.syn原创 2021-12-02 14:54:33 · 198 阅读 · 0 评论 -
点击按钮实现新增数据表格
实现点击按钮新增数据表格需求描述:点击添加表格按钮实现表格的新增,同时提供删除按钮可删除当前表格,也可上移或下移当前表格实现效果:代码:TaskTable组件代码<template> <div class="task_table"> <div class="task_table_title"> {{ title.title }} </div> <div class="task_info">原创 2021-10-09 17:57:23 · 1731 阅读 · 3 评论 -
el-steps步骤条结合锚点实现页面滚动定位
el-steps步骤条结合锚点实现页面滚动定位需求描述:给页面加个导航定位条,页面滚动到某个模块时,右侧步骤条跟着滚动,相反之,点击导航步骤条的某个模块,页面可定位到相应模块实现效果如图:(因为公司项目不便于录制gif视频)element中的步骤条没有任何点击事件,只是起到一个展示的作用,由于其它页面也有用到,便封装成了一个公共的组件step中的代码:<template> <div class="step"> <div style="height: 1原创 2021-10-09 17:19:06 · 2869 阅读 · 12 评论 -
路由导航守卫实现无token跳转到登录页面
路由导航守卫实现无token跳转到登录页面import router from './router'import store from './store'import { Message } from 'element-ui'import NProgress from 'nprogress' // progress bar进度条import 'nprogress/nprogress.css'// progress bar styleimport { getToken } from '@/util原创 2021-03-25 17:27:51 · 921 阅读 · 1 评论 -
子组件里直接调用父组件事件的几种方法
子组件里直接调用父组件事件的几种方法1.在子组件里用$emit向父组件传递一个个事件,父组件监听这个事件就行了。父组件:<template> <div> <child @father="father"></child> </div></template><script> import child from './components/child'; export default {原创 2021-03-12 14:08:29 · 1852 阅读 · 1 评论 -
TypeScript中filter过滤器的用法
在Vue2.x+TypeScript中filter过滤器的用法filters中的transformS2H()函数和parseTime() 是引入的时间处理函数,在js中是可以直接拿来当过滤器用的,但在ts中必须自定义一个函数去处理后才能使用原创 2021-02-26 10:45:11 · 4623 阅读 · 1 评论 -
自定义事件中调用ECharts数据视图关闭事件
自定义事件中调用ECharts数据视图关闭事件原本用的是echarts自带的数据视图样式,点击转换成数据视图后会有样式的问题,如图:正常的折线图点击数据视图后显示数据会讲原本的title给遮盖掉,但是还会露出一部分,右侧还有多余的滚动条,改样式的话,获取不到这个动态生成的数据视图的父元素div所以想到了自己写组件,写一个table将自带的那个数据视图给覆盖掉但是echarts没有提供直接关闭数据视图的api,所以换种思路,可以调用echarts中那个关闭按钮事件,配置中lang :['数原创 2021-01-28 11:49:54 · 1196 阅读 · 11 评论 -
element-ui中得upload组件上传视频到阿里OSS
element-ui中得upload组件上传视频到阿里OSS1.安装ali-ossnpm/cnpm i ali-oss --save2.在相应得页面中引入OSSimport OSS from 'ali-oss'3.上传视频到OSS上(我是在选择视频后就提前上传到OSS上面去了)element-ui的应用:(上传到OSS是在绑定change的videoChange函数中) <el-upload ref="videoUpload" :http-r原创 2021-01-23 11:55:09 · 1553 阅读 · 2 评论 -
报错:‘typeof import(“f:/my-project/node_modules/vue/dist/vue“)‘ is not a constructor function type
报错:Type ‘typeof import(“f:/my-project/node_modules/vue/dist/vue”)’ is not a constructor function typ新建Vue3项目的时候,原创 2020-12-14 15:56:09 · 8523 阅读 · 2 评论 -
报错: Error: Cannot find module ‘vue-template-compiler‘
报错: Error: Cannot find module ‘vue-template-compiler’最近听说公司要更换新技术vue3+ts+element,本来的后台都是用vue2.x+js+element来写的,所以就想自己先试一下但,但是没想到各种报错。。。。新建Vue3+ts项目时,正常创建项目,如图:但是回车后报错:一脸懵逼,回头看了一下自己创建项目的步骤,是这样的,但是为啥会缺少了呢去创建项目的文件下看了,创建的项目已经存在了,果断打开,在vsCode的终端中输入:npm原创 2020-12-14 15:12:35 · 14940 阅读 · 4 评论 -
vue中的父子组件相互传值
1.父组件向子组件传值,子组件用props来接收父组件传过来的值2…子组件用this.$emit向父组件传值子组件:<template> <!-- 这是子组件 --> <div class="child"> <p> 这是父组件传给子组件的东西: <span class="childCom">{{parentData}}</span> </p> <button原创 2020-09-11 09:40:19 · 135 阅读 · 0 评论 -
vue三目运算绑定class写法
html代码: <div :class="use ? 'class2': 'class1' "> 三目运算绑定class </div>script中代码:new Vue({ el: '#app', data:{ use: false }});style中代码.class1{ background: #444; color: #eee;}.class2{ background:red; color:yellow;原创 2020-09-07 14:33:55 · 3506 阅读 · 0 评论 -
打包报错npm ERR! missing script: build
打包的时候报错npm ERR! missing script: build去package.json中查看参数为:![在这里插入图片描述](https://img-blog.csdnimg.cn/20200824200649801.png#pic_center所以打包命令 npm run build:stage原创 2020-08-24 20:09:29 · 1384 阅读 · 0 评论 -
大白话理解Vue数据双向绑定原理
Vue的数据双向绑定原理就是采用 数据劫持结合发布者-订阅者模式来实现的,其原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。思路整理:通过obj.defineProperty()来对属性进行劫持,达到监听数据变动的目的1.实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并同指订阅者2.实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板原创 2020-08-04 17:40:00 · 529 阅读 · 0 评论 -
Vue项目中使用富文本
最近在写一个后台管理项目,用的是Vue框架和Ant Design of Vue组件。有个页面需要用到富文本,这里记录一下用法。1.引入富文本组件$ yarn add vue-quill-editoror$ npm install vue-quill-editor --save2.全局引入import VueQuillEditor from 'vue-quill-editor'im...原创 2020-04-28 09:42:10 · 869 阅读 · 0 评论 -
报错Maximum call stack size exceeded
写了一个页面,这个错误一直跟着,个人都不咋明白是啥子错百度说是"超出最大调用堆栈大小",但是我也没有用递归函数啥的,可能别人说里dei,个人代码写的烂。看了一下自己的路由配置,我想让首页加载默认显示第一个页面,就用了重定向,注释掉就好了,但是首页默认变成了空白,后面会试一下其他的方法吧...原创 2020-04-15 11:56:18 · 370 阅读 · 0 评论 -
vue项目中 tab标签页标题 使用阿里图标根据选择状态自动变色
自己建一个项目,将需要的图标加入购物车,然后点击添加至项目添加的图标都在这了其中scriptUrl是在你添加其它的图标时,需要更新的,点击更新代码,会生成相应的地址,替换过去就可以了,然后就可以直接使用了图标颜色随着切换状态自动显示相应的颜色。...原创 2020-04-15 11:30:16 · 463 阅读 · 0 评论 -
vue页面中的tab切换标签页中使用echarts,报错TypeError: Cannot read property 'getAttribute' of null
vue页面引入了ant design插件中的Tab标签页,但是默认第一个页面时,可视化图表可以正常显示,切换到第二个页面时,图表就加载不出来,报错:百度了一下,发现同样的错误,别人的解决方法有两种,分别是:这是在mounted里面加个 this.nextTick就可以解决。第二种方法:利用Vue中的ref和nextTick就可以解决。第二种方法:利用Vue中的ref和nextTic...原创 2020-04-15 11:08:14 · 893 阅读 · 0 评论 -
利用vue-cli脚手架创建项目
首先你要确保你的电脑上全局安装过node和webpack安装脚手架之前,先在终端上输入vue -V来查看一下自己之前是否安装过若没有安装则可以在自己本地的目录下安装脚手架,命令:vue-cli2.x.x版本:安装vue-cli 2.x.x版本:npm install -g vue-cli2版本的创建项目是在终端中调到你将要放置的目录下输入vue init webpack 你自己起的名...原创 2019-12-09 10:01:14 · 255 阅读 · 0 评论 -
axios.js位置
axios的中文官网:http://www.axios-js.com/axios.js的位置:https://unpkg.com/axios/dist/axios.min.js原创 2019-12-03 17:39:09 · 1094 阅读 · 1 评论