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

小编给大家分享一下Vue如何实现自定义铃声提示音组件，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

组件的使用

安装

npm i easy-ring

加载

1）全局使用

在vue-cli项目main.js上当作插件使用，即可直接在vue单文件组件使用

// main.jsimport 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.jsrequire('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就能找到它。

以上是“Vue如何实现自定义铃声提示音组件”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！