草庐IT

Vue-Instant

全部标签

webRCT实时语音视频通话 结合 vue使用

前言:最近项目遇到了一个推送视频对话的需求,本身项目就用到了websocket推送,所以直接使用webRCT就行使用websocket封装了一个socket.jsexportdefaultclassMSocket{constructor(config){if(!config.url){thrownewError('websocketurlisinvalid');}this.reconnectTimer=null;this.heartbeatTimer=null;this.isAlive=false;//是否已经链接this.config={url:'',//链接路径//retry:Infini

Vue06/Vue中this.$nextTick( ) 的用法及详细介绍

一.$nextTick语法:this.$nextTick(箭头函数体) 作用: this.$nextTick这个方法作用是当数据被修改后使用这个方法回调函数获取更新后的dom再渲染出来注意:1.data改变,更新DOM是异步的2.获取更新后的DOM方法this.$nextTick(()=>{需要更新的DOM})说明: 1.$nextTick是一个异步微任务,等待当前函数的dom渲染结束后执行2.$nextTick类似于一个非常高级的定时器自动追踪DOM更新更新好了就触发应用场景:DOM更新是异步的Vue响应式的特征 修改数据后页面会自动更新而更新DOM这个操作是异步的  这个时候使用this.

写一篇前端Vue怎么获取登录的用户名的博客

系列文章目录文章目录系列文章目录前言一、使用全局状态管理(Vuex)获取登录用户名二、使用浏览器本地存储(localStorage)获取登录用户名三、通过后端接口获取登录用户名总结前言在前端开发中,获取登录用户的用户名是一项常见的需求。Vue是一种流行的前端框架,提供了多种方法来获取登录用户名。本文将详细介绍Vue前端获取登录用户名的几种方法,帮助你在实际项目中轻松应用。一、使用全局状态管理(Vuex)获取登录用户名创建Vuexstore,并在其中定义一个用于存储用户名的状态。//store.jsimportVuefrom'vue';importVuexfrom'vuex';Vue.use(V

带有Vue Dev项目的AJAX的参考PHP文件

我用过了vue-cli建立一个VUE项目。其中之一package.json脚本是"dev":"cross-envNODE_ENV=developmentwebpack-dev-server--open--hot",我用它来开发我的项目。问题是当我想从VUE组件中的AJAX调用中引用PHP文件时,它将返回404错误:GEThttp://localhost:8080/test.php404(NotFound)在开发过程中有没有办法引用PHP文件?看答案临时解决方案将添加标头第一,然后运行PHP文件,如下所示。//itshouldbethe1stlineinthephpcode.header("Ac

Vue2使用element-ui引入自定义主题的方法(使用在线主题生成工具)

第一步:按照官方文档使用npm安装element-ui,并完整引入Element-uinpmielement-ui-S main.js中所有的内容删去,改为importVuefrom'vue';importElementUIfrom'element-ui';importAppfrom'./App.vue';import'element-ui/lib/theme-chalk/index.css';//这是默认的主题index.css文件Vue.use(ElementUI);newVue({el:'#app',render:h=>h(App)});随便写点东西,run一下咋办exportdefau

Vue3+element-plus 后台管理系统(含登陆注册功能页面)

Vue学习记录最近在学习Vue3,记录一下自己从0开始搭建后台框架,并获取远程接口数据对页面的渲染本次功能实现主要包括:连接后端的远程接口数据进行登录注册功能实现:1.本次登陆注册合并为了一个页面,页面都使用了element-plus中的组件渲染,更加美观2.用route路由实现不同页面逻辑跳转3.登录状态:打开网页时,不论输入的路由是什么,先判断是否已是登录状态,如果用户为登录状态,则直接显示主页;否则强制跳转至登录页退出登录后,更改状态为不保持登录状态localStorage的使用localStorage.setItem(stringkey,stringvalue) 将键值对添加到存储中l

Vue前端表格导出Excel文件

前言分享一个Vue前端导出Excel文件的方法。记录学习!功能需求:将表格的全部数据导出Excel格式的文件前端:Vue3+Element-Plus这个导出方法全部为前端操作,后端只需要传入表格数据到前端即可(基础的多表查询,用的内连接)一、实现1.页面2.代码2.1核心方法/***表格数据导出Excel实际方法*@paramlist*/constexportList=(list)=>{//表格表头,导出表头lettableHeader=[['#','资产编号','资产名称','资产类别','资产型号',"资产单价","资产金额","生产厂家","生产日期","购买日期","购买人","状态"

vue的拖拽插件: vue.draggable

中文文档地址:vue.draggable中文文档-itxst.comVue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。https://www.itxst.com/vue-draggable/tutorial.html1.安装npmi-Svuedraggable2.引入importdraggablefrom'vuedraggable'3.使用 :key="keyDate"改变 listBak时,刷新图表显示{

router.addRoute()报错 Uncaught Error: [vue-router] “path” is required in a route configuration

一、场景:后端动态传递路由,前端通过router.addRoute()添加时报错。UncaughtError:[vue-router]“path”isrequiredinarouteconfiguration(未捕获错误:[vue-router]:"路径"在路由配置中是必需的)二、分析:查看官方的接口文档:VueRouter_addRoute接口,等于说addRoute()实际接收的是一个类型为RouteRecordRaw的对象。而我错误的将后台返回的数组直接作为参数放入了addRoute()。三、解决方案:将后端返回的动态路由数组边遍历边加入router//关键代码,遍历后放入rewrite

vue h5player.min.js对接海康威视,踩过的坑

一、播放的视频无法占满全屏1、JSResize()接口内部做了50ms防抖动,调用不会立即生效,延时50ms获取最新大小设置窗口。2、h5player内部会在网页缩放的时候自适应父容器大小,但是在单独变更父容器大小的时候无法自适应,需要重新设置大小3、出现不生效的问题一般是有单独变更父容器大小的地方,或者是由于延时调用引起的窗口大小覆盖引起,需要]SResize0)延退50ms调用4、如果延迟了没起作用,就在调用播放时主动调用下JSResize()init(){//设置播放容器的宽高并监听窗口大小变化window.addEventListener('resize',()=>{setTimeou