vue 圆形 水波_vuejs 水波纹框架

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

组件component/指令directive两种方法可供使用，灵活简单，兼容Vue.js全版本。

要注意的地方：

使用directive模式时，组件会给所对应元素内部append子节点，如果是p、tr、img、Input...这些标签由于浏览器不支持再内嵌元素，故将会失效，所以刚才所述的单标签或者一些特殊的不允许内部插入元素的行内元素，在使用时需使用component方式

使用component模式时，组件会在外层自动包裹div，div默认是block的，且本质上已经改变了外层dom结构，如果需要的话，可以通过给组件加class来用css改变其成为指定的盒子类型，如：

it's a button

复制代码

.inline {

display: inline-block;

}复制代码

推荐directive模式使用，在directive模式失效时，改用component模式

Example

Use Setup

Install vue-touch-ripple

npm install vue-touch-ripple复制代码

Mount with browser

Vue.use(window.VueTouchRipple)

复制代码

Mount with vue

// 从现在开始你需要手动引入css了

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

}

}复制代码

it's a h1 title

it's a div block

check me!

I'm h1!

I'm div!

复制代码

Author Blog