Vue自定義鈴聲提示音組件的實現

Posted on by

背景/前言

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

因為沒有找到類似的比較便捷的組件，所以就自己寫瞭一個。然後想著能不能嘗試下做成一個公共的組件，發佈出去讓其他開發者也用用？於是就試著寫瞭一個項目（項目地址在最後），發佈成瞭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]'
                    },
                },
          ]
        }
    }

需要添加這個配置的原因是，vue-cli默認會對所有打包的靜態資源加上hash版本號，這樣easy-ring就無法獲取到你目錄下的默認音頻文件的地址。

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

關於open參數的解釋

因為當前多數瀏覽器不支持自動播放音頻，需要用戶自己主動觸發播放音頻才行。這一過程需要放在諸如click的交互事件裡，因此我們需要一個按鈕之類的東西來觸發這一行為。

但是，你可以通過一些交互來設計這一行為，從而提升用戶體驗，甚至讓用戶對此無感知。例如：在登錄時，在用戶點擊“登錄”按鈕時，在代碼裡設置open參數為true。

項目地址

github上的地址：easy-ring

訪問不瞭github的可以試試這個鏡像地址：fastgit鏡像

一共有兩個項目文件：

  • easy-ring-build：構建npm發佈包
  • easy-ring-demo：使用范例

到此這篇關於Vue自定義鈴聲提示音組件的實現的文章就介紹到這瞭,更多相關Vue自定義組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：