vue 自定义报警组件
2023-09-11 14:15:30 时间
1.自定义报警组件
Alarm.vue
<!-- 报警 组件 --> <template> <div class="alarm"> <!-- <video src="../assets/mp3/6705.mp3" controls="controls"> 您的浏览器不支持 video 标签。 </video> --> <audio id="myAudio" loop> <source :src="url" type="audio/mpeg"> </audio> <!-- <audio id="myAudio" loop> <source v-if="number == 2370" src="../assets/mp3/2370.mp3" type="audio/mpeg"> <source v-if="number == 4031" src="../assets/mp3/4031.mp3" type="audio/mpeg"> <source v-if="number == 6705" src="../assets/mp3/6705.mp3" type="audio/mpeg"> </audio> --> </div> </template> <script> /** * audio 属性详解 * controls 显示或隐藏用户控制界面 * autoplay 是否自动播放(加载时播放,仅播放一次) * loop 是否循环播放 * preload 是否预加载 */ export default { props: { onOff: { // 报警开关 type: Boolean, default: false }, number: { type: Number, default: 6705 } }, data() { return { url: require('../assets/mp3/6705.mp3') } }, watch:{ onOff: { handler: function (val, oldVal) { if(val){ document.getElementById('myAudio').play(); }else{ document.getElementById('myAudio').pause(); } }, deep: true } }, methods: { // } } </script> <style lang="less" scoped> .alarm { // } </style>
2.页面调用
Setting.vue
<!-- 设置 --> <template> <div> <!-- 标题栏 --> <x-header title="设置"></x-header> <!-- 内容部分 --> <box gap="10px 10px"> <x-button type="primary" @click.native="startAlarm">开启报警</x-button> <x-button type="warn" @click.native="stopAlarm">结束报警</x-button> </box> <m-alarm :onOff="onOff" ></m-alarm> </div> </template> <script> import { XHeader, Box, XButton } from 'vux' // 引入报警组件 import mAlarm from '../../components/Alarm.vue' export default { name: 'Setting', components: { XHeader, Box, XButton, mAlarm, }, data(){ return { onOff: false } }, methods: { startAlarm(){ console.log('开启'); this.onOff = true; }, stopAlarm(){ console.log('关闭'); this.onOff = false; } } } </script> <style lang="less" scoped> .content{ position: absolute; top: 46px; left: 0px; right: 0px; bottom: 0px; overflow: scroll; } /*隐藏 滚动条*/ ::-webkit-scrollbar{ display:none; } </style>
3.效果图
相关文章
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- Vue - 实现图片裁剪功能,并上传到服务器(内置第三方最优秀的裁剪图片组件,上传到服务器功能)干净整洁无 BUG 的示例源码与超详细的注释,兼容任意浏览器
- Vue - 解决 ElementUI / Ant Design Vue 框架组件带有默认回调参数方法时,同时传递默认参数和自定义参数
- JavaScript - vue.js / nuxt.js / uni-app / 微信小程序 js 时间戳与日期格式互转(时间戳转日期字符串格式,日期回转时间戳格式)支持转为日期字符串后自动补0
- [转]Vue 使用use、prototype自定义自己的全局组件
- Vue: 兄弟组件利用自定义Bus传参
- Vue2.0 搭建Vue脚手架(vue-cli)
- Vue组件的操作-自定义组件,动态组件,递归组件
- vue--自定义标签属性--用于多个事件共同引用一个组件--但是两个事件要实现的功能不同-避免冲突
- 【Vue】vue组件和vue插件的创建和使用(底部栏组件、Toast 和 Notify通知插件)
- vue mint-ui 框架下拉刷新上拉加载组件的使用
- vue中$emit的用法,父子组件传值及页面跳转之间传值
- vue $http请求服务
- 浅析按需引入自定义组件unplugin-vue-components、按需自动导入api unplugin-auto-import的使用和vite-plugin-style-import使用
- VUE组件递归实现自定义目录及拖拽效果
- 详解vue组件的is特性:限制元素&动态组件
- 创建vue组件与自定义一个vue组件时的区别
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- webpack入坑之旅(五)加载vue单文件组件
- vue-解决Vue打包上线之后部分CSS不生效的问题
- Vue组件