Vue自定义烤组件的实例代码

写了两三天，终于把烤组件写出来了。不敢说是最好的设计，希望有更好思路的朋友可以在评论区给我意见！_(:」)_

第一步：写toast.vue，将样式之类的先定下来

模板div v-show=' show toast ' class=' toast ' : class=' position ' div class=' toast _ container ' v-if=' type=' success ' ' divi class=' icon font icon-check icon '/I/div class=' msg _ container ' { message } }/div/div class=' toast _ container ' v-else-if=' type=' error ' ' divi class=' icon font icon-warning-circle icon '/I/div class=' msg _ container ' { message } './loading/spiner ' export default { prop : { message : string，type : { validator : function(value){//值必须是这些字符串中的一个返回['成功','错误','加载']。indexOf(值)!==-1 }、default:'success' }、duration:{ type:Number、default:3000 }、position:{ type:String、default:'middle' }、components: { loading10 }、data(){ return { show toast 3360 false } }/script style作用域。吐司{ width 3360100 }；}.toast _ container { background : rgba(0，0，0，0.7)；边界半径： 8pxcolor: # fff左边距左：88px右边距：88 px文本对齐：居中；填充-top :15 px；衬垫-底部： 15px}.top { position : absolutetop :10 }。中间{ position : absolutetop :40%；}.底部{ position : absolutetop :70%；}.msg _ container { margin-top :8 px；边距-左侧：15像素；右边距：15 px线高： 22pxfont-size : 16px单词包装：断字；}.图标{ font-size 3:30 px}/style

一共三种样式，成功（成功),失败（错误),加载中（装载);

一共三种位置，上（顶部),中（中),下（底部);

所有涉及的图案出自阿里的图标字体手机淘宝图标库。

加载中动画是自己写的蹩脚的加载组件(emmm，就不放出来污染大家眼睛了，需要的可以评论区知会一声_(:」)_)

第二步：写index.js，完成烤组件的实例化

从“vue”导入某视频剪辑软件从“干杯”导入/toast ' let single oast=true；让队列=[];函数createInstance(){ //返回一个扩展实例构造器if(！queue.length||！singleToast){ const to str constructor=vue。延长(吐司)；//构造一个实例const to astdom=对stconstructor是新的({ El :文档。创建元素(' div ')，})；//把实例化的toast.vue添加到身体里文件。尸体。appendchild(至stdom ).$ El)；排队。推送(至stdom)；单线态=真返回到标准模式；}};//注册为全局组件的函数函数toast(options={ }){ const to stdom=create instance()；去stdom。消息=选项类型==='字符串'？选项： options.messagetoastdom。type=选项。键入| |“成功”；祝你好运。持续时间=选项。持续时间| | 3000；祝你好运。位置=选项。位置| | '中间'；if(！吐司DOM。消息){吐司DOM。show toast=singleToast=false} else { to astdom . show toast=TrueSetTiME out(()={ to astdom。showtoast=singleToast=false }，toastdom。持续时间)；}}//将组件注册到某视频剪辑软件的原型链里去，//这样就可以在所有某视频剪辑软件的实例里面使用这个$ toast()//vue。原型。$ toast=showtoastvue。原型。$ toast=toast导出默认吐司设置单线态和长队的目的在于：确保同一时期界面上只有一个吐司，不能同时出现多个烤面包片。

由于烤会初始化，因此为了避免在任何操作之前界面上就出现一个吐司，用如果语句判断：

如果没有传入的消息，则不显示吐司（这样可以使得初始化的烤不显示)

否则会显示出来，过一段时间就会消失。只有当singletoast为false，这意味着此时界面上没有toast时，才能创建新的toast实例(因为此时if判断中queue.length不是0[初始化的toast组件本身占据一个位置]，但是singleToast为false，所以可以创建)

第三步：使用

在main.js中添加以下代码：

从“”导入吐司。/components/toast/index' Vue .使用(toast)创建要调用的Vue文件：

模板div输入类型=' button '值=' show popup ' @ click=' show toast '/div/模板脚本导出默认值{methods : {show toast () {this。$toast({message:' loading '，type:' loading '，position:' bottom '，duration : ' 2000 ' })；//这个。$toast('成功提示')；} } }/脚本

可以看到有两种方式，可以传入参数作为对象，也可以只传入字符串，其他的都是默认设置的。

摘要

以上是边肖介绍的SVue自定义吐司组件的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！