背景/前言

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

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

目前這個(gè)組件已經(jīng)發(fā)布到了npm上，歡迎大家試用。如果有好的建議，或者找到了更好的類似組件，歡迎指出和分享~

下面是使用文檔：

組件的使用

安裝

npm i easy-ring

加載

1）全局使用

在vue-cli項(xiàng)目main.js上當(dāng)作插件使用，即可直接在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：

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

組件參數(shù)

使用默認(rèn)音效

若想使用默認(rèn)音效，請(qǐng)?jiān)?/main.js文件中引入默認(rèn)音效

// 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]'
                    },
                },
          ]
        }
    }

需要添加這個(gè)配置的原因是，vue-cli默認(rèn)會(huì)對(duì)所有打包的靜態(tài)資源加上hash版本號(hào)，這樣easy-ring就無法獲取到你目錄下的默認(rèn)音頻文件的地址。

加上這一項(xiàng)file-loader的配置后，easy-ring的默認(rèn)音頻文件就不會(huì)帶上hash版本號(hào)，easy-ring就能找到它。

關(guān)于open參數(shù)的解釋

因?yàn)楫?dāng)前多數(shù)瀏覽器不支持自動(dòng)播放音頻，需要用戶自己主動(dòng)觸發(fā)播放音頻才行。這一過程需要放在諸如click的交互事件里，因此我們需要一個(gè)按鈕之類的東西來觸發(fā)這一行為。

但是，你可以通過一些交互來設(shè)計(jì)這一行為，從而提升用戶體驗(yàn)，甚至讓用戶對(duì)此無感知。例如：在登錄時(shí)，在用戶點(diǎn)擊“登錄”按鈕時(shí)，在代碼里設(shè)置open參數(shù)為true。

項(xiàng)目地址

github上的地址：easy-ring

訪問不了github的可以試試這個(gè)鏡像地址：fastgit鏡像

一共有兩個(gè)項(xiàng)目文件：

• easy-ring-build：構(gòu)建npm發(fā)布包
• easy-ring-demo：使用范例

到此這篇關(guān)于Vue自定義鈴聲提示音組件的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue自定義組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！