Touch ripple component for Vue.js(1.x ~ 2.x).

The two methods are flexible and simple, and compatible with all versions of vue.js.

  • What to look out for:

    • When using directive mode, components assign internal append children to the corresponding element, such as P, tr, img, Input… These tags will not be valid because browsers do not support inline elements, so use component for single tags or special inline elements that do not allow inline elements

    • With Component mode, components automatically wrap divs around the outer layer. Divs are block by default and have essentially changed the outer DOM structure. If necessary, components can be changed to the specified box type using CSS by adding a class to them, as in:

      <touch-ripple class="inline">
   <button>it's a button</button>
</touch-ripple>Copy the code
      .inline {
  display: inline-block;
}Copy the code

    • The directive mode is recommended. If the directive mode fails, switch to component mode

Example

Demo Page

Use Setup

Install vue-touch-ripple

npm install vue-touch-rippleCopy the code

Mount with browser

<! <link ="stylesheet" href=".. /.. /.. /component.css"> <script src=".. /.. /xxxx/dist/vue-touch-ripple.min.js"></script> <script> Vue.use(window.VueTouchRipple) </script>Copy the code

Mount with vue

// require('vue-touch-ripple/component.css') // import import vue from 'vue' import VueTouchRipple from  'vue-touch-ripple' // or require const Vue = require('vue') const VueTouchRipple = require('vue-touch-ripple') // mount  with global Vue.use(VueTouchRipple) // or mount with compoment import Vue from 'vue' import { touchRipple } from 'vue-touch-ripple' export default { components: { touchRipple } }Copy the code
<! -- use with components --> <touch-ripple> <! -- your code... --> <h1>it's a h1 title</h1> <div>it's a div block</div> </touch-ripple> <! -- use with directive(must be global Vue.use(VueTouchRipple)) --> <button v-touch-ripple>check me! </button> <h1 v-touch-ripple>I'm h1! </h1> <div v-touch-ripple>I'm div! </div>Copy the code

Author Blog

Surmon