分类：模态框

2020
12-29

Vue.extend 登录注册模态框的实现

模态框是我们UI控件中一个很重要的组件，使用场景有很多种，我们在Vue组件中创建模态框组件而用到的一个知识点是利用Vue.extend来创建。文档中的解释是在最近在做一个常用的类似下面的登录/注册业务场景时，利用Vue.extend来改善我们的代码，使我们代码逻辑更清晰化。需求：点击登录或注册出现各自的模态框。我们对于这种常见的登录注册业务，一般都是分为Sigin.vue和Register.vue两个组件，然后把两个组件写入App.... 继续阅读 >

2020
09-29

如何使用vue slot创建一个模态框的实例代码

【1】遮罩层：承载内容，管理样式布局。【2】内容层：控制遮罩层的显示与否。遮罩层和内容区之间应该解耦。遮罩层和内容区之间应该解耦。遮罩层和内容区之间应该解耦。遮罩层不依赖于内容区，内容是放置在遮罩层里的，至于内容区里的内容是什么，遮罩层完全不用在意。因此可以在遮罩层里采用插槽。遮罩层的实现<divclass="common-mask"v-if="visible"><slotname="head"></slot><slotname="body"></slot><slotname="foot">... 继续阅读 >

2020
09-27

小程序开发之模态框组件封装

本文实例为大家分享了小程序模态框组件的封装具体代码，供大家参考，具体内容如下一、前言对于模态框肯定大家都知道，诸如：Bootstartp、element-ui、layui等等都有自己的弹出层，并可以之定义内容，但是小程序的弹出层原生的太简单，那么我们如果自定义呢？其实很简单，就是一个遮罩、一个view内容区就搞定了！接下来看一下我自己封装后的模态框效果：感觉还可以哈！二、模态框组件的使用1.先在使用页面的json注册该组件{"naviga... 继续阅读 >