草庐IT

nodejs_vue

全部标签

Vue实现当前页面禁止鼠标右键,复制文本内容和F12

只在mounted()里面写下面的代码,在进入这个页面前其他页面是能正常的使用鼠标右键,复制文本内容和F12,但进入当前页后再出来就会影响到其他页面所以要做到只控制当前页,我们需要在destroyed()钩子中把这些禁止重新打开,这样就能实现该功能了mounted(){setTimeout(()=>{if(this.copy_switch==false){this.$nextTick(()=>{//禁用右键document.oncontextmenu=newFunction("event.returnValue=false");//禁用选择document.onselectstart=newF

Vite4+Typescript+Vue3+Pinia 从零搭建(6) - 状态管理pina

项目代码同步至码云weiz-vue3-templatepina是vue3官方推荐的状态管理库,由Vue核心团队维护,旨在替代vuex。pina的更多介绍,可从pina官网查看特点更简洁直接的API,提供组合式风格的API支持模块热更新和服务端渲染对TS支持更为友好安装npmipinia使用1.创建实例src目录下新建store文件夹,并新建index.ts文件import{createPinia}from'pinia'conststore=createPinia()exportdefaultstore2.使用实例在main.ts里引入并使用import{createApp}from'vue'i

vue项目打包失败问题记录

项目"vue":"^2.7.14"版本起因:项目里安装了openlayers最新版本的地图插件,打包会成功,但是打包页面会有红色提示     刚开始根据红色提示百度找到相同错误的方法提供了的一系列提示安装啊,卸载,装了       node-modules,又卸了来来回回搞了好几遍没用,因为当时也不知道什么原因, 网上粘贴     一顿操作几遍后,成功的变成下面这种错误提示,最重要的是打包不会成功。报错粘贴的内容>vue-admin@1.0.0buildD:\survey_institute\construction>nodebuild/build.jsnpmdoesnotsupportNod

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解

目录前言父组件传子组件----props给要传递数据的子组件绑定要传过去的属性及属性值在子组件中使用props配置项接收props配置项子组件传父组件----组件的自定义事件子组件向父组件传递数据通过代码来绑定自定义事件前言本文将介绍在Vue中父子组件如何进行通信父组件传子组件----props这里先介绍父组件如何向子组件传递数据首先创建脚手架Cli创建父组件App.vue和子组件SonX.vue注册好子组件并在父组件中使用子组件导出子组件我是儿子exportdefault{name:'SonX'}父组件导入子组件并注册使用importSonXfrom'./components/SonX.vu

uni-app 前端项目(vue)部署到本地win系统Nginx上

 若依移动端的项目:整合了uview开源ui框架,配置后端请求接口基本路径地址:打包复现到nginx下:之后就可以愉快的使用这个端口了。如下,使用他来指向一个新网站项目:在nginx上配置了站点与api代理 就可以运行起来了。 安装个稳定版本的:nginx-1.24.0部署配置:增加了网站:8083端口的, 网站目录在nginx/html下的子目录:newxss配置跨域转发  /apixss,多个后台服务器的话,增加跨域配置如 /secondapi, 把它们写在8083端口的server{}对象里。 location/secondapi{         #后端的真实接口http://1008

基于Java+Vue+uniapp微信小程序智慧消防系统设计和实现

博主介绍:✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌🍅文末获取源码联系🍅👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟2022-2024年最全的计算机软件毕业设计选题大全:1000个热门选题推荐✅Java项目精品实战案例《100套》Java微信小程序项目实战《100套》Python项目实战《100套》感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编写等相关问题都可以给我留言咨询,希望帮助更多的人​系统介绍:随着信息技术在管理上越来越深入而广

通过.NET Core+Vue3 实现SignalR即时通讯功能

.NETCore和Vue3结合使用SignalR可以实现强大的实时通讯功能,允许实时双向通信。在这个示例中,我们将详细说明如何创建一个简单的聊天应用程序,演示如何使用.NETCoreSignalR后端和Vue3前端来实现实时通讯功能。步骤1:准备工作确保你已经安装了以下工具和环境:.NETCoreNode.jsVueCLI步骤2:创建.NETCoreSignalR后端首先,让我们创建一个.NETCoreSignalR后端应用程序。打开终端并创建一个新的.NETCore项目:dotnetnewweb-nSignalRChatAppcdSignalRChatApp在项目中添加SignalR包:do

28-Vue之ECharts-折线图

ECharts-折线图前言折线图特点折线图实现步骤折线图常见效果标记线条控制填充风格紧挨边缘缩放,脱离0值比例堆叠图前言本篇来学习下折线图的实现折线图特点折线图更多的使用来呈现数据随时间的变化趋势折线图实现步骤ECharts最基本的代码结构准备x轴的数据准备y轴的数据准备option,将series中的type的值设置为:line完整代码DOCTYPEhtml>htmllang="en">head>metacharset="UTF-8">metaname="viewport"content="width=device-width,initial-scale=1.0">metahttp-equi

echarts的横向柱状图文字省略,鼠标移入显示内容 vue3

效果图文字省略提示如果是在x轴上的,就在x轴上添加triggerEvent:true,如果是y轴就在y轴添加,我是在y轴上添加的并且自定义的方法(我取名为extension)//echarts横向省略文字鼠标移入显示内容exportconstextension=chart=>{ //注意这里,是以y轴显示内容过长为例,如果是x轴的话,需要把params.componentType=='yAxis'改为xAxis //判断是否创建过div框,如果创建过就不再创建了 //该div用来盛放文本显示内容的,方便对其悬浮位置进行处理 letelementDiv=document.getElementBy

从零开始学习Vue3和Naive UI打造一个待办事项应用。

在如今快节奏的生活中,每个人都需要有一个良好的时间管理方式,待办事项应用是其中一个常用的工具。在这篇博客中,我们将一步步学习如何使用Vue3和NaiveUI构建一个待办事项应用。Vue是一个流行的JavaScript框架,它帮助开发人员构建交互式用户界面。而NaiveUI则是一款Vue3的组件库,它提供了大量的高质量组件和工具,使得开发者能够更加快速、高效地构建应用程序。项目效果图vue3+NaiveUI环境的搭建初始化vue3终端下输入:npminitvue@latest起好项目的名称,然后一路回车即可。cdvue3npminstallnpmrundev至此Vue3的项目已经搭建完毕,打开h