Vue自定義鈴聲提示音組件的實現(xiàn)

更新時間：2022年01月22日 12:07:53 作者：森林好兒狼

這篇文章主要介紹了Vue中自定義一個鈴聲提示音組件的實現(xiàn)以及使用方法，文中的示例代碼講解詳細，對我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下

背景/前言

之前的一個功能需求，需要在頁面接收消息，一旦有了新消息之后，需要用鈴聲進行提醒。

因為沒有找到類似的比較便捷的組件，所以就自己寫了一個。然后想著能不能嘗試下做成一個公共的組件，發(fā)布出去讓其他開發(fā)者也用用？于是就試著寫了一個項目（項目地址在最后），發(fā)布成了npm包。

目前這個組件已經(jīng)發(fā)布到了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參數(shù)設(shè)為true
第二步. 響鈴：將ring參數(shù)設(shè)為true
第三步. 關(guān)鈴：將ring參數(shù)設(shè)為false

PS：

開啟鈴聲這一步，需要放到一個按鈕下埋點進行觸發(fā)（原因解釋見下文 "關(guān)于open參數(shù)的解釋"）。為了提升自己產(chǎn)品的使用體驗，可以做到用戶無感知，例如在登錄時，用戶點擊“登錄”按鈕即可設(shè)置open參數(shù)為true
根據(jù)自己的需求自行決定何時響鈴、何時關(guān)鈴，將ring參數(shù)的更改放到對應(yīng)邏輯下即可

組件參數(shù)

參數(shù)名	類型	默認值	說明
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默認會對所有打包的靜態(tài)資源加上hash版本號，這樣easy-ring就無法獲取到你目錄下的默認音頻文件的地址。

加上這一項file-loader的配置后，easy-ring的默認音頻文件就不會帶上hash版本號，easy-ring就能找到它。