![](https://img-blog.csdnimg.cn/2019122713543627.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
vue家的小花园。
s先生的d小姐
相信相信的力量。
展开
-
前端后端项目部署到云服务器
前端后端项目部署到云服务器转载 2024-04-28 09:37:26 · 67 阅读 · 0 评论 -
【已解决】ERROR in static/js/xx.js from UglifyJs Unexpected token: punc (() [./~/xx/xx.js:52620,12]
ERROR in static/js/xx.js from UglifyJs Unexpected token: punc (() [./~/xx/xx.js:52620,12]原创 2024-04-25 13:53:08 · 606 阅读 · 0 评论 -
记录一下vue-devtools的安装与使用
vue-devtools的安装与使用转载 2024-04-11 09:21:28 · 447 阅读 · 0 评论 -
vue+elementUi获取滚动条位置、判断是否存在滚动条、addEventListener、removeEventListener、document、window、scroll、client
vue+elementUi获取滚动条位置、判断是否存在滚动条、addEventListener、removeEventListener、document、window、scroll、client转载 2023-11-24 14:31:31 · 1094 阅读 · 0 评论 -
基于vue的图片裁剪vue-cropper使用
基于vue的图片裁剪vue-cropper使用转载 2022-05-19 10:58:39 · 965 阅读 · 0 评论 -
前端解析excel文件,并对内容进行校验,实现上传功能
前端解析excel文件,并对内容进行校验,实现上传功能原创 2022-05-19 10:03:33 · 2501 阅读 · 0 评论 -
vue使用vue-json-excel将后台的json数据导出excel表格
vue使用vue-json-excel将后台的json数据导出excel表格原创 2022-02-25 10:33:49 · 1709 阅读 · 0 评论 -
Vue路由开启keep-alive时的注意点
以下1-5的内容摘抄自:https://www.jianshu.com/p/42429f4d8f9e6为本人曾经用过的处理方式(因为actived曾经在pc端出现过不触发的问题)解释:1-5是我在想办法解决用户前进缓存,后退不缓存的功能时找到的我认为涉及功能比较多的经验,为了防止找不到该文章了,特此记录在该文章内。如果作者看到,您觉得这样不合理,可联系我更改~,因为也记录了我自己的解决办法,因此没有标记为转载文章。HTML部分:<template> <div class.原创 2021-12-23 10:26:23 · 702 阅读 · 2 评论 -
Vue集成Keycloak
keycloak是一个面向现代应用和服务的开源身份和访问管理解决方案。它使得针对应用程序和服务的保护变得容易,几乎不需要代码。简而言之,Keycloak的主要是为Web应用或者RESTful API提供SSO。关于Keycloak的基础知识,你可以自己下载。网上有很多入门的教程,本篇直接从JavaScript Adapter着手,使用Vue框架进行keycloak的集成。我们这里用的是Vue中的keycloak插件vue-keycloak-js。原本我打算用原生的JavaScript Adapter来实转载 2021-12-07 15:24:26 · 3982 阅读 · 0 评论 -
Vue项目部署,清理缓存方式
1.index.html<!--清除浏览器中的缓存 --><meta http-equiv="pragram" content="no-cache"><meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">2.vue.config.jsconst timeUpdate = new Date().getTime();module.exports = {原创 2021-12-06 15:28:54 · 1555 阅读 · 0 评论 -
vue监听浏览器返回
监听浏览器的回退按钮,并阻止其默认事件。1.dom挂载完成后,判断浏览器是否支持popstate。 //监听浏览器返回if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); window.addEventListener('popstate', this.goPageBefore, false); }2.将监听操作写在metho.原创 2021-12-06 11:00:13 · 3429 阅读 · 0 评论 -
vue中引入videojs
1.安装npm install --save-dev video.js或者<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet"><script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>2.原创 2021-10-15 13:53:16 · 1607 阅读 · 0 评论 -
在vue中实现禁止屏幕滚动,禁止屏幕滑动
1.需求:当如图弹框的内容滚动/滑动时,遮罩层后边的内容静止不动。2.代码<div v-show="isShow" @touchmove.prevent @mousewheel.prevent></div>这个div是遮罩组件的根组件,核心就是div上的事件绑定。@touchmove 是触摸移动事件@mousewheel 是鼠标滚轮事件而加了prevent事件后缀,是阻止默认事件。...原创 2021-10-14 10:00:44 · 5944 阅读 · 0 评论 -
ant-design-vue的select组件加入value后placeholder不显示
导致placeholder不显示原因:value为nullvalue为空未获取到value解决办法:value设置为undefined <a-select v-model="formDate.disabled" placeholder="请选择是否停用" style="width:160px"> <a-select-option value="true">是</a-select-option> &.原创 2021-10-13 20:05:36 · 719 阅读 · 0 评论 -
[Antd-vue] Warning: You cannot set a form field before rendering a field associated with the value.
1.需求:给form表单反显数据(一般用于数据修改功能)。2.使用了表单的方法setFieldsValue(),来设置一组输入控件的值,传入的值为object(能少传不能多传)。3.解决办法this.$nextTick(()=>{ this.form.setFieldsValue({ title: this.formObj.title, value: this.formObj.value, }) // loadsh的pick方法})如果上述原创 2021-10-13 19:56:40 · 175 阅读 · 0 评论 -
vue使用sass实现主题换肤功能
本文只介绍深浅两种主题换肤作为参考。1.创建配置动态样式的scss文件,路径为/src/assets/scss/_theme.scss。$themes: ( light: ( //字体 font_color1: #000, //背景 background_color1: #fff, // 背景渐变 background_gradient1:#F8FBFD , //边框 .原创 2021-09-22 19:30:32 · 1236 阅读 · 2 评论 -
vue引入iscroll实现移动端表格-横行滚动-固定列
滚动前:滚动后:上代码1.引入 iscrollnpm i iscroll --save 2.封装iscrollTable.js// 统一使用const IScollProbe = require('iscroll/build/iscroll-probe');let scroller = null;let Selector = '';export function createIScroller(selector) { Selector = selector; scroll原创 2021-09-15 10:57:57 · 1143 阅读 · 0 评论 -
解析出excel中的内容
姊妹篇:vue中实现:解压zip,解析excel页签内容,并实现附件上传本文章只纪录上传单个excel时,将页签中的内容由前端解析出来的功能。采用原生input的方法实现。1.html<div @click="upload">上传</div><input type="file" @change="performanceUploadProcess" ref="inputer" v-show="false" /> <原创 2021-09-03 13:46:24 · 207 阅读 · 0 评论 -
vue中实现:解压zip,解析excel页签内容,并实现附件上传
功能1.对上传的zip压缩包进行解压。2.解析excel页签中内容,用于列表数据展示。3.上传excel附件,用于预览。4.采用input中type="file"来实现上述功能1.html<div @click="upload">上传</div><!-- 加一层if判断的原因:防止上传一次之后,在没有刷新的前提下,再次点击上传,不触发上传功能。 --><div v-if="uploadShowFlag"> <input .原创 2021-09-02 17:21:24 · 1755 阅读 · 0 评论 -
解决computed监听Vuex中state对象中的对象属性时不生效的问题
computed属性监听对象时候,若对象的引用地址未改变,那么computed将不会检测到。(比如object中的某个key对应的value发生了变化,computed检测不出来)原写法export default { namespaced: true, state: { shareInformation:{ other: {}//获取时为Null .原创 2021-09-02 16:42:48 · 3621 阅读 · 0 评论 -
vue-pdf实现pdf文件在线预览
1.需求说明:在h5的vue项目中实现pdf展示,可以考虑引入相关依赖npm vue-pdf。2.安装npm install --save vue-pdf3.pdf上下滑动展示<template> <div> <pdf ref="pdf" v-for="i in numPages" :key="i" :src="url" :page="i" ></pdf>原创 2021-07-19 20:07:05 · 198 阅读 · 0 评论 -
内嵌钉钉h5实现图片预览功能
1.使用原因:原本使用了组件自带的图片预览功能,但是在部分手机型号中:预览图片时,(在移动端的webview下面)左右滑动切换图片,会触发应用的“返回上一页”功能。2.解决办法:使用钉钉提供的图片预览Api。3.代码展示:1.引入import * as dd from "dingtalk-jsapi";import { ImagePreview } from "vant";import Vue from "vue";Vue.use(ImagePreview);2.方法pictureP原创 2021-07-15 10:49:50 · 1523 阅读 · 0 评论 -
微信朋友圈图片样式实现方法
一、需求介绍:列表页的图片,在规定的宽高内,居中展示,不影响清晰度。二、如图:三、方法(推荐使用)1.使用弹性盒,宽度固定,高度不固定。<div v-for="(item,i) in imgList" :key="i" class="imgClass"> <img :src="item.img"/></div>.imgClass{ width: 48%; height: 69px; margin-bottom: 6px;原创 2021-07-15 10:31:07 · 517 阅读 · 0 评论 -
vue(install)注册全局组件---以回到顶部功能为例
一、需求说明:列表内容过长,需要在超过一屏之后添加回到顶部的效果。二、功能实现:1.先在components文件夹里建立一个goTop的文件夹,文件夹内建立一个goTop.js和goTop.vue文件。2.goTop.jsimport goTopComponent from './goTop.vue'const top = { install:function(Vue) { Vue.component('goTop', () =>goTopComponent)原创 2021-07-14 15:01:03 · 165 阅读 · 0 评论 -
vue中实现上拉加载功能
一、需求说明:1.一个页面,有两个可以切换的tab页,上拉加载数据。2.在进行tab页切换的时候,首次会调用两次接口,出现数据重复的现象(虽然在数据处理的时候可以用去重解决,但不是最好的方法)。3.最后采用原生的滚动事件监听。4.最后找到的原因是由于其他功能设置引起的没有数据也有整屏幕的高度,因此vant组件调用了两次列表查询接口。二、解决方案 mounted() { //列表查询方法 this.changeTab(); window.onscroll = ()=>原创 2021-07-13 19:05:06 · 3241 阅读 · 0 评论 -
js随机生成一个32位动态id
//1.方法getId() { const list = []; const range= '0123456789abcdefghijklmnopqrstuvwxyz'; for (let i = 0; i < 32; i++) { list [i] = range.substr(Math.floor(Math.random() * 0x10), 1); } list [19] = range.substr((s[19] &原创 2021-07-13 18:48:12 · 702 阅读 · 0 评论 -
vue(移动端)实现部门/职级树形结构展示
一、需求分析:1.部门按照树形结构展示一级、二级目录;2.当一级目录选中时,二级目录自动全选;3.当二级目录全选时,一级目录自动选中,反之,有一个二级没选中,一级就不被选中;4.添加全选功能。二、上代码备注:此处引用了vant组件的复选框功能。<template> <div id="treeList"> <div @click="checkAllFun"> <van-checkbox-group v-model="rad原创 2021-07-09 20:16:20 · 5383 阅读 · 18 评论 -
钉钉内嵌H5应用动态修改导航栏
1.简介:上一篇文章钉钉H5微应用出现双导航栏怎么解决,这次我们来说说,用钉钉打开微应用时,如何设置导航栏的标题吧。2.解决办法:引入钉钉H5微应用api,设置导航栏title。3.上代码:1.先安装相关依赖npm install dingtalk-jsapi --save2.使用前引入import * as dd from 'dingtalk-jsapi'3.使用//如果有公共页面要进行动态渲染,也可以考虑在该页修改设置标题哦~router.beforeEach((to, from, n原创 2021-07-04 21:18:55 · 1941 阅读 · 0 评论 -
vue中实现拖拽效果---Vue.Draggable
vue实现拖拽原创 2021-07-03 11:29:42 · 1236 阅读 · 0 评论 -
vue中文本超过3行省略并显示下拉箭头(包括获取文本行数)
一、功能需求1.前提:动态渲染分享列表;2.内容超过三行,隐藏多余行数,显示…并配有下拉箭头;3.点击下拉箭头跳转至详情页(仿照微博);4.注意:网上查询了很多,在移动端都有一些设备不适配,因此采用了css和获取行高进行的条件判断。5.备注:如有好的方法的小伙伴,欢迎留言。二、代码部分1.html<div v-for='item in shareList' :key='item.id'> <div :class="[item.rowNum>3?'content原创 2021-07-01 20:21:17 · 2922 阅读 · 1 评论 -
vue项目中在data里引入图片的路径方法
今天在vue项目中遇到了引入本地图片路径报错的问题,百度之后整理了一下,欢迎有遇到相同问题的小伙伴参考~1.先来展示一下报错代码data() { return { img:"@/assets/img/img.png", }; }2.正确引入路径代码方法一:data() { return { img:require("@/assets/img/img.png"), }; }方法二:import img from '原创 2021-06-16 18:51:32 · 1764 阅读 · 1 评论 -
解决:引入背景图时,url带有@符号页面报错
报错代码:@/assets/img/common_business_default_bg.png解决办法:~@/assets/img/common_business_default_bg.png今天又是涨了知识的一天!原创 2021-06-09 16:50:28 · 664 阅读 · 0 评论 -
vue项目中实现图片上传到本地预览并压缩的功能(其中还包括上传按钮的样式修改哦~)
功能描述:点击“上传”按钮,调起本地文件夹,上传图片到页面中进行展示。由于图片过大,需要进行压缩才能入库中保存。1.首先进行布局HTML中<div class="licenceBox"> <input class="licenceBtn" accept="image/jpeg,image/jpg,image/png" type="file" @change="upload($event)"原创 2021-04-16 14:15:58 · 603 阅读 · 0 评论 -
vue深层次组件通信
在vue项目中,我们常用到的组件通讯包括:父子组件传值,兄弟组件传值。如有需要可以查看:vue父子、非父子组件传值超全方法值得拥有~通常是以上两种情况,然而还有一种比较特殊的情况,即孙子组件或更深层次的组件通信。1.father.vue<template> <div> <son :msgProp="msg"></son> </div></template><script>export default {原创 2020-11-05 11:42:44 · 836 阅读 · 0 评论 -
vue项目部署方式:tomcat部署和nginx部署
关于vue部署 1.nginx转发 一般项目前后端分离得话,都会用nginx作为反向代理转发的。 因为项目要兼容ie9,使用axios发ajax请求的时候,不能通过CORS解决跨域的问题,所以尝试部署nginx作反向代理. 参考:vue+webpack+vue-router(history) 部署到nginx服务器下,非根目录,前后端怎样配置文件? Nginx配置proxy_pass Nginx反向代理解决前后端联调跨域问题 1.1vue打包 其中vue+webpack+vue-rout...转载 2020-11-05 11:12:01 · 2280 阅读 · 0 评论 -
element-ui隐藏的el-scrollbar
<div class='departTree-wrap'> <el-scrollbar wrapClass='aside-col-wrap' ref='departTreeScroll'> <el-tree :data="treeData" :default-expand-all='false' :expand-on-click-node='false' @node-cli原创 2020-08-27 17:59:26 · 180 阅读 · 0 评论 -
vue知识点总结,你想要的几乎都有哦!
今天来对vue框架相关知识做个总结,马上要开启系统学习react篇啦~声明:其中包括一些网上视频课程、官网中讲到的内容。废话不多说,知识点来咯~1.什么是MVVM?MVVM 模式不需要用户收到操作 dom 元素,将数据绑定到 viewModel 层上,会自动将数据渲染到页面中,视图变化会通知 viewModel层 更新数据。ViewModel 就是我们 MVVM 模式中的桥梁。2.MVC和MVVM的优缺点✏MVC:优点:简单易懂、层次分明缺点:c(处理model和view之间的交互,把mod原创 2020-08-09 20:18:54 · 1892 阅读 · 0 评论 -
前端实现模糊或精准查询(不过一般是后端实现哦~)
onChanges(){//前端获取到所有要展示的数据,一般不会太多条数 if(!this.searchval){//搜索框绑定值 this.riskData = newRiskList//不搜索时全部展示 this.riskData = this.riskData.filter((item)=>{ return item.newAgentcate == this.agentcate//这里根据登陆账号的权限展示对应的全部数据 })原创 2020-08-02 15:26:50 · 1749 阅读 · 0 评论 -
在vue中使用mixin
Mixin模式提供能够被一个或者一组子类简单继承功能的类,意在重用其功能。vue中提供了一种混合机制mixins,用来更高效的实现组件内容的复用。1.下载相关依赖npm i mixin-js2.定义一个 js 文件(mixins.js)const mixinNew = { data(){ return:{ arr:[] } }, methods:{ //可以全局复用的方法 demo(val){ if(val){ return Str原创 2020-07-29 22:00:36 · 255 阅读 · 0 评论 -
vue中被赋值的私有变量变化影响全局变量的解决方法
在项目中,有些是通过数据字典进行码值转化,那么在保存的时候怎么能传的是码值展示的是对应汉译呢?我提供了一下两种方法,亲测有效!1.JSON.parse(JSON.stringify())let newArr = JSON.parse(JSON.stringify(this.arr));//this.arr为vue中设置的全局变量2.Object.assign()const target = { a: 1, b: 2 };const source = { b: 3, c: 4 };const n原创 2020-07-28 22:12:45 · 736 阅读 · 0 评论