因?yàn)闆](méi)有找到類似的比較便捷的組件，所以就自己寫(xiě)了一個(gè)。然后想著能不能嘗試下做成一個(gè)公共的組件，發(fā)布出去讓其他開(kāi)發(fā)者也用用？于是就試著寫(xiě)了一個(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)

<!-- 直接使用，無(wú)需引入 -->
<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
    }
    ...
}

組件生效

第一步. 開(kāi)啟鈴聲：將open參數(shù)設(shè)為true
第二步. 響鈴：將ring參數(shù)設(shè)為true
第三步. 關(guān)鈴：將ring參數(shù)設(shè)為false

PS：

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

組件參數(shù)

參數(shù)名	類型	默認(rèn)值	說(shuō)明
open	Boolean	false	開(kāi)啟鈴聲
ring	Boolean	false	是否響鈴
src	String	默認(rèn)鈴聲	鈴聲音頻文件地址

使用默認(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就無(wú)法獲取到你目錄下的默認(rèn)音頻文件的地址。

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