目前,前端生态圈中各大厂高大尚的UI库比比皆是。但是作为一名业务中都是接触移动端开发、H5开发的搬砖者,面对产品各种高端霸气上档次的需求,996是在所不辞的。
对外暴露方法
info
success
errer
warning
close
。
API
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
context | 提示的内容 | String | 无 | 无 |
duration | 关闭时间 | Number | 无 | 3000 |
icon | 可自定义的icon | String | 无 | 无 |
mask | 是否开启遮罩层 | Boolean | false/true | false |
clear | Toast关闭回调 | Function | 无 | 无 |
//index.js const type = ["success", "errer", "warning"] const fnc = { name: 'G-Toast', info: (options = {}) => { }, close: () => { if (install) { } } } type.forEach(element => { fnc[element] = (options = {}) => { } }); export default fnc 复制代码
<!--index.vue--> <template> <div class="g7-Toast"> <template v-if="mask"> <transition name="fade"> <div v-show="value" class="g7-Toast-mask"></div> </transition> </template> <transition name="fade"> <div v-show="value" :class="['g7-Toast-body',type]"> <div class="g7-Toast-iconfont" v-show="type"> <Icon :icon="iconfont" :size="26" color="#fff" /> </div> <div class="g7-Toast-context">{{context}}</div> </div> </transition> </div> </template> <script> import Icon from "../Icon"; export default { components: { Icon }, props: { type: { type: String, validator: function(value) { return ["success", "errer", "warning", "loading"].includes(value); } }, value: { type: Boolean }, context: { type: String }, icon: { type: String }, mask: { type: Boolean, default: false } }, computed: { iconfont() { if (this.icon) { return this.icon; } const icon = { success: "iconzhengque", errer: "iconcuowu", warning: "iconinfo", loading: "" }; return icon[this.type]; } } }; </script> 复制代码
//index.js import Vue from "vue"; import Toast from "./index.vue"; let install; function newInstall(options) { install = new Vue({ data() { return options; }, render(h) { return h(Toast, { props: { value: this.value, context: this.context, type: this.type, icon: this.icon, mask: this.mask } }) } }) if (window) { document.body.appendChild(install.$mount().$el) } } 复制代码
小提示:配置jsx在render函数中写渲染函数会更爽
// index.js let timer; function init(options, type) { const params = { value: undefined, context: undefined, type: undefined, duration: 3000, icon: undefined, mask: undefined, clear: () => { } } if (!install) { newInstall(params) } Object.assign(install, params, options, { value: true, context: options.context ? options.context : options, type: type }) if (install.duration > 0) { clearTimeout(timer); timer = setTimeout(function () { Object.assign(install, { value: false }) install.clear() }, install.duration); } } 复制代码
//index.js const type = ["success", "errer", "warning"] const fnc = { name: 'G-Toast', info: (options = {}) => { init(options) }, close: () => { if (install) { Object.assign(install, { value: false }) install.clear() } } } type.forEach(element => { fnc[element] = (options = {}) => { init(options, element) } }); export default fnc 复制代码
本人水平有限,搬砖不易,不足之处请多指教!
各种各样的业务组件经过内部业务的打磨后,会慢慢整理共享给各位大佬......