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

vue 圆形水波_vuejs 水波纹框架相关推荐

vue 圆形水波_vue 开发波纹点击特效组件
最近在使用 vue2 做一个新的 material ui 库,波纹点击效果在 material design 中被多次使用到,于是决定把它封装成一个公共的组件,使用时直接调用就好啦. 开发之前的思考 ...
vue 圆形水波_vue项目百度地图+echarts的涟漪水波效果
先看效果 image.png id="allmap" class="map" ref="map" > import echarts f ...
高德地图水波纹覆盖物+点击覆盖物切换弹窗显示与隐藏
隔了一段时间又做地图案例,还是会陌生. 今天写的时候遇到一个乌龙事件,花了我很多时间去找原因,研究写法,最后才发现只要改一个地方,改个数值就能搞定.真是又气又懊恼我在高德api里拾取坐标后,高德坐标 ...
html5 水波式按钮_css3+jQuery实现按钮水波纹效果
水波纹按钮 /*自定义按钮样式*/ .btns{ height: 30px; line-height: 30px; text-align: center; width: 200px; color: # ...
【vue】Wave水波纹组件写法
wave的效果,waveObject当里面放置一张图片或者任意文字段落等等,按照方法写的话就会点击有水波纹. (使用的是animation 和scale做出的效果,固定了圆圈放大和变透明的时间,不是匀 ...
Android圆形水波纹WaveLoading动画
效果图: 一. 介绍Paint.setXfermode() 以及PorterDuffXfermode public class WaveView extends View {private Paint ...
android水波圆圈动画,Android支付宝咻咻水波纹效果的实现
概述最近看到支付宝咻咻的页面就想模仿一下,话不多说,先看效果图.(录制的有点渣) GIF.gif 先说说这个效果: 1.点击中间图标开始搜索附近的人. 2.开始搜索后水波纹一圈圈的加速向外扩张. 3 ...
网页展示水波纹效果 css水波效果
网页展示水波纹效果预览思路在页面底部展示多张水波的图片,然后让每张水波以不同的方向和速度进行移动,并给不同的水波设置不同的透明度. 代码 HTML index.html <!DOCTYPE ...
vue 水波纹指令_纹波效应作为Vue指令
vue 水波纹指令物质纹波效应 (Material Ripple Effect) Material Ripple Effect as Vue Directive. 材质纹波效果作为Vue指令. Vi ...

vue 圆形水波_vuejs 水波纹框架

it's a h1 title

I'm h1!

vue 圆形水波_vuejs 水波纹框架相关推荐

最新文章

热门文章

vue 圆形 水波_vuejs 水波纹框架

it's a h1 title

I'm h1!

vue 圆形 水波_vuejs 水波纹框架相关推荐

最新文章

热门文章

vue 圆形水波_vuejs 水波纹框架

vue 圆形水波_vuejs 水波纹框架相关推荐