Vue自定义Toast插件

目录结构：├── components│ ├── Toast│ ├── ├── index.js│ └── └── index.css└── main.jscomponents/Toast/index.js/* 自定义 toast 组件 调用 this.$toast(‘hello world~’, {duration: 1500})/let _TOAST = { show: false, // Boolean toast显示状态 component: null // Object toast组件 };export default { install(Vue) { / text: String* opts: Object {} */ Vue.prototype.$toast = function(text, opts) { let defaultOpts = { position: ‘center’, // String duration: 1000, // Number wordWrap: false, // Boolean // width: ‘90%’ // String/Number }; opts = Object.assign(defaultOpts, opts); let wordWrap = opts.wordWrap ? ‘zh-word-wrap’ : ‘’, style = opts.width ? style="width: ${opts.width}" : ‘’; if (_TOAST.show) { return; } if (!_TOAST.component) { let ToastComponent = Vue.extend({ data: function() { return { show: _TOAST.show, text: text, position: zh-toast-${opts.position} } }, template: <div v-show="show" :class="position" class="zh-toast ${wordWrap}" ${style}>{{text}}</div> }); _TOAST.component = new ToastComponent(); let element = _TOAST.component.$mount().$el; document.body.appendChild(element); } _TOAST.component.position = ‘zh-toast-’ + opts.position; _TOAST.component.text = text; _TOAST.component.show = _TOAST.show = true; setTimeout(function() { _TOAST.component.show = _TOAST.show = false; }, opts.duration) }; }}components/Toast/index.css.zh-toast { position: fixed; bottom: 100px; left: 50%; box-sizing: border-box; max-width: 80%; height: 40px; line-height: 20px; padding: 10px 20px; transform: translateX(-50%); -webkit-transform: translateX(-50%); text-align: center; z-index: 9999; font-size: 14px; color: #fff; border-radius: 5px; background: rgba(0, 0, 0, 0.7); animation: show-toast .5s; -webkit-animation: show-toast .5s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.zh-toast.zh-word-wrap { width: 80%; white-space: inherit; height: auto;}.zh-toast.zh-toast-top { top: 50px; bottom: inherit;}.zh-toast.zh-toast-center { top: 50%; margin-top: -20px; bottom: inherit;}@keyframes show-toast { from { opacity: 0; transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); }}main.js// Toastimport ‘./components/Toast/index.css’;import Toast from ‘./components/Toast/index’;Vue.use(Toast);调用this.$toast(‘hello world~’, {duration: 1500})