文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue自定义铃声提示音组件的实现

2024-04-02 19:55

关注

背景/前言

之前的一个功能需求,需要在页面接收消息,一旦有了新消息之后,需要用铃声进行提醒。

因为没有找到类似的比较便捷的组件,所以就自己写了一个。然后想着能不能尝试下做成一个公共的组件,发布出去让其他开发者也用用?于是就试着写了一个项目(项目地址在最后),发布成了npm包。

目前这个组件已经发布到了npm上,欢迎大家试用。如果有好的建议,或者找到了更好的类似组件,欢迎指出和分享~

下面是使用文档:

组件的使用

安装

npm i easy-ring

加载

1)全局使用

在vue-cli项目main.js上当作插件使用,即可直接在vue单文件组件使用

// main.js
import EasyRing from 'easy-ring'
Vue.use(EasyRing)
<!-- 直接使用,无需引入 -->
<template>
    <easy-ring
        :open="open"
        :ring="ring"
        :src="src"
    />
</template>

export default {
    ...
}

2)import方式

在vue单文件组件里引入

<template>
    <easy-ring
        :open="open"
        :ring="ring"
        :src="src"
    />
</template>

import EasyRing from 'easy-ring'
export default {
    components: {
        EasyRing
    }
    ...
}

组件生效

PS:

组件参数

参数名类型默认值说明
openBooleanfalse开启铃声
ringBooleanfalse是否响铃
srcString默认铃声铃声音频文件地址

使用默认音效

若想使用默认音效,请在./main.js文件中引入默认音效

// main.js
require('easy-ring/easy-ring-default.wav')

然后将这段代码合并到你的vue.config.js配置中:

configureWebpack: {
        module: {
            rules: [
                {
                    test: /easy-ring-default\.(wav)$/i,
                    loader: 'file-loader',
                    options: {
                        name: 'media/[name].[ext]'
                    },
                },
          ]
        }
    }

需要添加这个配置的原因是,vue-cli默认会对所有打包的静态资源加上hash版本号,这样easy-ring就无法获取到你目录下的默认音频文件的地址。

加上这一项file-loader的配置后,easy-ring的默认音频文件就不会带上hash版本号,easy-ring就能找到它。

关于open参数的解释

因为当前多数浏览器不支持自动播放音频,需要用户自己主动触发播放音频才行。这一过程需要放在诸如click的交互事件里,因此我们需要一个按钮之类的东西来触发这一行为。

但是,你可以通过一些交互来设计这一行为,从而提升用户体验,甚至让用户对此无感知。例如:在登录时,在用户点击“登录”按钮时,在代码里设置open参数为true。

项目地址

github上的地址:easy-ring

访问不了github的可以试试这个镜像地址:fastgit镜像

一共有两个项目文件:

到此这篇关于Vue自定义铃声提示音组件的实现的文章就介绍到这了,更多相关Vue自定义组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯