草庐IT

Vue-Instant

全部标签

Vue结合高德地图实现HTML写自定义信息弹窗

最近在写项目的时候有个需求就是根据点击地图上的点展示对应的信息,弹窗看着还挺花哨的。我在高德地图官网上还有各大平台找了如何自定义弹窗,可给出的大多数都是通过JS写HTML结构,我感觉这种不仅不好布局,而且可读性和维护性都不如直接写HTML好。于是我就在想,能不能在HTML里写这个弹窗呢?答案是:能!效果图如下:先说下思路吧,通过看高德地图官方文档关于InfoWindow的介绍,可以看出信息弹窗的显示内容,可以是HTML要素字符串或者HTMLElement对象。于是我就想到了在Vue里不是可以通过this.$refs获取元素的DOM节点吗?然后我就开始了第一次尝试。先看下后台返回的数据类型:da

Vue2 系列:vue.config.js 参数配置

1.publicPath默认值:'/'说明:部署应用包时的基本URL,例:https://www.my-app.com/my-app/,则设置publicPath为/my-app/提示:1.当使用基于HTML5history.pushState的路由时2.当使用pages选项构建多页面应用时。2.outputDir默认值:'dist'说明:打包目录。提示:目标目录在构建之前会被清除(构建时传入--no-clean可关闭该行为)。3.assetsDir默认值:''说明:放置生成的静态资源(js、css、img、fonts)的(相对于outputDir的)目录。注意:从生成的资源覆写filenam

vue项目中页面实现全屏的功能

vue项目中页面实现全屏的功能1.下载插件screenfull2.封装全屏显示的插件3.全局注册插件4.使用插件1.下载插件screenfullnpmiscreenfull@5.1.02.封装全屏显示的插件template>!--放置一个图标-->div>!--放置一个svg的图标-->svg-iconicon-class="fullscreen"style="color:#fff;width:20px;height:20px"@click="changeScreen"/>/div>/template>script>importScreenFullfrom'screenfull'exportd

基于JavaSpringMVC+vue实现协同过滤电影推荐系统详细设计

博主介绍:✌全网粉丝20W+,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星TOP100、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业设计项目实战✌🍅文末获取联系🍅精彩专栏推荐👇🏻👇🏻👇🏻👇🏻2022-2024年最全的计算机软件毕业设计选题大全:1000个热门选题推荐✅java项目精品实战案例《100套》https://blog.csdn.net/weixin_39709134/category_11128297.html目录一、前言介绍:二、系统设计:2.1系统设计原则:2.2系统结构设计:2.3协同过滤算法:三、数据设计:

vue.js毕业设计,基于vue.js前后端分离在线小说电子书阅读小程序系统 开题报告

 毕业论文基于Vue.js电子书阅读小程序系统开题报告学   院:                      专   业:                      年   级:                      学生姓名:                      指导教师:     黄菊华           XXXX大学本科生毕业论文(设计)开题报告书姓  名Xxx学院XXXXXXX专业Xxx年级(班)论文题目基于Vue.js电子书阅读小程序系统指导教师课题论证课题背景Vue(读音/vjuː/,类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设

使用electron-vite +Vue+ElementPlus开发跨平台桌面应用

前言:我们的项目是基于Elasticsearch来进行数据的存储与查询的,使用过ES的朋友应该都比较清楚,现在还没有一个比较友好的ES的桌面客户端软件可以和MySQL的桌面客户端软件媲美的,使用ES起来非常麻烦,经常会被吐槽的三个点:资深测试吐槽:为什么技术选型要选择ES,增删改查个数据麻烦的一塌糊涂,严重影响我的测试效率!研发小白吐槽:新建索引的时候,字段的类型设置咋这么麻烦呢,脚本要写一大坨!研发交接吐槽:这么多索引字段,每个字段代表什么意思啊?没有相关的说明文档吗?一个有理想的程序员:没有工具那么我们就自己写一个呗,对于程序员来说,写个小工具还不是一件想到就能做到的事情吗?说干就干,没过

基于java SpringBoot和Vue uniapp的影楼摄影预约小程序

摘要        今天信息技术的发展很快,其足迹在我们的生活中随处可见。它影响着我们的衣食住行等各种需求。影响也在逐渐增加,逐渐渗透到各行各业,在这种背景下,经过实地考察后,为了让婚纱照管理更加高效方便,我决定开发一个摄影棚预约管理系统。随着社会的进步和时代的发展,科学技术不断向前发展,在21世纪,这是一个信息技术的时代。计算机技术的时代日新月异,计算机以前所未有的创新方式改变着世界的面貌,人们的现代化速度越来越快,生活方式发生了前所未有的新变化。计算机可以解决的问题数量大大增加,可以更有效地处理实际问题,节省大量时间。为此,影楼摄影预约系统的设计符合当前的现实。实现的功能本系统分为普通用户

Vue2 新手上路无处不在的特殊符号,让人傻傻分不清 “:”、“.”、“@”、“#” 、“{{}}“ 、“$“,‘$bus‘,‘$event‘

背景刚刚学vue没多久,经常分不清情况什么时候用什么符号:“:”是指令“v-bind”的缩写“.”是修饰符“@”是指令“v-on”的缩写,它用于监听DOM事件“#”是v-slot的缩写; "{{}}" 插值语法 "$":Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀$。简写Vue中有很多的指令,且形式都是v-xxx。v-前缀作为一种视觉提示,用来识别模板中Vue特定的特性。当你在使用Vue.js为现有标签添加动态行为(dynamicbehavior)时,v-前缀很有帮助,然而,对于一些频繁用到的指令来说,就会感到使用繁琐。同时,在构建由Vue.js管理所有模板的单页面应用程序(SPA

vue3项目利用iframe展示其他页面

一、什么是iframe?iframe是html内联框架元素,它能够将另一个HTML页面嵌入到当前页面中。主要属性如下:src被嵌套的页面的URL地址name框架名称scrolling否要在框架内显示滚动条。值;auto(仅当框架的内容超出框架的范围时显示滚动条)、yes、nowidthiframe的宽度heightiframe的高度frameborder值为1(默认值)时,显示此框架的边框。值为0时移除边框。 二、组件例子下面以组件的的形式举例:constprops=defineProps({src:{type:String,required:true}})constrealHeight=re

vue3项目打包部署到Tomcat(亲测有效)

首先,要确保电脑上已经安装了jdk,还有Tomcat,而且都安装正确。jdk下载与安装教程(win10)Tomcat9.0安装及配置教程(win10系统)Vue项目在VScode里面可以通过npmrunserve可以正常运行。下面是打包部署到tomcat的步骤:1.在vue项目的vue.config.js文件里面module.exports导出的对象中添加publicPath:‘./’的配置项2.在vue项目中的router文件夹下index.js添加配置项base:‘/文件夹名称/’(文件夹名称可自己随意设置) 3.npmrunbuild打包后,将mydemo文件夹复制到到tomcat下we