草庐IT

Vue-Instant

全部标签

Vue路由第二次进入页面后created和mounted不执行

问题描述:页面每次打开,需要重新加载数据。比如在总管理页面更新了数据,那么在详情页二次打开的时候需要加载最新数据,把加载数据方法写在mounted方法里,却没有执行问题分析:因为路由中created和mounted默认会进行缓存的,除非在router.js中配置:keepAlive:false;这样是把这个页面的路由缓存给关闭了;true为开启,false为关闭问题解决方法:1.将要处理的方法,放在beforeCreate函数中beforeCreate(){//执行函数this.$router.push("/mjxt/entranceguard");//直接跳转门禁页面}2.更改该路由rout

Vue3 appear 失效 如何使用 appear

最近在学习vue3的动画时遇到appear 无法生效的问题问题的具体表现:看以下代码,按理应该来说,如果我们设置fuct-appear-from,fuct-appea-active后在元素初始出现时应该会有一个效果htmlTransitionname="fuct"appear>divclass="doc"v-if="show">div>Transition>css/*初次效果*/.fuct-appear-active{transition:all.3sease-in-out;}.fuct-appear-from{transform:translateY(7em);}/*进入与离开的动画*/.d

vue element ui web端引入百度地图,并获取经纬度

最近接到一个新需要,要求如下:当我点击选择地址时,弹出百度地图,效果如下图:实现方法:1、首先要在百度地图开放平台去申请一个账号和key2、申请好之后,在项目的index.html中引入3、我写了一个组件,方便项目中任何地方可以调用:这里一定要设置一个宽高,容器才能更好的适应,不然显示出来达不到想要的效果,如果没有设置高度还可能显示不出来4、接下来就是开始初始化地图设置了,我的是在弹窗里面用,所有我写在watch里面的,当监测到弹窗打开时即开始初始化地图页面5、具体方法如下:直接附上源码:搜索当前地址是:{{addressName}}{{searchValue}}保存取消import{clea

vue用pdf.js实现对pdf浏览,并隐藏下载、打印

1.下载pdf.jshttps://mozilla.github.io/pdf.js/2.创建文件夹在public里创建pdfjs文件夹,下载的包解压之后,把build和web拉进pdfjs文件夹3.提供pdf的url①如果后端返回的是url进行以下操作。但可能会因为跨域导致报错。本页镶嵌//encodeURIComponent可以避免pdfjs识别错file=xxx?id=xx类型地址的file参数,但可以自动解码,不需要自己解码iframe:src="`/pdfjs/web/viewer.html?file=${encodeURIComponent(this.pdfUrl)}`"frame

Vue3 - 解决使用 Tailwindcss 后导致 UI 组件库样式受影响,引入后发现项目组件库的组件样式不对了(Element/Ant Design Vue/Naive UI/TDesign)

问题描述网上的教程都无法解决,但本文可以帮助您快速解决该问题。当项目引入Tailwindcss后,使用UI组件库的某些组件时,发现有些样式丢失及显示错位、背景色丢失等问题,频发于【按钮组件】背景色丢失|【message消息提示组件】样式位置变形等,严重的整个组件库样式都乱掉了。本文解决方案适用于任何前端框架(例如Element、AntDesignVue、NaiveUI等等),并且无论你是Vue2还是Vue3都可以,只要您按照本文的操作进行,可100%快速解决该问题。解决方案按照以下步骤进行操作࿰

vue 鼠标点击图片做红点标记

实现内容需要实现点击图片标记红点,主要实现了两种方式:只要鼠标点击,就进行标记,可标记多个点,再次点击已标记的点,就取消勾选鼠标多次点击界面只存在一个点一、只要鼠标点击,就进行标记,可标记多个点,再次点击已标记的点,就取消标记实现效果实现代码点击鼠标左键,进行标注{{markData.xAxis}}{{markData.yAxis}}exportdefault{name:"markPointPage",data(){return{//标记图坐标显示markData:{xAxis:0,yAxis:0,rowIndex:0,imageUrl:''},//红点数index:0}},methods:{

dockerfile部署前端vue打包的dist文件实战

背景:一般前端开发后会将打包后的dist文件交由我们部署,部署的方式有很多,这里提供一种思路在服务器的路径下新建一个目录,在目录中新建Dockerfile,编辑这个文件FROMnginxCOPY./dist/home/frontCOPYnginx.conf/etc/nginx/nginx.conf执行(注意后面有一个空格和英文的句号)dockerbuild-timage_name:version.运行镜像生成容器dockerrun-id--namecontain_name-pserver_port:contain_port--restartalwaysimage_name:version

基于Vue和Element UI实现前后端分离和交互

目录前言一、ElementUI简介1.ElementUI是什么2.ElementUI的特点二、项目搭建1.创建一个SPA项目2.安装Element-UI3.导入组件4.创建登陆注册界面登录组件---Login.vue注册组件---Register.vue定义组件与路由的对应关系效果演示: 三、前后端数据交互1.安装axios2.导入api模块,添加axios的全局配置3.修改main.js配置vue-axios4.数据表数据5.编写后端登录注册controller层6.使用封装后的axios发送请求7.测试四、CORS跨域1.什么是CORS?2.为什么会出现CORS问题?3.特点4.如何解决C

SSM+Vue+Element-UI实现员工工资管理系统

文末获取源码开发语言:Java框架:ssmJDK版本:JDK1.8服务器:tomcat7数据库:mysql5.7/8.0数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:Maven3.3.9浏览器:谷歌浏览器目录前言介绍系统展示前台 管理员功能部门信息管理打卡考勤管理请假信息管理工资信息管理员工绩效管理员工功能打卡考勤管理 请假信息管理工资信息管理员工绩效管理 部分核心代码工资信息上传文件前言介绍随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势;对于网上办公自动化当然也不能排除在外,随着网络技术的不断成熟,带

element-ui 富文本编辑器vue-quill-editor的使用(可上传视频、上传图片及图片的放大缩小)

文章目录前言一、安装二、使用插件1、在全局挂载2.组件中挂载(选用)3.使用element-ui上传组件上传文件组件进行隐藏`修改视频标签为`4、添加下拉框滚动效果5、在鼠标悬停处加中文释义最后的Editor.vue具体代码父组件调用:效果展示前言最近做的项目中需要实现文字+图片等信息的发布,由于UEditor不怎么维护了,想换一种,于是找到了vue-quill-editor这款富文本编辑器,展示出来的效果还是不错的。开干!一、安装安装quill-editorcnpminstallvue-quill-editor--save//安装quill,这个要安装,否则报错Cannotreadprope