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 相关文章推荐
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue中activated的用法
Jan 03 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 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输入数据统一类实例
2015/02/23 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
js html实现计算器功能
2018/11/13 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
python中正则表达式的使用方法
2018/02/25 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
Python底层封装实现方法详解
2020/01/22 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
客服文员岗位职责
2013/11/29 职场文书
大学生村官任职感言
2014/01/09 职场文书
会议接待欢迎词
2014/01/12 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
python获取字符串中的email
2022/03/31 Python