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


Posted in Vue.js onJanuary 22, 2022

背景/前言

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

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

组件生效

  • 第一步. 开启铃声:将open参数设为true
  • 第二步. 响铃:将ring参数设为true
  • 第三步. 关铃:将ring参数设为false

PS:

  • 开启铃声这一步,需要放到一个按钮下埋点进行触发(原因解释见下文 "关于open参数的解释")。为了提升自己产品的使用体验,可以做到用户无感知,例如在登录时,用户点击“登录”按钮即可设置open参数为true
  • 根据自己的需求自行决定何时响铃、何时关铃,将ring参数的更改放到对应逻辑下即可

组件参数

参数名 类型 默认值 说明
open Boolean false 开启铃声
ring Boolean false 是否响铃
src String 默认铃声 铃声音频文件地址

使用默认音效

若想使用默认音效,请在./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镜像

一共有两个项目文件:

  • easy-ring-build:构建npm发布包
  • easy-ring-demo:使用范例

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

Vue.js 相关文章推荐
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 #Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 #Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 #Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 #Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 #Vue.js
详解Vue的列表渲染
Nov 20 #Vue.js
详解Vue slot插槽
Nov 20 #Vue.js
You might like
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
php输入数据统一类实例
2015/02/23 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
django实现分页的方法
2015/05/26 Python
python中import与from方法总结(推荐)
2019/03/21 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
python3实现飞机大战
2020/11/29 Python
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
擅自离岗检讨书
2014/02/11 职场文书
《将心比心》教学反思
2016/02/23 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书