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
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!