vue音频(监听播放完成)
摘要:<template> <div> <audio ref="audio" :src="audioSrc"></audio> <button @click="playAudio">播放</button> <button @click="changePlaybackRate(1.5)">加速</butto
阅读全文
posted @
2024-01-04 15:27
鲤斌
阅读(385)
推荐(0) 编辑
vue图片由小放大
摘要:原生效果 <template> <div> <transition> <img :src="imageUrl" class="image" /> </transition> </div> </template> <script> import imageUrl from "../assets/bac
阅读全文
posted @
2024-01-04 13:58
鲤斌
阅读(15)
推荐(0) 编辑
vue强制横屏
摘要:在app.vue中 <template> <div id="app"> <router-view /> </div> </template> <style lang="scss"> // 1 @media screen and (orientation: portrait) { html { wid
阅读全文
posted @
2024-01-04 11:59
鲤斌
阅读(414)
推荐(0) 编辑
vue部署项目报错导致空白页解决
摘要:在nginx上部署项目出现空白页并报错 解决方法: 在vue的vue.config.js文件中 改成:module.exports = {publicPath: './'}
阅读全文
posted @
2023-12-12 18:36
鲤斌
阅读(33)
推荐(0) 编辑
时分选择器
摘要:<template> <div> <el-time-picker v-model="selectedTime" :picker-options="timePickerOptions" ></el-time-picker> </div> </template> <script> export defa
阅读全文
posted @
2023-11-09 14:34
鲤斌
阅读(28)
推荐(0) 编辑
$router.push跳转页面传参
摘要:$router.push传参与收参 //传参 <el-button type="text" @click="$router.push('/games/Match?id='+1)">页面跳转1</el-button> //收参 const id = this.$route.query.id; $rou
阅读全文
posted @
2023-09-07 11:32
鲤斌
阅读(193)
推荐(0) 编辑
数据表格原表格上进行编辑和保存
摘要:<template> <div> <div class="st-table"> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> <
阅读全文
posted @
2023-09-04 10:59
鲤斌
阅读(28)
推荐(0) 编辑
表格中再展开一个表格
摘要:<template> <el-table ref="table" border stripe highlight-current-row :data="tableData5" style="width: 800px;"> <el-table-column label="商品 ID" prop="id
阅读全文
posted @
2023-09-04 10:54
鲤斌
阅读(8)
推荐(0) 编辑
浏览器的本地存储和会话存储
摘要:1.本地存储 使用浏览器的本地存储(Local Storage):可以使用localStorage对象将数据存储在浏览器的本地存储中。这样,即使用户刷新页面或关闭浏览器,数据也会被保留。 /** 将数据存储在localStorage中会长期保存,即使关闭浏览器也不会丢失。 使用localStorag
阅读全文
posted @
2023-09-04 10:27
鲤斌
阅读(295)
推荐(0) 编辑
nvm安装与使用
摘要:在window中 1.下载地址 2.解压安装包:将下载的nvm-setup.zip文件解压到你喜欢的位置,例如 C:\nvm。 3.安装nvm:进入解压后的nvm文件夹,并运行nvm-setup.exe文件。按照安装向导的指示,点击“Next”进行安装。 4.配置环境变量:安装完成后,打开“控制面板
阅读全文
posted @
2023-08-23 18:51
鲤斌
阅读(245)
推荐(0) 编辑
vue缓存数据
摘要:1,本地缓存(一直存在) localStorage.setItem('key', 'value'); const data = localStorage.getItem('key'); 2,会话缓存(关闭浏览器消失) sessionStorage.setItem('key', 'value'); c
阅读全文
posted @
2023-05-16 11:42
鲤斌
阅读(50)
推荐(0) 编辑
vue全屏
摘要:<template> <div> <img src="../assets/fangda.png" @click="toggleFullscreen" /> </div> </template> <script> export default { methods: { toggleFullscreen
阅读全文
posted @
2023-04-24 18:17
鲤斌
阅读(52)
推荐(0) 编辑
vue上传文件显示进度条,当上传完成后间隔一秒进度条消失
摘要:<template> <el-upload class="avatar-uploader" action="api/file/upload" :show-file-list="false" :before-upload="beforeAvatarUpload" :on-progress="handl
阅读全文
posted @
2023-04-13 16:45
鲤斌
阅读(610)
推荐(0) 编辑
video标签视频指定帧作为预览图
摘要:<video :src="videoUrl" :poster=" videoUrl + '?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,ar_auto' " ></video>
阅读全文
posted @
2023-03-30 17:36
鲤斌
阅读(323)
推荐(0) 编辑
通过鼠标拖拉获取图片原像素的两个点坐标vue
摘要:<template> <div> <img class="no-drag" ref="image" src="https://dashanbook.oss-cn-shenzhen.aliyuncs.com/11.png" @mousedown="startSelection" @mousemove=
阅读全文
posted @
2023-03-22 13:46
鲤斌
阅读(127)
推荐(0) 编辑
使用鼠标在图片上拖拽矩形框vue
摘要:<template> <div> <img class="no-drag" src="https://dashanbook.oss-cn-shenzhen.aliyuncs.com/11.png" @mousedown="startSelection" @mousemove="updateSelec
阅读全文
posted @
2023-03-22 13:19
鲤斌
阅读(178)
推荐(0) 编辑
限制左键拖拽图片阴影vue
摘要:<template> <div> <img ref="image" :src="imageUrl" :style="imageStyle" /> </div> </template> <script> export default { data() { return { imageUrl: "you
阅读全文
posted @
2023-03-22 12:01
鲤斌
阅读(57)
推荐(0) 编辑
vue点击图片获取图片原像素坐标
摘要:<template> <div> <img ref="image" width="1500px" :src="imageUrl" @click="handleClick"> <div v-if="showCoords">X: {{ x }}, Y: {{ y }}</div> </div> </te
阅读全文
posted @
2023-03-21 15:47
鲤斌
阅读(671)
推荐(0) 编辑
长按录音并且音频相似对比打分
摘要:<template> <div> <!-- //音频隐藏为了音频相似对比使用 --> <div> <audio v-for="(audio, index) in audiosurl" :key="index" :src="audio.src" ref="audio" ></audio> </div>
阅读全文
posted @
2023-03-15 04:55
鲤斌
阅读(137)
推荐(0) 编辑
js-audio-pluging(录音)
摘要:安装 npm i js-audio-recorder 代码 <template> <div class="BaseRecorder"> <div class="BaseRecorder-record"> <el-button @click="startRecorder()" :disabled="r
阅读全文
posted @
2023-03-13 11:21
鲤斌
阅读(265)
推荐(0) 编辑