Shulou(Shulou.com)06/01 Report--

Editor to share with you how Vue to achieve a custom ring tone component, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Use installation of components npm I easy-ring load

1) use globally

If you use it as a plug-in on the vue-cli project main.js, you can use it directly in the vue single-file component

/ / main.jsimport EasyRing from 'easy-ring'Vue.use (EasyRing) export default {...}

2) import mode

Introduced in the vue single file component

Import EasyRing from 'easy-ring'export default {components: {EasyRing}.} component takes effect

The first step。 Turn on ringtone: set the open parameter to true

The second step. Ring: set the ring parameter to true

The third step. Turn off bell: set the ring parameter to false

PS:

To turn on the ringtone, you need to put it under a button to trigger (for reasons, see "explanation of open parameters" below). In order to improve the experience of using your products, users can not perceive it. For example, when logging in, users can set the open parameter to true by clicking the "login" button.

Decide when to ring and when to turn off the bell according to your own needs, and put the change of ring parameters under the corresponding logic.

The default value of the component parameter name type indicates whether the openBooleanfalse ringtone ringBooleanfalse rings. SrcString default ringtone audio file address uses the default sound effect.

To use the default sound effect, introduce the default sound effect in the. / main.js file

/ / main.jsrequire ('easy-ring/easy-ring-default.wav')

Then merge this code into your vue.config.js configuration:

ConfigureWebpack: {module: {rules: [{test: / easy-ring-default\. (wav) $/ I, loader: 'file-loader', options: {name:' media/ [name]. [ext]'} },]}}

The reason you need to add this configuration is that vue-cli adds hash version numbers to all packaged static resources by default, so easy-ring can't get the address of the default audio file in your directory.

With this file-loader configuration, the default audio file of easy-ring will not have the hash version number, and easy-ring will find it.

The above is all the contents of the article "how to implement a custom ringtone component in Vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.