Download vConsole

Run the command on the terminal to download the dependencies.

npm install vconsole

or

npm i vconsole

Introduce vconsole.min.js

Introduce vconsole.min.js in your project’s index.html file. A:

<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
Copy the code

(There is also a way to reference vconsole.min.js file, will be updated later) Note: I feel there is a way to introduce, can not do NPM download, not verified…

Initialize vConsole

In the project’s index.html file, initialize vConsole. Check whether vConsole exists during initialization to avoid repeating new.

<script>
  / / initialization
  if (window.vConsole == undefined) {
     console.log('Hello world');
     window.vConsole = new VConsole();
   }
</script>
Copy the code

Add the initialization vConsole style

In app.vue, the vConsole is hidden by default when the convention project starts.

 #__vconsole {
    display: none;
  }
Copy the code

5. Add a long press event

In the App. In vue

  • Binding approach
<div id="app" @touchstart="showDeleteButton" @touchend="emptyTime">
</div>
Copy the code
  • Define timer variables:
Loop:null / / timer
Copy the code
  • Implementation method
// Long press event, set long press 5s here
showDeleteButton:function () {
    const vconsole = document.querySelector('#__vconsole');
    clearTimeout(this.Loop); // Clear the timer again to prevent repeated registration of timers
    this.Loop = setTimeout(function() {
        vconsole.style.display = 'block'
    }.bind(this), 5000);
},
// Empty the timer
emptyTime:function () {
    clearTimeout(this.Loop); // Prevent double registration of timers
}
Copy the code

Can be implemented ^_^… Look forward to more small functions of the implementation skills, shortcomings, please guide!