深入理解和使用Portal-Vue在Vue 2中的强大功能

GYS
1,570 阅读3分钟

Vue.js是一个非常灵活且易于上手的前端框架，它允许开发者以组件为核心构建复杂的应用程序。然而，当我们遇到需要在父子组件边界之外操作DOM时，传统的组件嵌套可能就会显得力不从心。这时，portal-vue库就能派上用场。本文将介绍如何在Vue 2项目中使用portal-vue来实现更灵活的DOM操作。

什么是Portal-Vue?

portal-vue是一个Vue插件，它提供了一种将组件的模板部分传送到DOM的其他地方渲染的能力。这意味着你可以控制组件的渲染位置，而不受其在Vue组件树中的位置限制。

安装Portal-Vue

npm install portal-vue --save
# 或者
yarn add portal-vue

安装完成后，你需要在你的Vue应用中注册portal-vue插件：

import Vue from 'vue';
import PortalVue from 'portal-vue';

Vue.use(PortalVue);

基本使用

portal-vue提供了两个主要的组件：Portal和PortalTarget。

  • Portal组件用于指定需要被传送的内容。
  • PortalTarget组件定义了内容的目的地。

下面是一个基本的例子，展示了如何使用这两个组件：

<template>
  <div>
    <!-- 这里定义了一个Portal，它将内容传送到名为'destination'的PortalTarget -->
    <Portal to="destination">
      <p>这段内容将被传送到页面的其他地方。</p>
    </Portal>

    <!-- 页面的其他部分 -->
    <div class="some-other-part-of-the-app">
      <!-- PortalTarget定义了Portal中内容的渲染位置 -->
      <PortalTarget name="destination"></PortalTarget>
    </div>
  </div>
</template>

在上面的例子中，<p>这段内容将被传送到页面的其他地方。</p>将不会在它的父组件中渲染，而是在名为destination的PortalTarget中渲染。

高级使用

动态目标

你可以动态地改变Portal的目标，只需要更改传递给to属性的值即可。这样可以根据应用程序的状态或用户的行为将内容传送到不同的位置。

多个PortalTarget

你可以拥有多个PortalTarget，它们使用相同的名称。这意味着你可以在多个位置渲染相同的内容。

Scoped Slots

portal-vue支持作用域插槽，这意味着你可以在PortalTarget中访问Portal的数据和方法。这为在不同组件之间共享数据提供了一种强大的方式。

实际应用场景

portal-vue在很多场景下都非常有用，例如：

  • 模态窗口（Modals）：你可以将模态窗口的内容传送到body的末尾，这样可以避免z-index和CSS溢出问题。
  • 提示框（Tooltips）：将提示框传送到合适的位置，确保它们不会被其他元素遮挡。
  • 全局通知或警告：可以将这些元素传送到主应用组件之外，使其在页面上始终可见。

使用过程中遇到的问题盘点

每一个插件都不是尽善尽美的，protal-vue 也不例外

在项目中，当我使用 protal-vue 时，发现当其子节点有数据发生改变时，当前 protal 组件会发生重绘，导致其内使用的input组件每次输入时光标总会闪动到末尾。

<portal :to="destinationValue">
  {{ new Date().getTime() }}
  <div>
    <el-input v-model="baseBookMark.name" />
  </div>
</portal>

在输入过程中发现 {{ new Date().getTime() }} 一直在发生变化，给dom添加key并不能解决。

但是我们是需要当用户点击输入框可以插入并且光标在原位置不动的，经过实验

解决方案如下

<portal :to="destinationValue">
  <div>
    <el-input v-model="baseBookMark.name"  @input="handleInput" ref="inputRef" />
  </div>
</portal>

添加input事件，当input框输入时，重新设定input光标的位置

const inputRef = ref(null);

const handleInput = () => {
  const inputEle = inputRef.value.$refs.input;
  if (inputEle) {
    const cursorPosition = inputEle.selectionStart;
    setTimeout(() => {
      inputEle.setSelectionRange(cursorPosition, cursorPosition);
    }, 10);
  }
};

目前使用这种方法可以解决这个问题，如果大家有好的方案也可以一起讨论。

结语

portal-vue是Vue 2中一个非常实用的插件，它提供了一种简洁的方式来处理那些需要跨越组件边界操作DOM的复杂情况。通过本文的介绍，你应该能够开始在你的项目中利用portal-vue来创建更加灵活和强大的Vue应用程序。

avatar
文章
阅读
粉丝