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

目录
  • 背景/前言
  • 组件的使用
    • 安装
    • 加载
    • 组件生效
    • 组件参数
    • 使用默认音效
  • 关于open参数的解释
  • 项目地址

背景/前言

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

因为没有找到类似的比较便捷的组件,所以就自己写了一个。然后想着能不能尝试下做成一个公共的组件,发布出去让其他开发者也用用?于是就试着写了一个项目(项目地址在最后),发布成了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自定义组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue递归实现自定义tree组件

    本文实例为大家分享了vue递归实现自定义tree组件的具体代码,供大家参考,具体内容如下 1. 在tree/index.vue中: <template> <div> <ul> <item :model='data'></item> </ul> </div> </template> <script> import Item from './item' export default { componen

  • vue封装自定义分页器组件与使用方法分享

    前言 分页是开发各种系统时候最常用的功能,下面为本人封装的一个分页组件. 实现分页器操作需要以下参数 当前页: pageNo 每页展示条数: pageSize 数据总条数 : total 连续页码数:continues (一般为奇数,页面对称更美观) 分页器在各大项目中出现的频率较多,我们可以封装成静态组件,并全局注册这个组件. 1.全局注册组件方法:在mian.js文件中操作 import Pagination from '@/components/Pagination' // 组件路径 Vu

  • vue自定义封装按钮组件

    vue按钮组件的自定义封装代码,供大家参考,具体内容如下 封装按钮组件 button.vue <template> <button class="button ellipsis" :class="[size,type]"> <slot /> </button> </template> <script> export default { name: 'Button', props: { size:

  • VUE 自定义取色器组件的实现

    本文主要介绍了VUE 自定义取色器组件的实现,分享给大家,具体如下: 效果: 功能: 1.点击色块中任何一点,色块中的正方形显示该点的颜色. 2.点击色块上方的颜色圆点,色块选中该颜色所在的位置,并在正方形中显示相应颜色. 3.上方圆点如果不是rgb格式,需要转换. 4.组件的大小从调用它的页面中传过去. 组件代码(CanvasColor2.vue): <template> <!--    <div>-->     <div id='outDiv' style=&

  • VUE3学习教程之全局组件和局部组件

    目录 1. 概述 2. 全局组件 2.1 不使用组件的写法 2.2 使用组件 2.3 组件中包含变量 2.4 组件的复用 2.5 组件中使用组件 2.6 总结 3. 局部组件 3.1 局部组件的使用 3.2 总结 附:vue 3 组件的分类 全局组件与局部组件 总结 1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法 <body> <div id="myDiv&quo

  • vue开发公共组件之返回顶部

    本文实例为大家分享了vue开发公共组件之返回顶部的具体代码,供大家参考,具体内容如下 记录一下开发公共组件的流程. 背景:pc端使用element-ui框架,本身是有返回顶部的组件的.现在需要在移动端使用.照着葫芦画瓢弄一个.记录如何将公共组件通过install的方式,注册为全局的组件使用. components目录下,新建bacttop文件夹,内部包含一个index.js文件和一个src文件夹.src文件夹内放backtop.vue组件文件. |--components   |--index.

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

    目录 背景/前言 组件的使用 安装 加载 组件生效 组件参数 使用默认音效 关于open参数的解释 项目地址 背景/前言 之前的一个功能需求,需要在页面接收消息,一旦有了新消息之后,需要用铃声进行提醒. 因为没有找到类似的比较便捷的组件,所以就自己写了一个.然后想着能不能尝试下做成一个公共的组件,发布出去让其他开发者也用用?于是就试着写了一个项目(项目地址在最后),发布成了npm包. 目前这个组件已经发布到了npm上,欢迎大家试用.如果有好的建议,或者找到了更好的类似组件,欢迎指出和分享~ 下面

  • vue的全局提示框组件实例代码

    这篇文章给大家介绍一个vue全局提示框组件,具体代码如下所示: <template> <!-- 全局提示框 --> <div v-show="visible" class="dialog-tips dialog-center"> <div>{{message}}</div> </div> </template> <script> export default { data

  • 解决vue自定义全局消息框组件问题

    1.发现问题 在进行移动端适配的时候,为了在各个型号的设备上能够更好的提现结构排版,决定采用rem布局.采用rem布局的时候html的字体font-size是有一个标准的.我这边用的是750px的设计稿,就采用1rem = 100px. 在使用的过程中会用到一些第三方UI组件,而第三方UI组件是以px单位为标准的. 使用时发现:本来应该细长的提示语句变得很大! 最后发现可能是因为这个icon是继承了html设定的font-size,尝试加一些样式上去还是无效.(如果rem布局上有直接更改第三方组

  • vue 自定义 select内置组件

    1.整合了第三方 jQuery 插件 (select2) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="js/select2/select2.min.css" /> <style> html, body

  • 详解vue 自定义marquee无缝滚动组件

    先上效果图: (1) 看起来可能有点卡顿,但是实际上页面上看起来挺顺畅的. (2) 思路就是获取每一个列表的宽度,设置定时器移动列表,当移动的距离达到一个列表的宽度的时候,把这个距离放到数组的最后.这样就能达成无缝循环滚动了. 大致的情况就是下面这样: 接下来就是代码的实现: index.vue 引入组件 <template> <div> <marqueeLeft :send-val='send'></marqueeLeft > </div> &

  • vue 自定义全局方法,在组件里面的使用介绍

    在main.js里进行全局注册 Vue.prototype.funcName = function (){} 在所有组件里可调用 this. funcName(); 以上这篇vue 自定义全局方法,在组件里面的使用介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 使用Vue自定义指令实现Select组件

    本篇文章教大家写一个非常简单的Select组件,想必很多人都写过Select,毕竟它太常用了,但是本篇文章的示例使用到了Vue的自定义指令,如果你对Vue自定义指令不怎么熟悉的话,本篇文章或许会让您有所收获! 完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="inner"> <div class="inputWrapper&qu

  • vue自定义可选时间的日历组件

    本文实例为大家分享了vue自定义可选时间日历组件的具体代码,供大家参考,具体内容如下 日历功能: 1.过去时间不可选择 2.可自定义不可选时间 3.本月默认展示当天,其他月展示第一天,若为不可选时间,往后顺延 效果图: -------下面开始表演----------- **首先,画出日历页面布局,参照win10系统日历布局*6行7列,为何如此,请自行理解-*本人也是"偷窥"来的 beginDay是当前月第一天的周几,prevMdays是上个月总天数,nowMdays是当月总天数,这样就

  • vue3自定义dialog、modal组件的方法

    vue3-layer:基于Vue3.0开发的PC桌面端自定义对话框组件. 基于vue3构建的PC网页端自定义弹出框组件.全面覆盖各种弹窗应用场景,拥有10+种弹窗类型.30+种自定义参数配置.7+种弹窗动画效果,支持拖拽.缩放.最大化.全屏及自定义激活当前置顶层等功能. 前几天分享过一个Vue3.0移动端弹层组件V3Popup,如果感兴趣也可以去看看. https://www.jb51.net/article/203415.htm v3layer在开发设计之初灵感来自有赞Vant3.0.饿了么E

  • vue 自定义提示框(Toast)组件的实现代码

    1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var showToast = false, // 存储toast显示状态 showLoad = false, // 存储loading显示状态 toastVM = null, // 存储toast vm loadNode = null; // 存储loading节点元素 Toast.install = func

随机推荐