import {isArray} from 'lodash'; export default { install(Vue) { let promptVM = null; let promptEle = null; let timer = null; function createPromptVM(parent) { let tpl = Vue.extend({ store: parent.$store, data: function() { return { type: '', img: '', title: '', desc: '', onClick: null, classNames: [] }; }, render: function(h) { let classNames = ['yoho-grass-prompt-wrap', ...this.classNames]; return h('div', {class: ['yoho-grass-prompt', `yoho-grass-prompt-${this.type}`]}, [ h(this.url ? 'a' : 'div', { class: classNames, attrs: { href: this.url || '', }, on: { click: () => { this.onClick && this.onClick(); } } }, [ h('ImageFormat', { class: ['prompt-thumb'], props: { src: this.img, lazy: false, mode: 1, width: 100, height: 100 } }), h('div', { class: ['prompt-info'] }, [ h('p', { class: ['prompt-info-title'], domProps: { innerHTML: this.title } }), h('p', { class: ['prompt-info-desc'], domProps: { innerHTML: this.desc } }) ]), h('span', { class: ['iconfont', 'icon-right', 'prompt-icon'] }) ]) ]); } }); promptVM = new tpl(); promptEle = promptVM.$mount().$el; document.body.appendChild(promptEle); } Vue.prototype.$grassPrompt = function(data = {}, time) { let {img, title, desc, url, type, className, onClick} = data; if (!promptVM) { createPromptVM(this); } promptVM.img = img || ''; promptVM.title = title || ''; promptVM.desc = desc || ''; promptVM.url = url; promptVM.type = type || 'bottom'; if (className && !isArray(className)) { className = [className]; } promptVM.classNames = className || []; if (typeof onClick === 'function') { promptVM.onClick = onClick; } let res = { show() { timer && clearTimeout(timer); timer = setTimeout(function() { promptVM.classNames.push('yoho-grass-prompt-enter-active'); timer = setTimeout(function() { promptVM.classNames.push('yoho-grass-prompt-leave-active'); }, time || 8000); }, 100); }, hide() { timer && clearTimeout(timer); promptVM.classNames = []; } }; res.show(); return res; }; } };