关于前端:一个Vue铃声提示音组件

背景 / 前言

之前的一个性能需要，须要在页面接管音讯，一旦有了新音讯之后，须要用铃声进行揭示。

因为没有找到相似的比拟便捷的组件，所以就本人写了一个。而后想着能不能尝试下做成一个公共的组件，公布进来让其余开发者也用用？于是就试着写了一个我的项目（我的项目地址在最初），公布成了 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 参数的更改放到对应逻辑下即可

组件参数

应用默认音效

若想应用默认音效，请在./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：应用范例

欢送大家拜访交换😀。相干的阐明和介绍，能够别离去看它们里边的 README.md