- 2024-08-12音频播放
<template><divclass="audio-play"><audioref="audio"preload@pause="handlePause"@play="handleTimeProgress"@canplay="computedFullTime"
- 2024-07-19uview小程序弹窗表单验证,阻止表单关闭
设置async-close异步关闭<u-modalref="uModal"v-model="show"width="85%"title="原因"confirm-text="确定":async-close="true"show-cancel-button@confirm="confirm"@cancel="cancel&qu
- 2024-07-12简易Token认证系统实现指南(Spring Boot - Vue)
在现代Web应用中,用户认证是一个不可或缺的部分。除了传统的会话/cookie认证方式,Token认证提供了一种无状态、可扩展的认证机制。在本文中,我将向您展示如何在一个SpringBoot应用中实现一个简易的Token认证系统 什么是Token认证?Token认证是一种安全机制,通常使用JSONWebToke
- 2024-07-12uniapp 使用uview 组件 DatetimePicker 默认值无效问题
1.DatetimePicker默认值无效问题 -- 解决办法:使用$refs解决<u-datetime-pickerref="defaultPicker":show="openDatePicker":value="dateValue"mode="date" minDate="-2209017943"closeOnClickOverl
- 2024-07-10vue 点击图片方法
一般项目中需要点击触发事件才进行查看大图,elementUi组件库中并没有写触发需要执行的代码,这里在触发的方法中加this.$refs.preview.clickHandler()触发查看大图功能<el-uploadclass="avatar-uploader"accept=".jpg,.jpeg,.png"name="image":action="uploadI
- 2024-07-05git报错error: failed to push some refs to xxx
最近在学习git的使用,发现一个本地库同步远程库的问题,先看报错截图:事情经过是,我在自己电脑里创建了一个本地库,在gitee上也创建了一个仓库,我想将我的本地库同步到gitee上的远程,但是却出现了上面的报错。下面是一些前置操作。
[email protected]:id7729/git_t
- 2024-07-02this.$refs[tab.$attrs.id].scrollIntoView is not a function
打印this.$refs[tab.$attrs.id].scrollIntoView 在控制台看到的是一个undefined是因为this.$refs[tab.$attrs.id]不是一个dom是一个vuecomponent如图所示:所以我用的这个document.querySelector(`.${tab.$attrs.id}`)获取domdocument.querySelector(`.${tab.$attrs
- 2024-07-01ts vue3 getCurrentInstance 使用,$refs 调用方式
代码示例可以通过ref变量实现绑定$ref,或者getCurrentInstance来获取$refs/***$ref使用方式,变量名和组件的属性ref值一致*/consthChildRef=ref()console.log(hChildRef,"hChildRef")constinstance=getCurrentInstance()//constself=(instanceasComponen
- 2024-06-22HTML5调用系统摄像头结合canvas进行拍照以及文件上传,调用结束后关闭浏览器对摄像头的占用
html5部分<!--摄像头拍照--><el-buttonsize="mini"type="primary"class="cameraBtn"@click="confirm_camera">拍照</el-button><el-dialog:visible.sync="isShowCamera"title="拍照"
- 2024-06-09Vue3中的常见组件通信之`$refs`、`$parent`
Vue3中的常见组件通信之$refs、$parent概述在vue3中常见的组件通信有props、mitt、v-model、refs、
- 2024-05-28静态删除两项,双重过滤
addToRight(){constselectList=this.$refs.tableLeft.$refs.table.getCheckboxRecords(true)if(selectList&&selectList.length>0){constunselectList=this.leftList.filter(item=>{return!selectList.some(
- 2024-05-15el-cascader多选并且拿到的数据是按这样{"","",""}显示的
1.el-cascader多选是设置multiple为true :props="{multiple: true}"2.多选后页面全部显示看起来不美观可以加collapse-tags3.拿数据用@change方法(记得加传参index)1.需要先加 myCascader自定义ref='myCascader'2.this.$refs.myCascader.getCheckedNodes();
- 2024-05-062024-05-06 vue获取页面元素高度(注意view标签无法获取到高度,请用div)
要获取元素高度要满足以下条件:1、组件或页面已加载完毕;2、使用ref绑定的是标准的dom先贴获取方法:用ref绑定元素title,然后在mounted使用this.$refs.title.offsetHeight获取。为什么要满足条件1?因为页面没渲染完成是无法获取到元素的。为什么要满足条件2?如果你是使
- 2024-05-06重写 elementPlus 删除方法拦截前 和 tag 标签删除前提示
<template><el-selectref="myselectref"v-model="currentValue"v-bind="$attrs"><slotname="option"><el-optionv-for="itemin$attrs.options":key="item.v
- 2024-04-30vxe-table,设置某列不显示时,表头表体对应错乱,添加一行,定位到当前行
key值原先绑定的是索引,应该绑strfield refreshTable(){this.tableKey= Math.random()}//添加一行<vxe-table ref="table" :key="tableKey">methods:{//滚动到左侧this.tableKey=+newDate()setTimeout(()=>{
- 2024-04-26实现FLV,HLS(M3U8)视频播放
1.安装hls.js和flv.jsnpmihls.jsflv.js<template><div><videocontrolsautoplayloopmutedpreload="auto"width="550"ref="videoEl"></video>
- 2024-04-25【vue3入门】-【17】模版引用
模版引用虽然Vue的声明性渲染模型抽象了大部分的DOM的直接操作,但在某些情况下,我们仍然需要直接访问底层DOM元素。要实现这一点,我们可以使用特殊的refattribute挂载结束后引用都会被暴露在this.$refs只上,从this.$refs中按照js原生方法获取元素属性或变更元素属性<template>
- 2024-04-17vue页面表格组件高度控制
//浏览器窗口内部高度console.log("window.innerHeight",window.innerHeight);console.log("document.clientHeight",document.documentElement.clientHeight);console.log("body.clientHeight",document.body.clientHeight);//获取vue组件元素的高度console.l
- 2024-04-13React状态与引用(Refs)- 差异和使用场景
在本文中,我们将深入比较React的state和refs,探讨它们在特定场景下的适用性。当需要在React应用程序中存储数据时,首先要考虑的问题是:“数据是否在组件的生命周期内的某个时刻发生变化?”如果不会,那么普通的const变量非常适合。然而,如果数据会发生变化,那么就需要使用useState和useR
- 2024-04-09srs+webrtc实现浏览器直播(仿b站页面,纯前端)
关于srs请看我之前的博客,SRS实现网页和手机端简单直播。与之不同的是,浏览器推流需要使用werbrtc,因此只需要按srs官网配置即可,WebRTC|SRS(ossrs.net)。回到正题... 一.页面搭建b站web直播页面是通过video标签元素实现,但是video并不能同时将摄像头、麦克风、屏幕共享等同时
- 2024-04-07基于vue3的Crontab组件
网上找的没有满意的,决定从若依前后端分离其前端vue2中的crontab进行转换,先上效果若依: 改后: v2转v3没什么难度,其中有大量的将this.***替换为***.value,笔者写了个正则替换,希望可以帮助大家this.(\w+)$1.value 需要注意的有,在v2中【this.$refs[refName
- 2024-04-01压缩图片的递归方法
authJob(n){if(n<=0){return}else{this.rpc.load.authJob(this.fileList[n-1].raw).then((res)=>{this.outerFileList.push(res)if(n-1==0){
- 2024-03-20fsutil,您可以执行多种文件系统操作,包括查询和设置文件系统特性,refsutil 是用于管理和维护ReFS文件系统的实用程序 管理ReFS文件系统的命令行工具
fsutil/?fsutil:fsutil是一个用于执行各种文件系统相关操作的Windows命令行实用程序。通过fsutil,您可以执行多种文件系统操作,包括查询和设置文件系统特性。----支持的命令----8dot3name 8.3文件名管理behavior 控制文件系统行为dax
- 2024-03-04uniapp 中 this.$refs 无法获取组件
先排除这些原因:https://segmentfault.com/q/1010000043755258https://ask.dcloud.net.cn/question/71788https://www.cnblogs.com/e0yu/p/16135985.htmlhttps://blog.csdn.net/m0_50015961/article/details/112170523总结一下就是:ref不能引用view内置组件、循环创建的自
- 2024-03-03vue2+Element-UI弹出层中带复选框的树结构反填
vue2+Element-UI弹出层中带复选框的树结构反填前言 我们做RBAC时候做角色的权限设置时在弹出权限列表时可能需要反填该角色现有的权限,所以以下案例是个按简单的RBAC的角色权限的树结构的反填。案例 1、最关键的是树要有node-key属性,因为树的很多方法都要使用到这个属性<!