评论

制作自己的模态弹窗组件 - vue篇

超超超超超炒鸡简单的自定义模态弹窗组件

起因

  • H###s:#满,微信小程序有模态弹窗吗?
  • #满:有啊,喏。wx.showModal(随手甩出一个链接)
    短暂的几十秒后…
  • H###s:不对啊,我要的不是这种
  • #满:那你要哪种?
  • H###s:就是那种组件,可以自己在里面写wxml代码的。
  • #满:组件?那没有
  • H###s:那难顶哦,有这个需求
  • 祺##:自己写一个呗,又不难

因为我一般使用 kbone - vue ,所以这里也拿 vue 做示例。另外,使用 typescript 语法,请使用 javascript 的童鞋自行理解~


最终效果

编写过程

  1. 我们先创建一个空的 vue 组件,我这里命名为 Modal

  2. 组件创建好了,随便写点东西,然后引入到页面,看看对不对吧
    组件:

    页面:

    实际效果:
  3. OK,组件引入正确,但是这也只是一个组件,并不是模态弹窗。众所周知,模态弹窗,是一个弹出框,应该浮动到最上层,那就加一点 css 吧
    组件:

    实际效果:
  4. emmmm,有点丑,不过意思是这个意思,接下来,让弹出框水平垂直居中,再给点宽度高度吧
    组件:

    实际效果:
  5. 是不是有内味儿了?但毕竟是模态弹窗组件,显示什么内容应该由页面来决定,所以,slot 走起!
    组件:

    页面:

    实际效果:
  6. OK,那既然是模态弹窗,那就代表可以关闭打开,其实我个人推荐的是在页面里面使用 v-if / v-show 来控制,让组件干净一点
    页面:

    实际效果:

  7. OK,既然打开有了,接下来就是关闭了
    组件:

    页面:
  8. 行了,关闭打开也有了,再搞点小东西
    组件:

    页面:

    实际效果:

完成

简单的模态框做完啦!怎么样?似8似很简单!
**考虑到会有一些组件的层级,并且设置 z-index 无效,组件的外部标签可修改为 cover-view **

结束

  • H###s:真的诶!超简单的,感谢你的组件了(白嫖成功)!
最后一次编辑于  2019-12-26  
点赞 13
收藏
评论

9 个评论

  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    2019-12-26

    看着不简单~

    2019-12-26
    赞同 3
    回复 6
    • 子不语
      子不语
      2019-12-26
      其实很简单……
      2019-12-26
      1
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      2019-12-26回复子不语
      不适合新手小白
      2019-12-26
      回复
    • 子不语
      子不语
      2019-12-26回复o0o有脾气的酸奶
      emmmm,我觉得很适合啊……难搞了
      2019-12-26
      回复
    • Stephen
      Stephen
      2019-12-26回复子不语
      2019-12-26
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      2019-12-26回复子不语





      不管怎么样还是赞一个




      2019-12-26
      2
      回复
    查看更多(1)
  • 武动乾坤
    武动乾坤
    2019-12-27

    我路过一下下~

    2019-12-27
    赞同 1
    回复
  • 祺爸💎
    祺爸💎
    2019-12-26

    出场费什么时候结一下

    2019-12-26
    赞同 1
    回复 4
    • 子不语
      子不语
      2019-12-26
      来了来了
      2019-12-26
      回复
    • 祺爸💎
      祺爸💎
      2019-12-26回复子不语
      2019-12-26
      回复
    • Stephen
      Stephen
      2019-12-26
      2019-12-26
      回复
    • 子不语
      子不语
      2019-12-26
      2019-12-26
      回复
  • Hanks🇨🇳
    Hanks🇨🇳
    2019-12-26

    这很用心啊

    2019-12-26
    赞同 1
    回复 4
    • 子不语
      子不语
      2019-12-26
      那必须的!毕竟不能水
      2019-12-26
      回复
    • Stephen
      Stephen
      2019-12-26
      2019-12-26
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      2019-12-26回复子不语
      水得很用心~
      2019-12-26
      回复
    • 子不语
      子不语
      2019-12-26回复o0o有脾气的酸奶
      哈哈哈哈哈哈,那必须的
      2019-12-26
      回复
  • Admin²⁰²⁰
    Admin²⁰²⁰
    星期六 15:12

    这个是硬核代码,学习了~

    星期六 15:12
    赞同
    回复
  • 黎😄
    黎😄
    2019-12-28
    哇,这功能真的太棒了。学习了学习了
    2019-12-28
    赞同
    回复
  • 天天修改
    天天修改
    2019-12-26

    欧力给,给楼主一份菜单~

    2019-12-26
    赞同
    回复 5
    • 子不语
      子不语
      2019-12-26
      所以这是打算推销UI框架吗?
      2019-12-26
      回复
    • 天天修改
      天天修改
      2019-12-26回复子不语
      这是需求,产品需求。。。
      2019-12-26
      回复
    • 子不语
      子不语
      2019-12-26回复天天修改
      啧,是打算让我全部做一遍吗?
      2019-12-26
      回复
    • 天天修改
      天天修改
      2019-12-26回复子不语
      哈,这都是些正常需求,做一遍也没什么不好的
      2019-12-26
      回复
    • 子不语
      子不语
      2019-12-26回复天天修改
      我太难了,在线提需求还行
      2019-12-26
      回复
  • 易增辉(程序开发)
    易增辉(程序开发)
    2019-12-26

    很棒棒喔!

    2019-12-26
    赞同
    回复 1
    • 子不语
      子不语
      2019-12-26
      嘿嘿~
      2019-12-26
      回复
  • 汪沅
    汪沅
    2019-12-26
    路过ヽ(  ̄д ̄;)ノ
    2019-12-26
    赞同
    回复 1
    • 子不语
      子不语
      2019-12-26
      还行
      2019-12-26
      回复
登录 后发表内容