叮铃铃~：前端铃声组件easy-ring 1.0版本文档

Ya-tsu

已于 2022-10-24 14:14:08 修改

阅读量1.1k

点赞数 1

文章标签：前端 javascript vue.js react npm 1024程序员节

于 2022-10-23 11:12:09 首次发布

本文链接：https://blog.csdn.net/TheJormangund/article/details/127472331

版权

前言

目前组件已经更新到2.0版本，这篇文章是提供给使用旧1.0版本的开发者阅读的。如果你是新尝试easy-ring的开发者，建议可以直接使用2.0版本😊。

2.0文档在这里：easy-ring2.0版本文档

背景

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

因为没有找到类似的比较便捷的组件，所以就自己写了一个。然后想着能不能尝试下做成一个公共的组件，发布出去让其他开发者也用用？于是就试着写了一个项目（项目地址在最后），发布成了npm包。

虽然组件本身的开发很简单，但是从构建npm包到发布的整个流程，遇到的坑还是很多的，涉及到了：

如何将一个Vue组件构建成可以直接引用的包
如何将这个组件写成类似插件的形式，让使用者能够直接全局使用
如何更改vue-cli配置，使得其打包构建的某个静态资源不需要带上hash版本
如何发布一个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]'
                    },
                },
          ]
        }
    }