草庐IT

vue+element

全部标签

vue3 webSocket 封装及使用

vue3webSocket封装及使用封装import{ref,onUnmounted}from'vue';interfaceSocketOptions{heartbeatInterval?:number;reconnectInterval?:number;maxReconnectAttempts?:number;}classSocket{url:string;ws:WebSocket|null=null;opts:SocketOptions;reconnectAttempts:number=0;listeners:{[key:string]:Function[]}={};heartbeatIn

基于vue.js在线购物商城系统设计与实现(uni-app框架+PHP后台) 研究背景和意义、国内外现状

 博主介绍:黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程,免费项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频;项目的界面和功能都可以定制,包安装运行!!!如果需要联系我,可以在CSDN网站查询黄菊华老师在文章末尾可以获取联系方式一、研究背景和意义研究背景随着互联网技术的迅速发展和电子商务的普及,线上购物已经成为人们日常生活中不可或缺的一部分。传统的线下购物方式受限于时间、地点和商品种类,而在线购物

微前端-qiankun:vue3-vite 接入 vue3-vite

一、背景主应用:vue3、vite主项目接入qiankun子应用:vue3、webpack二、代码-接入子应用2.1、安装vite-plugin-qiankun(qiankun官方不支持vite)需要安装插件pnpmaddvite-plugin-qiankun2.2、vite.config.tsimport{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importvueJsxfrom'@vitejs/plugin-vue-jsx'importqian

【Element UI详细介绍】

ElementUI详细介绍1.ElementUI1.1Vue+ElementUI安装1.2开发示例2.特点3.组件分类4.开始使用5.注意事项1.ElementUIElementUI是一个基于Vue2.0的桌面端组件库,主要用于构建快速、简洁的用户界面,ElementUI提供一套丰富的组件和工具,能够帮助开发者快速构建高质量的Vue应用,它由饿了么前端团队开发,并且开放源代码。官网链接:官网另外一个与ElmentUI类似提供基于Vue2.0的组件库是iview1.1Vue+ElementUI安装1.2开发示例开发一个基于vue+elementui的弹出框。1)在HBuilder中建立一个基本h

nginx配置若依框架vue打包项目(同时支持http和https)

该配置模版主要是若依框架前后端配置,若只是配置普通的vue项目,直接复制一下小模块即可 #vue页面访问配置   location /{       root/www/wwwroot/www.xxx.com;      #autoindexon;       try_files$uri$uri//index.html;       index index.htmlindex.htm;       proxy_connect_timeout 18000;       proxy_send_timeout   18000;       proxy_read_timeout   18000;    

【Element UI】el-popover的弹出框动画,设置transition属性无效

使用el-popover组件时,弹出框的动画默认是fade-in-linear,有的项目需求中不喜欢淡入淡出的动效,希望改为其他动画效果,我们查阅文档会发现没有其他transition属性值介绍,设置为其他的值也没有效果此时我们可以在组件所在的页面按需引入element的内置过渡动画 这样我们就可以将el-popover的transition属性设置为fade淡入淡出或者zoom缩放等效果了 代码如下  

vue3使用Element ui plus中MessageBox消息框+radio框配合使用

想要达到的效果首先安装elementuiplus省略~~官网地址:https://element-plus.gitee.io/zh-CN/component/message-box.htmlhttps://element-plus.gitee.io/zh-CN/component/message-box.html需要用到的引入import{h}from"vue";import{ElMessageBox,ElRadioGroup,ElRadio,ElIcon,}from"element-plus";点击下载letselectedOption:any=ref(0);functionopen(fil

vue3-ace-editor前端 json格式化显示 json编辑器使用

前端json格式化显示json编辑器使用vue3-ace-editor1.安装项目目录下打开终端运行npminstallvue3-ace-editor2.使用template>divclass='content'>el-selectv-model="aceConfig.theme"class="m-2"placeholder="Select"size="large">el-optionv-for="iteminaceConfig.arr":key="item":label="item":value="item"/>/el-select>el-button@click="jsonFormat">

Vue3 关于setup与自定义指令

setup语法糖 最大好处就是所有声明部分皆可直接使用,无需return出去注意:部分功能还不完善,如:name、render还需要单独加入script标签按compositionAPI方式编写//setup下还可以附加setup语法糖独有 import{ref,reactive,toRefs}from'vue'consta=1;constnum=ref(99)//基本数据类型constuser=reactive({//引用数据类型age:11})//解构能获取响应式属性{}解构toRefs保留响应式const{age}=toRefs(user)//导出defineExpose({a})//p

vue2和vu3屏幕显示适配 屏幕等比例缩放?

先上效果图展示  一、禁止项目页面百分比放大缩小(优化辅助使用,可加可不加,凭自愿)//禁止缩放window.addEventListener("mousewheel",function(event){if(event.ctrlKey===true||event.metaKey){event.preventDefault();}},{passive:false});//firefoxwindow.addEventListener("DOMMouseScroll",function(event){if(event.ctrlKey===true||event.metaKey){event.prev