фреймворк водной ряби vuejs

Vue.js Vuex vue-router

GitHub issues GitHub forks GitHub stars GitHub license Twitter

NPM NPM

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

Доступны два метода компонента / директивы компонента, которые являются гибкими и простыми и совместимы с полной версией Vue.js.

  • Моменты, на которые следует обратить внимание:

    • использоватьdirectiveВ режиме компонент будет отдавать соответствующий элемент внутреннейappendдочерний узел, если онp、tr、img、Input...Эти теги будут недействительны, потому что браузер не поддерживает повторное встраивание элементов, поэтому при использовании необходимо использовать только что упомянутый единственный тег или некоторые специальные встроенные элементы, которые не позволяют внутреннюю вставку элементов.componentСпособ

    • использоватьcomponentрежиме компонент будет автоматически завернут во внешний слойdiv,divПо умолчаниюblock, и существенно изменил внешний видdomструктура, при необходимости, может быть добавлена ​​к компоненту путем добавленияclassиспользоватьcssИзмените его на указанный тип поля, например:

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

    • Рекомендуется использовать директивный режим.Если директивный режим не работает, вместо него используйте компонентный режим.

Example

Demo Page

Use Setup

Install vue-touch-ripple

npm install vue-touch-ripple

Mount with browser

<!-- 现在支持 runtime 使用了 -->
<link rel="stylesheet" href="../../../component.css">
<script src="../../xxxx/dist/vue-touch-ripple.min.js"></script>
<script>
  Vue.use(window.VueTouchRipple)
</script>

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
  }
}
<!-- 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>

Author Blog

Surmon

Категории