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.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue使用element-ui按需引入
May 20 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
用PHP函数解决SQL injection
2006/10/09 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
jQuery 处理页面的事件详解
2015/01/20 Javascript
jquery获取节点名称
2015/04/26 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
简单的分页代码js实现
2016/05/17 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
python 链接和操作 memcache方法
2017/03/04 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
市场营销专业推荐信
2013/11/03 职场文书
家长会学生家长演讲稿
2013/12/29 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
小学英语课教学反思
2016/02/15 职场文书
导游词之湖北武当山
2019/09/23 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript