随笔分类 -  Vue3

摘要:效果图 代码 <li > <a href="javascript:;" class="IndRea flexC Huans"><i></i><p>当前会议 [ 0 ]</p></a> <div style="height:80%;overflow:auto;"> <div v-for="(dataI 阅读全文
posted @ 2023-10-07 13:56 海乐学习 阅读(220) 评论(0) 推荐(0) 编辑
摘要:首先得是 Vue3项目 并已经引入 element plus 引入 element plus 方法:https://www.cnblogs.com/hailexuexi/p/17730724.html 效果图 这个对话框代码 和 头部 菜单 都在 一个 HeaderComponent.vue 文件中 阅读全文
posted @ 2023-09-26 17:34 海乐学习 阅读(1403) 评论(0) 推荐(0) 编辑
摘要:Element Plus简介Element Plus是一个基于Vue3的UI组件库,其设计原则可分为一致(Consistency)、反馈(Feedback)、效率(Efficiency)、可控(Controllability)四个方面。 目前Element Plus可使用的UI组件种类丰富,除了按钮 阅读全文
posted @ 2023-09-26 17:21 海乐学习 阅读(239) 评论(0) 推荐(0) 编辑
摘要:在Vue3中 设置全局的网页样式 阅读全文
posted @ 2023-09-01 11:35 海乐学习 阅读(241) 评论(0) 推荐(0) 编辑
摘要:效果图 man.js 定义 响应式全局对象 globalData 定义一个没有具体参数的json象 extTelTalkData: [], 这么写的好处是 事先不写具体参数,赋值时实例就行。 我是用websocket 收到消息 并赋值的,当然也可以用其它方式赋值。 //全局对象 const glob 阅读全文
posted @ 2023-08-22 17:37 海乐学习 阅读(258) 评论(0) 推荐(0) 编辑
摘要:目标:用一个图片来监视全局websocket对象的连接状态 全局websocket的写法详见:https://www.cnblogs.com/hailexuexi/p/17577818.html main.js 全局对象 websocket的连接状态 //全局对象 const globalData= 阅读全文
posted @ 2023-08-21 16:53 海乐学习 阅读(215) 评论(0) 推荐(0) 编辑
摘要:vue客户端 main.js import { createApp } from 'vue' import { reactive } from 'vue' import App from './App.vue' import {webSocketUrl} from '/public/static/c 阅读全文
posted @ 2023-07-24 17:24 海乐学习 阅读(1582) 评论(0) 推荐(0) 编辑
摘要:vue3.0 外部配置文件,重点是打包后也可以 修改配置参数 注:js文件中必须是标准的 json 格式 一、在public中创建static文件夹,在static文件夹中创建 config.json 文件 config.json (必须是标准的 json 格式) { "webSocketUrl": 阅读全文
posted @ 2023-07-24 12:03 海乐学习 阅读(4117) 评论(0) 推荐(0) 编辑
摘要:效果 man.js 定义 响应式全局对象 globalData //全局对象 const globalData=reactive({ extTelTalkData: [ { userExten: "1000", userName: "刘亦菲", callStatus:"通话" }, { userEx 阅读全文
posted @ 2023-07-21 12:36 海乐学习 阅读(163) 评论(0) 推荐(0) 编辑
摘要:效果 man.js 定义 响应式全局对象 globalData //全局对象 const globalData=reactive({ missedCallData:"", currentUserTel:"", }) app.provide('globalData', globalData); 在ma 阅读全文
posted @ 2023-07-21 12:29 海乐学习 阅读(86) 评论(0) 推荐(0) 编辑
摘要:效果 main.js //全局对象 const globalData=reactive({ extTelMonitorData: [ { title: '用户组一', list: [ { groupID: "0", groupName: "All Users", userDomain: "equii 阅读全文
posted @ 2023-07-21 11:58 海乐学习 阅读(43) 评论(0) 推荐(0) 编辑
摘要:效果 man.js 定义 响应式全局对象 globalData const globalData=reactive({ extTelListData: [ { userExten: "1000", userName: "秦岚", callStatus:"通话" }, { userExten: "10 阅读全文
posted @ 2023-07-21 11:38 海乐学习 阅读(159) 评论(0) 推荐(0) 编辑
摘要:在Vue项目中 遍历显示Json数组 以列表的形式显示的页面上 main.js 全局 json 对象 //全局json const globalData=reactive({ extTelTalkData: [ { userExten: "1000", userName: "刘亦菲", callSt 阅读全文
posted @ 2023-07-17 12:09 海乐学习 阅读(865) 评论(0) 推荐(0) 编辑
摘要:需求在 main.js 中 创建一个 响应式全局对象 。改变这个全局对象时 ,子组件应同步响应。 效果:这几个标签框 绑定的全局对象json main.js 定义 响应式全局对象 //全局对象 const globalData=reactive({ extTelMonitorData: [ { ti 阅读全文
posted @ 2023-07-14 16:46 海乐学习 阅读(172) 评论(0) 推荐(0) 编辑
摘要:子组件 菜单组件 MenuComponent 列表组件 ExtTelListComponent 状态组件 ExtTelStatusComponent 父组件 界面主体 MainIndex 实现功能:在 MainIndex 中引入 三个子组件 通过点击 菜单组件 切换加载 列表组件 和 状态组件 实现 阅读全文
posted @ 2023-07-12 17:24 海乐学习 阅读(1127) 评论(0) 推荐(0) 编辑
摘要:子组件 <template> <div class="menuUn Huans"> <a href="javascript:;" class="menuUna flexC fl-bet Huans" @click="menuOnClick('ExtTelStatusComponent')"><p>调 阅读全文
posted @ 2023-07-12 16:51 海乐学习 阅读(2336) 评论(0) 推荐(1) 编辑
摘要:在 vue3 开发中 经常会遇有 动态切换组件 的需求,下面简单写个例子,当然也还有其它方法。 用 component :is= 来变换组件 <div class="IndConK Huans overH" > <!-- 正常组件 <ext-tel-status-component ></ext-t 阅读全文
posted @ 2023-07-12 16:30 海乐学习 阅读(1418) 评论(0) 推荐(0) 编辑
摘要:vue3.0 外部配置文件,重点是打包后也可以 修改配置参数 axios方式有两个缺点: 1.读取配置参数是用 axios请求 所以要比程序加载慢些。有时会出现程度加载完毕后要等1秒左右才能读到配置参数 2.最重要的缺点是 axios方式,编译后必须放在Apache(或其它服务)的www目录下用 地 阅读全文
posted @ 2023-07-07 16:08 海乐学习 阅读(653) 评论(0) 推荐(0) 编辑
摘要:项目需求 实现一个 响应式全局对象,在A模板页修改全局对象 ,在B模板页中自动响应改变为新值 main.js 全局对象 globalVars import { createApp } from 'vue' import { reactive } from 'vue' import App from 阅读全文
posted @ 2023-07-07 15:02 海乐学习 阅读(414) 评论(0) 推荐(0) 编辑
摘要:vue项目打包上线时报错’Failed to load resource: net::ERR_FILE_NOT_FOUND’ 原因:这里的确是css以及js文件的路径问题 解决方案: 解决时并不需要手动改路径或者加一段判断去修改 最方便的办法时在项目打包前的 vue.config.js 里面将pub 阅读全文
posted @ 2023-07-03 14:27 海乐学习 阅读(897) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示