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