vue 可拖拽modal_如何构建可重用的Vue Modal-CSDN博客

vue 可拖拽modal

介绍 (Introduction)

Previously, I’ve written one article on how to build a reusable Vue modal, and it was one year ago. I’m grateful that many people read it, although it’s a little bit too beginner. Today, I would like to teach you guys how to build a reusable Vue modal but with some advanced features.

以前，我是一年前写过一篇有关如何构建可重用Vue模态的文章。我很感激很多人读了它，尽管它太初学者了。今天，我想教大家如何构建可重用的Vue模态，但具有一些高级功能。

What we’re going to build is a reusable modal component with multiple support.

我们将要构建的是具有多个支持的可重用模式组件。

Component-based
基于组件
Render in the root DOM
在根DOM中渲染
Using slot to render the content
使用广告位呈现内容
An option to add a scrollable content
添加滚动内容的选项
Press escape key to exit the modal
按退出键退出模态
Animation transition
动画过渡

Let’s dive into how to build it.

让我们深入研究如何构建它。

构建模板HTML / CSS (Build a template HTML/CSS)

First of all, let’s create a new file for our modal component and called it BaseModal.vue

首先，让我们为模态组件创建一个新文件，并将其命名为BaseModal.vue

Since, I’ve prepared some template to work on in HTML and CSS, Let’s add it on our modal component and render it in our page.

从那时起，我已经准备好了一些可以在HTML和CSS中使用的模板，让我们将其添加到模式组件中，并在页面中进行呈现。

创建一个按钮来触发模态 (Create a button to trigger the modal)

Cool. Let’s add a method to control the visibility of the modal. I’m going to add a new button with the methods openModal and add a new state call this.isShowModal. Whenever the user clicks the button, it will reverse the isModalOpen value.

凉。让我们添加一种方法来控制模态的可见性。我将使用openModal方法添加一个新按钮，并添加一个名为this.isShowModal的新状态。每当用户单击按钮时，它将颠倒isModalOpen值。

Cool. So let’s add a way to close the modal. We want when the user presses the x mark or the cancel button, it will close the modal.

凉。因此，让我们添加一种关闭模式的方法。我们希望当用户按下x标记或取消按钮时，它将关闭模式。

In the modal component, add a new method called handleClose, it will trigger the parent that listens to close listener.

在模态组件中，添加一个名为handleClose的新方法，它将触发侦听close监听器的父级。

In the container component, we will add the listener call close, and it will trigger the toggleModal method that we built just now.

在容器组件中，我们将添加侦听器调用close ，它将触发我们刚刚构建的toggleModal方法。

使用Vue门户 (Use Vue Portal)

It seems like everything was working smoothly. To make it more flexible, let’s render this modal outside of the container DOM. Since we’re dealing with absolute position, give reduce the friction to render it.

似乎一切都在顺利进行。为了使其更加灵活，让我们在容器DOM外部呈现此模式。由于我们要处理绝对位置，因此请减小摩擦以使其呈现。

We’re going to use a library call vue portal — GitHub — LinusBorg/portal-vue: A feature-rich Portal Plugin for Vue, for rendering DOM outside of a component, anywhere our app or the entire document.

我们将使用库调用vue门户— GitHub — LinusBorg / portal-vue：一个功能丰富的Vue门户插件，用于在组件外部，我们的应用程序或整个文档中呈现DOM。

Let’s install vue-portal

让我们安装vue-portal

npm i portal-vue yarn add portal-vue

Add the dependency in your main.js

在main.js添加依赖main.js

Add the portal to the location where do you want the modal to be rendered. In this case, I’m going to render it inside the root Vue component — App.vue

将门户网站添加到要渲染模态的位置。在这种情况下，我将其渲染到根Vue组件— App.vue

To use it, wrap our modal component with <portal-target></portal-target>

要使用它，请用<portal-target></portal-target>包装我们的模式组件

Now, our modal has been rendered inside the portal. Isn’t it’s so cool 😎

现在，我们的模态已经呈现在门户内部。是不是很酷😎

添加属性支持 (Add Properties support)

Let’s add the props support to our modal. As a developer, I want this modal component able to change the modal title and the content inside it.

让我们将props支持添加到我们的模式中。作为开发人员，我希望该模式组件能够更改模式标题及其中的内容。

Let’s add the props argument in our modal component.

让我们在模态组件中添加props参数。

To use it, pass the

要使用它，请传递

插槽 (Slot)

Now, we want to show the content inside the modal body — the way we want to do it by using the slot. There are two slots; we’re going to use it.

现在，我们想在模态主体中显示内容-我们想要通过使用广告位来实现的方式。有两个插槽；我们将使用它。

Modal Body
模态车身
Modal Footer
模态页脚

We want the modal to preview any content inside the body and add a functionality for the submit button. We will use <slot></slot> for the modal body and <slot name="footer"></slot> for the modal footer.

我们希望模态预览体内的任何内容，并为“提交”按钮添加功能。我们将<slot></slot>用于模式主体，并将<slot name="footer"></slot>用于模式页脚。

To use it, we just pass the content in the <base-modal> component like this.

要使用它，我们只需要像这样在<base-modal>组件中传递内容。

可卷动 (Scrollable)

Now, we have a functional modal component. Let assume our content page is going to so long. So, we want to add some functionality to add scrollable options.

现在，我们有了功能模态组件。假设我们的内容页面要花很长时间。因此，我们要添加一些功能以添加可滚动选项。

In the modal component, let’s add a new props call scrollable with a Boolean data type and set it as default value as a false.

在模态组件中，让我们添加一个新的props调用，该调用scrollable使用Boolean数据类型scrollable ，并将其设置为false默认值。

Let’s add a new styling for scrollable content. I’m going to add this class called .scrollable

让我们为可滚动内容添加新样式。我将添加名为.scrollable

To use it, we are going to check for the scrollable properties. If the scrollable is true, then we are going to add this class to our content. We are going to use class binding to achieve it.

要使用它，我们将检查可滚动属性。如果scrollable为true，那么我们将把此类添加到我们的内容中。我们将使用类绑定来实现它。

Cool. Now, we can add a long content in the slot with the scrollable props too. It’s working correctly 👏🏻.

凉。现在，我们也可以在插槽中添加带有可滚动道具的长内容。它工作正常👏🏻。

键盘绑定 (Keyboard Binding)

Let’s add another power feature. We wanna close this modal if we pressed the escape key.

让我们添加另一个电源功能。如果要按escape键，我们想关闭此模式。

First, we need to listen to an event with a keyboard pressed. So, in the modal component, let’s add it in the created and destroyed lifecycle.

首先，我们需要在按下键盘的情况下监听事件。因此，在模态组件中，让我们将其添加到已created和destroyed生命周期中。

Don’t forget to remove the listener when we didn’t use it. What’s happens here is whenever the keyup is trigger, it will be called a method called onClose. Let’s add this method.

当我们不使用监听器时，请不要忘记删除它。这里发生的事情是每当触发keyup ，就会将其称为onClose方法。让我们添加此方法。

We can read the event by using the event parameter. Since escape key button is 27 then, we are going to filter it. If the keycode is 27, then it will trigger the handleClose methods, which are to close our modal.

我们可以使用event参数读取event 。由于escape key按钮为27，因此我们将对其进行过滤。如果键码为27，则它将触发handleClose方法，这些方法将关闭我们的模式。

过渡 (Transition)

Let’s add a nice transition when we open and close the modal. Luckily, Vue already has a transition element, and we’re going to use it. Just wrap the modal component with the <transition name=“fade”></transition>

当我们打开和关闭模态时，让我们添加一个不错的过渡。幸运的是，Vue已经有一个过渡元素，我们将使用它。只需用<transition name=“fade”></transition>包裹模态组件

Add the fade CSS in the component too

在组件中也添加fade CSS

So, you will have a nice transition during open and close.

因此，在打开和关闭期间您将拥有一个不错的过渡。

源代码 (Source Code)

BaseModal.vue

App.vue

应用程序

Let me know if you have any features you are interested in adding inside this modal or any idea for the next article. Feel free to reach out at @jakzaizzat

让我知道您是否有兴趣在此模式中添加任何功能或对下一篇文章有任何想法。随时联系@jakzaizzat

Full source code available here — https://github.com/jakzaizzat/blog-snippet

完整的源代码在这里-https://github.com/jakzaizzat/blog-snippet

Original published at — https://jakzaizzat.com/vue-modal

原文发布于— https://jakzaizzat.com/vue-modal