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

小編給大家分享一下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參數的更改放到對應邏輯下即可

組件參數

使用默認音效

若想使用默認音效，請在./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如何實現自定義鈴聲提示音組件”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！