Vue.js + waves-effect

Vue.js

Material Design 谷歌推出了全新的设计语言Material Design。谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。（网上copy的）

Materialize 前端框架

Vue.js 自定义指令

// directiveVue.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)    }})

使用

             Button effect - light             Button effect - red              Button effect - yellow             Button effect - orange             Button effect - purple             Button effect - green             Button effect - teal    new Vue({        el: '# app'    });

效果传送门 https://jsfiddle.net/chexian/m02j8gvh/

关键字：vue.js, button, effect, function

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！