![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 76
狼丶宇先森
前端领域博主,Nodejs与Web前端及Flutter领域开发!尽微薄之力,让社会更美好!有朋自远方来,不亦乐乎
展开
-
解决vue-area-linkage 无法回显的bug
最近写的项目,前几天有一个需求是要写省市区联动选择,我们项目组的一个妹子上网搜罗了一遍之后发现了vue-area-linkage这个插件,应该是专门为vue准备的省市区插件。但是后面发现这插件有个数据无法回显的bug.将源码下载到本地跑了一遍,发现两个地方的代码没执行,导致默认值无法显示,就无法回显了.下面两段代码是已经修改过后的,1.移除 if (!this.isSetDefault && isArray(val) && val.length === this.level + 2) 此判断条件中的取反!原创 2022-06-26 19:28:21 · 852 阅读 · 1 评论 -
vue element upload 一次性自动上传多文件多图片的解决方案,多文件单接口,自动上传
一、写在前面最近的项目中用到了element的upload组件,有这样的一个需求,需要一次性上传多张图片或者一次性上传多个文件,虽然element官网的组件提功了这样的一个上传组件,也有多选文件的属性【multiple 是否支持多选文件 boolean】,但是会有一个问题,此组件默认的自动上传是使用的单文件上传接口,多次调用进行上传,即 3张图片就会调用3次上传的接口,然后on-success方法也会调用3次,就不满足业务场景了。相信你看到这篇文章的时候,肯定已经找了好几个解决方案了,很多都是使用的手动上原创 2021-03-07 18:16:30 · 14562 阅读 · 31 评论 -
Vue一键全屏解决方案
一、写在前面想信你看到这篇文章的时候,就知道,你需要一个最简单的一键全屏解决方案了。二、进入主题1.最简单的就是使用一个第三方的包,screenfull copy下面的命令即可安装:npm i screenfull --save//orcnpm i screenfull --save//oryarn add screenfull2.封装一个全屏的按钮: AppScreenfull/index.vue<template> <span :title="title"原创 2020-12-28 11:26:00 · 637 阅读 · 0 评论 -
最简单的vue element-ui自定义主题换肤和自定义组件换肤功能
一、写在前面相信很多小伙伴都没整明白,自定义主题到底是怎么做的,今天最简单的换肤主题来了。二、进入主题1、主题文件的css下载首先去这个地址:https://unpkg.com/element-ui/lib/theme-chalk/index.css把css文件下载到本地 ,然后按下图的方式将改革下载的文件放到这里来。2、新建一个主题工具文件如图,可以封装成一个组件,格式及结构如下:新建 stylesheet-text.js 内容如下:/** * 自定义主题样式变更,如果是自己开发的组原创 2020-12-28 11:11:12 · 1628 阅读 · 2 评论 -
vue3.x的开发代码格式与风格指南推荐
一、写在前面最近接手了两个vue的项目,打开之后发现各个的编码风格都不太一样,那怎么才算良好的编码风格呢。可能有很多小伙伴都知道vue的基本语法和用法。但是认真看过一遍官网的说明的有几个呢?那接下来让我们一起来看看官方是推荐的哪种风格。以下的规则内容部分引用的官网原文:二、参考官网(这段内容引用的官网原文)这里是官方的 Vue 特有代码的风格指南。如果在工程中使用 Vue,为了回避错误、小纠结和反模式,该指南是份不错的参考。不过我们也不确信风格指南的所有内容对于所有的团队或工程都是理想的。原创 2020-12-18 10:17:35 · 2030 阅读 · 0 评论 -
解决html2canvas图片跨域的问题has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is pres
在使用html2canvas截屏生成图片的时候,会出现has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.这个问题.如下:正常的图片应该是这样:异常的图片,头像部分无法显示:报错:Access to image at 'http://192.168.0.220/cwcdstatic/studentheadimage/444444原创 2020-10-13 10:52:14 · 12483 阅读 · 19 评论 -
封装el-table 带多级表头,集成表格分页与导出的功能,
写在前面用了element-ui的小伙伴们都应该知道,官方给的案例中,el-table是最简单的,未经过二次封装写起来肯定是如下: <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </原创 2020-09-30 10:02:49 · 1887 阅读 · 1 评论 -
el-tree 懒加载,默认加载N级.异步加载子节点
如何使用elementui中的树形组件在懒加载模式中会默认展开N层;需求如下:用tree组件进行懒加载默认会展开4层.剩下的使用异步加载.<template> <div id="app"> <el-tree :props="props" :load="loadNode" lazy show-checkbox> </el-原创 2020-08-26 09:24:58 · 4067 阅读 · 5 评论 -
解决 vue.draggable 拖拽 点击事件失效无效与拖拽事件冲突的问题
draggable 是个非常不错,而且很方便的拖拽组件,但是你在项目中可能会遇到被包裹的拖拽元素对象的点击事件失效的问题,事件冲突了.先看代码示例,再看解决思路及方法.1. 被拖拽组件的父组件 Warp.vue<template> <draggable v-model="sendData.template" class="app-form-items" @change="handleDraggableFormItemChange"> <t.原创 2020-05-21 18:23:31 · 23883 阅读 · 8 评论 -
vue-editor2 上传图片的坑 @imageAdded 自定义图片上传的时候 @imageAdded 不触发,无效
vue中的富文本编辑器,vue2-editor, 使用use-custom-image-handler 自定义图片上传的时候 @imageAdded 不触发,无效;<!--@imageAdded="handleImageAdded"这里不要使用驼峰,否则不太好使-->要用@image-added="handleImageAdded" 才行...<template> <vue-editor v-model="editorVal...原创 2020-05-14 18:38:43 · 1785 阅读 · 5 评论 -
[Vue warn]: Duplicate keys detected: 'true'. This may cause an update error. found in xxx vue 报错
vue中报错[Vue warn]: Duplicate keys detected: 'true'. This may cause an update error.found in xxx可能是的你绑定的key重复了.原创 2020-05-13 11:11:40 · 3020 阅读 · 0 评论 -
vue分页插件nuxt分页算法js支持url跳转分页和ajax参数分页
在vue或者nuxt的项目里可能会用到的分页插件.url分页效果是通过跳转url的形式来传递页面参数,或者url?page=1等的方法,下面是源码部分,别的需要的自行修改即可.AppPager.vue<template> <ul class="app-pagination"> <template v-if="type == ...原创 2020-03-31 12:57:05 · 2645 阅读 · 18 评论 -
亲测在vue 3.x中自动引入全局less变量
vue项目开发过程中,每次都引入一次全局变量觉得很麻烦,接下来就可以解决你的麻烦了.首先我们要用到一个工具style-resources-loader执行这个命令安装.npm i style-resources-loader --save-dev然后在vue.config.js中配置const path = require('path');/** * 自动引入全局...原创 2020-03-26 17:58:36 · 1091 阅读 · 1 评论 -
解决nodejs koa express以及vue,nuxt项目中使用别名映射vscode不提示的问题,兼容webpack的@和best-require 的:xxx 别名映射,sequelize没提示
nodejs中使用别名映射,兼容webpack的@和best-require 的:xxx 别名映射安装库 best-require 进行别名映射npm i best-require --save映射别名. 实例在本项目中 server/index.js 中const path = require('path');const ROOT_PATH = process.cwd()...原创 2019-11-30 00:09:30 · 1358 阅读 · 3 评论 -
vue中使用Alipayer,播放rtmp,m3u8,mp4视频, vue-alipayer-v2.
这是一个基于Alipayer 开发并封装于vue的播放器由于项目需要接入rtmp协议的直播流,用于实时监控,看了网上的几个开源播放器,最后选择了阿里云的开源播放器,Alipayer,但是Alipayer是cdn加载的,且没得一个正式的vue版本,最后还是选择了自己手写吧.废话不多说,直接上代码,如下:项目地址:https://github.com/langyuxiansheng/vue-...原创 2019-11-14 18:31:13 · 6884 阅读 · 16 评论 -
sign-canvas 一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端;
写在前面 :在项目的开发过程中可能会涉及到手写签名(电子签名)那些,在前端的思路是使用canvas 来签名,导出成图片进行保存。此轮子是继https://blog.csdn.net/qq_33270001/article/details/81809535之后,用于vue项目中,为了方便自己与众人和复用而开发;相比以前:1. 增加npm 包一件安装并使用,2. 增加v-mode...原创 2019-11-01 13:55:23 · 9271 阅读 · 19 评论 -
vue 报错: [Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded" 很可能是你的name错了
当你的vue项目中出现这种报错的时候,页面肯定是显示不出来,找了半天,似乎也没发现有循环引用的呀 为啥会报内存溢出呢?vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"warn @ vue.runtime.esm.js?2b0e:...原创 2019-08-16 14:34:33 · 27194 阅读 · 0 评论 -
vue 怎样实现hover效果
使用Vue来实现鼠标悬停效果。可以使用事件处理器v-on指令(简写为:@)来完成。为标签绑定mouseenter以及mouseleave事件即可。hover是css中的选择器,用于选择鼠标指针浮动在上面的元素。所以a:hover可用于设置当鼠标悬停在超链接之上时超链接的样式。效果图:参考: http://hao2013.cn/?id=50...原创 2018-08-18 14:45:55 · 21965 阅读 · 0 评论 -
console.log()控制台输出各种字体样式
1、3D文字console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px ...原创 2018-08-18 14:52:37 · 5346 阅读 · 0 评论 -
vscode配置 开发vue
https://blog.csdn.net/wxl1555/article/details/78845823.eslint.js "plugin:vue/recommended",'standard'Vue 2 Snippets for Visual Studio Codevscode-icons{"workbench.colorTheme": "Solarize...原创 2018-08-20 16:24:00 · 986 阅读 · 0 评论 -
vuex中获取不到值或者获取失败
1. vuex state的初始值未定义,后面的逻辑就是没问题也拿不到值,而且不会有警告和报错...原创 2018-08-20 16:25:03 · 7285 阅读 · 0 评论 -
分享一个axios的通用配置
分享一个axios的通用配置在项目开发中,可能会用到这个/*** * Created by Simple on 2018/1/14 0014. * Http请求控制器模块 */import axios from 'axios';import store from '@/store/index';import types from '@/store/types';impor...原创 2018-09-21 14:19:09 · 1714 阅读 · 0 评论 -
vue.js 核心知识点(一)
此篇文件仅仅作为笔记分享,不用于其他用途!!! 看了许多关于vue的书籍和学习材料之类的,稍微做个总结吧先打开官网的首页:https://cn.vuejs.org/ 官网里说的是Vue 是渐进式框架的:渐进式含义:没有多做职责之外的事。 你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用; 也可以整个用它全家桶开发,当Angular用;...原创 2018-09-21 16:30:33 · 2012 阅读 · 0 评论 -
基于Vue和ElementUI/vue-router 和 vuex的后台管理系统基础脚手架
我也看了许多的开源框架,各有各的好吧 我整理了一下我之前的项目 提供了一套基本的基础框架 开箱即用的使用了vue-router 和 vuexajax请求使用的axios提供最基本的脚手架服务github:https://github.com/langyuxiansheng/base-vueadmin-client配套使用的后台服务 https://github.com/la...原创 2018-11-12 10:39:12 · 1753 阅读 · 0 评论 -
在vue-cli3.0项目使用proxy跨域 vue项目使用proxy跨域
通过vue-cli3.x版本构建的项目使用proxy和以前的项目不同,而且3.x版本构建的时候可以选用typescript了。下面记录一下如何使用proxy跨域。首先在根目录创建vue.config.js文件,这个配置文件在运行项目的时候自动加载。 // vue.config.jsmodule.exports = { //webpack - dev - server 的配置项...原创 2018-12-28 17:25:34 · 2252 阅读 · 0 评论 -
nuxt 设置路由的meta属性,nuxt 怎么设置路由的meta,nuxt 怎么设置router的meta
nuxt 官网说的 专注于UI的渲染,作者想试一下用来写后台管理的界面感觉何如,可以开启 spa模式,或者不改变,也会有不一样的体验哦.基于nuxt.js的管理后台项目,一个项目部署,可以一站式管理数据库和你的业务的增删改查操作,项目暂未完善,待完善后开源于github 一个问题,想了好多种办法,终于用了一个笨方法解决了这个问题如下所示: routes.js 如下:/**...原创 2019-01-12 20:35:22 · 12296 阅读 · 11 评论 -
推荐45个2018年Vue开源项目
原文标题:"2018年最好的45个Vue开源项目汇总"在过去的一年里,我们比较了将近 12,000 个 Vue.js 开源项目和库,从中挑选了最好的 45 个(0.37%)。这些项目和库可以分为 3 类: 用户界面(1~19) Vue.js 工具(20~36) 项目(37~45) 这是一个非常好的清单,精心挑选了 2018 年 1 月至 12 月期间发布的最佳...转载 2019-02-26 11:25:57 · 641 阅读 · 0 评论 -
Vue 3.0 ?
原文标题:"Vue 3.0对Web开发意味着什么?"18 年 11 月,尤雨溪向外宣布了 Vue 3.0 的关键更新。新版本所带来的优化让 Vue 更加高效、更加模块化且更加易于使用。这篇文章将讨论这些变化,以及我认为这些变化将在 Vue 3.0 发布后给 Web 开发世界带来哪些影响。Vue 的现状Vue 是“一个用于构建用户应用程序的渐进式框架”。它的设计非常灵活,可以将单个 Vu...转载 2019-02-26 11:44:52 · 1014 阅读 · 1 评论 -
vuex打印的对象有值,但取用的时候没有值 为undefined
异步获取的对象,打印的时候可以看到有值,但是实际使用的时候是没有值的 ,原因是vuex的state未初始化定义.原创 2019-03-29 09:20:54 · 8047 阅读 · 5 评论 -
vue element-ui el-upload组件 上传图片到阿里云OSS
阿里云那边的配置就先不说了.遇到跨域的问题看这里https://help.aliyun.com/document_detail/31870.html?spm=a2c4g.11186623.4.1.4fec49e8JjFWF9直接上代码.1.下载安装ali-ossnpm i ali-oss --save2. 新建一个文件aliyun.oss.client.js 如下...原创 2019-04-03 17:01:46 · 12310 阅读 · 31 评论 -
vue中使用slick初始化异常,初始化失败,dom不对,
假如你在vue中使用了这个轮播图的插件,在动态绑定数据的时候,你会发现初始化完成之后页面显示异常$('.soultion-slider02 .slider').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 1, dots: true // fade:true})那么你可以用这样的...原创 2018-08-18 14:33:44 · 1392 阅读 · 0 评论