Vue.js + waves-effect

Vue.js

Material Design 谷歌推出了全新的設計語言Material Design。谷歌表示，這種設計語言旨在爲手機、平板電腦、臺式機和「其餘平臺」提供更一致、更普遍的「外觀和感受」。（網上copy的）

Materialize 前端框架

<!-- 引用 materialize 的樣式 -->
<link href="http://cdn.bootcss.com/materialize/0.97.6/css/materialize.min.css" rel="stylesheet">

Vue.js 自定義指令

// directive
Vue.directive('effect', {
    bind: function() {
        var el = this.el
        el.classList.add('waves-effect')
        this.expression && el.classList.add('waves-' + this.expression)
        function convertStyle(obj) {
            var style = '';
            for (var a in obj) {
                if (obj.hasOwnProperty(a)) {
                    style += (a + ':' + obj[a] + ';');
                }
            }
            return style;
        }
        this.handler = function(e) {
            var ripple = document.createElement('div');
            ripple.classList.add('waves-ripple');
            el.appendChild(ripple);
            var styles = {
                'left': e.layerX + 'px',
                'top': e.layerY + 'px',
                'opacity': 1,
                'transform': 'scale(' + ((el.clientWidth / 100) * 10) + ')',
                'transition-duration': '750ms',
                'transition-timing-function': 'cubic-bezier(0.250, 0.460, 0.450, 0.940)'
            };
            ripple.setAttribute('style', convertStyle(styles));
            setTimeout(function() {
                ripple.setAttribute('style', convertStyle({
                    'opacity': 0,
                    'transform': styles.transform,
                    'left': styles.left,
                    'top': styles.top
                }));
                setTimeout(function() {
                    ripple && el.removeChild(ripple);
                }, 750);
                // 
            }, 450);
        }
        this.el.addEventListener('mousedown', this.handler, false)
    },
    unbind: function() {
        this.el.removeEventListener('mousedown', this.handler)
    }
})

使用

<div id="app">
    <div class="container" style="padding:20px 0">
        <p>
            <button type="button" class="btn btn-large" v-effect="light"> Button effect - light</button>
        </p>
        <p>
            <button type="button" class="btn btn-large" v-effect="red"> Button effect - red </button>
        </p>
        <p>
            <button type="button" class="btn btn-large" v-effect="yellow"> Button effect - yellow</button>
        </p>
        <p>
            <button type="button" class="btn btn-large" v-effect="orange"> Button effect - orange</button>
        </p>
        <p>
            <button type="button" class="btn btn-large" v-effect="purple"> Button effect - purple</button>
        </p>
        <p>
            <button type="button" class="btn btn-large" v-effect="green"> Button effect - green</button>
        </p>
        <p>
            <button type="button" class="btn btn-large" v-effect="teal"> Button effect - teal</button>
        </p>
    </div>
</div>

<script>
    new Vue({
        el: '#app'
    });
</script>

效果傳送門 https://jsfiddle.net/chexian/m02j8gvh/