vue.js 3.2.22:自动旋转的音乐播放按钮
2023-09-14 08:59:32 时间
一,演示代码:
Home.vue
<template> <div style="width:100%;height: 100vh;"> <div :class="statusClass" @click="buttonClick" style="position:fixed;right:30px;top:30px;"></div> <audio ref="music" src="/static/audio/SeeYouAgain.mp3" class="media-audio" loop autoplay ></audio> </div> </template> <script> import {ref} from "vue" export default { name: "Home", setup() { //music ref const music = ref() //class const statusClass = ref("stoping") //点击播放按钮 const buttonClick = () => { //alert('buttonClick'); if (statusClass.value === "stoping") { //开始播放 play(); } else { //停止播放 stop(); } } //播放 const play = () => { statusClass.value = "playing"; music.value.play(); } //停止 const stop = () => { statusClass.value = "stoping"; music.value.pause(); } return { buttonClick, music, statusClass, } } } </script> <style scoped> .playing{background: url('/static/img/music_on.png') no-repeat 0 0;width: 44px;height: 44px;animation: rotating 1.2s linear infinite;} .stoping{background: url('/static/img/music_off.png') no-repeat 0 0;width: 44px;height: 44px;} @keyframes rotating { from{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } </style>
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,测试效果
停止时:
播放时:
三,查看vue的版本:
liuhongdi@lhdpc:/data/vue/audio$ npm list vue audio@0.1.0 /data/vue/audio ├─┬ @vue/cli-plugin-babel@4.5.15 │ └─┬ @vue/babel-preset-app@4.5.15 │ └── vue@3.2.22 deduped └─┬ vue@3.2.22 └─┬ @vue/server-renderer@3.2.22 └── vue@3.2.22 deduped
相关文章
- Vue专题 04_自定义指令语法(directives)
- vue 加载页面时触发时间_Vue 刷新页面时会触发事件吗「建议收藏」
- Vue最简洁最全的入门教程
- Vue之js的高阶函数
- Vue之Promise
- 不用React Vue,只用原生JS,如何开发单页面应用?
- JS之在Vue对象内部获取vue对象的索引(箭头函数的闭包导致this代表的是函数本身)「建议收藏」
- Vue.js框架中权衡的艺术
- JS跳转代码_js中跳转页面路径
- vue md5.js_VUE.js
- vue.js 渲染函数_Vue.js的不可渲染且可扩展的RTF编辑器[通俗易懂]
- vue todolist案例_nodejs mvc
- vue.js单页应用_vue嵌入第三方页面
- npm init vite@latest项目名字是abcde,选了vue-tscd abcdenpm installnpm ru
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- Vue中执行事件的两种写法
- VUE 前端文本输出为超文本
- vue.js客服系统实时聊天项目开发(二十)vue项目框架目录结构
- Vue提示框组件vue-notification使用实例演示
- 开心档-软件开发入门之Vue.js Ajax(vue-resource)
- 关于Vue中:key=”index”的console警告详解编程语言
- 使用JS技术实现Oracle数据库链接(js 链接 oracle)
- JS技术连接Oracle数据库实现数据交互(js连接oracle实例)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- Vue中触发Redis订阅通知(vue中订阅redis)