小编给大家分享一下Vue如何实现自定义铃声提示音组件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
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就能找到它。
以上是“Vue如何实现自定义铃声提示音组件”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。