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
check me!
I'm h1!
Author Blog