Обмен технологиями | Как использовать Hook для инкапсуляции el-dialog при разработке всплывающих окон?

Команда китайского сообщества открытого исходного кода провела свою первую прямую трансляцию, рассказывая историю китайского сообщества открытого исходного кода во имя обмена».

Всплывающие окна — обычное требование при фронтенд-разработке. Компоненты платформы Element UI el-dialogпредоставляют базовые функции, связанные со всплывающими окнами. Однако в реальной разработке мы неизбежно столкнемся с некоторыми индивидуальными требованиями, такими как вторичная инкапсуляция всплывающих окон для единообразного управления стилями и поведением в проекте.

В этой статье мы расскажем, как использовать useDialogинкапсуляцию Hook el-dialogдля создания более гибкого и простого в использовании всплывающего компонента.

1. Уточнение вопросов

«Применение общего компонента к нескольким страницам» — очень распространенный практический сценарий.

Например: Возьмем в качестве примера покупку приложения. Пользователь может совершить покупку на странице оплаты или может инициировать запрос на покупку при просмотре других страниц. В этом случае должно появиться диалоговое окно, которое поможет пользователю. для завершения покупательского поведения.

Для достижения этой функциональности в прошлом обычно предпринимались следующие шаги:

1. Инкапсулируйте компонент покупки . Сначала создайте общий компонент покупки, чтобы его можно было повторно использовать на разных страницах и в разных сценариях.
2. Отобразите компонент покупки на странице оплаты : вставьте компонент покупки непосредственно на страницу оплаты.
3. Используйте el-dialogкомпонент отображения покупкиel-dialog на других страницах: управляйте отображением компонента на других страницах и используйте visibleпеременные состояния (обычно refадаптивную переменную) для динамического управления всплывающим окном и закрытием диалогового окна.

Хотя этот метод может удовлетворить функциональные требования, поскольку компонент используется все большим количеством страниц и функций, обслуживание становится более сложным и громоздким - для каждой дополнительной страницы использования логика управления отображением/скрытием должна писаться повторно.

Итак, есть ли лучший способ упростить этот процесс? Можно ли использовать отдельную функцию для глобального управления открытием и закрытием компонента покупки каким-либо образом, тем самым уменьшая дублирование кода и затраты на обслуживание?

2. Об использованииDialog Hook

В Vue хуки позволяют «подключать» функции Vue к функциональным компонентам или API. Обычно они используются в Composition API, который представляет собой набор адаптивных и многократно используемых логических функций, предоставляемых Vue.

Хук , упомянутый в этой статье, useDialogпредставляет собой пользовательский хук, который инкапсулирует el-dialogосновные функции компонента. Он также может предоставлять дополнительные функции для управления и отображения всплывающих окон в проекте.

3. Реализуйте хук useDialog

useDialogХуку необходимо достичь следующих целей:

1. Соблюдайте базовое использование, el-dialogпередаваемые базовые атрибуты и контент, отображаемый слотом по умолчанию, экспортом openDialogи closeDialogфункциями;
2. Поддерживаемая el-dialogконфигурация событий;
3. Поддерживает slotконфигурацию атрибутов компонента по умолчанию;
4. Поддержка el-dialogдругих конфигураций слотов, таких как headerи footerт. д.;
5. Создание определенных событий в компонентах контента поддерживает закрытие диалогового окна;
6. Поддерживаемое отображаемое содержимое: jsx, 普通文本, Vue Component;
7. Поддерживает функции обратного вызова, которые контролируют, можно ли закрыть отображаемый контент, например beforeClose;
8. Поддерживает отображение перед хуками, например onBeforeOpen;
9. Поддерживает изменение свойств конфигурации во время определения и всплывающего окна;
10. Поддерживает наследование прототипа root vue, вы можете использовать такие функции , vue-i18nкак ;$t
11. tsПодсказка параметра поддержки ;

(1) Подготовьте useDialog.tsопределение типа реализации файла.

import type { Ref } from 'vue'
import { h, render } from 'vue'
import { ElDialog } from 'element-plus'
import type {
  ComponentInternalInstance,
} from '@vue/runtime-core'

type Content = Parameters<typeof h>[0] | string | JSX.Element
// 使用 InstanceType 获取 ElDialog 组件实例的类型
type ElDialogInstance = InstanceType<typeof ElDialog>

// 从组件实例中提取 Props 类型
type DialogProps = ElDialogInstance['$props'] & {
}
interface ElDialogSlots {
  header?: (...args: any[]) => Content
  footer?: (...args: any[]) => Content
}
interface Options<P> {
  dialogProps?: DialogProps
  dialogSlots?: ElDialogSlots
  contentProps?: P
}

(2) Реализация обычных useDialogфункций

Следующие функции реализуют базовое использование, включая цели 1, 2, 3, 4, 6 и 11.

Цель 1: обеспечить базовое использование, передать el-dialogосновные атрибуты и содержимое отображения слота по умолчанию, экспорт openDialogи closeDialogфункции;
Цель 2: поддержка el-dialogконфигурации событий;
цель 3: поддержка slotнастройки атрибутов компонентов по умолчанию;
цель 4: поддержка el-dialogдругих конфигураций слотов, таких как headerи; footerи т. д.
Цель 6: Поддержка отображения содержимого jsx, 普通文本, Vue Component;
Цель 11: Поддержка tsподсказок параметров;

export function useDialog<P = any>(content: Content, options?: Ref<Options<P>> | Options<P>) {
  let dialogInstance: ComponentInternalInstance | null = null
  let fragment: Element | null = null

  // 关闭并卸载组件
  const closeAfter = () => {
    if (fragment) {
      render(null, fragment as unknown as Element) // 卸载组件
      fragment.textContent = '' // 清空文档片段
      fragment = null
    }
    dialogInstance = null
  }
  function closeDialog() {
    if (dialogInstance)
      dialogInstance.props.modelValue = false
  }

  // 创建并挂载组件
  function openDialog() {
    if (dialogInstance) {
      closeDialog()
      closeAfter()
    }
    
    const { dialogProps, contentProps } = options
    fragment = document.createDocumentFragment() as unknown as Element

    const vNode = h(ElDialog, {
      ...dialogProps,
      modelValue: true,
      onClosed: () => {
        dialogProps?.onClosed?.()
        closeAfter()
      },
    }, {
      default: () => [typeof content === 'string'
        ? content
        : h(content as any, {
          ...contentProps,
        })],
      ...options.dialogSlots,
    })
    render(vNode, fragment)
    dialogInstance = vNode.component
    document.body.appendChild(fragment)
  }

  onUnmounted(() => {
    closeDialog()
  })

  return { openDialog, closeDialog }
}

(3) Достичь цели 5

Цель 5: генерировать определенные события в компонентах контента для поддержки закрытия диалогового окна;

1. поддерживается по определению closeEventName;

interface Options<P> {
  // ...
  closeEventName?: string // 新增的属性
}

2. Измените useDialogфункцию, чтобы получить closeEventNameсобытие для закрытия диалога.

export function useDialog<P = any>(content: Content, options?: Ref<Options<P>> | Options<P>) {
  // ...
  // 创建并挂载组件
  function openDialog() {
    // ...
    fragment = document.createDocumentFragment() as unknown as Element
    // 转换closeEventName事件
    const closeEventName = `on${upperFirst(_options?.closeEventName || 'closeDialog')}`

    const vNode = h(ElDialog, {
      // ...
    }, {
      default: () => [typeof content === 'string'
        ? content
        : h(content as any, {
          ...contentProps,
          [closeEventName]: closeDialog, // 监听自定义关闭事件，并执行关闭
        })],
      ...options.dialogSlots,
    })
    render(vNode, fragment)
    dialogInstance = vNode.component
    document.body.appendChild(fragment)
  }

  onUnmounted(() => {
    closeDialog()
  })

  return { openDialog, closeDialog }
}

(4) Достичь целей 7 и 8.

Цель 7: Поддержка функции обратного вызова, которая контролирует, можно ли закрыть ее в отображаемом контенте, например beforeClose.
Цель 8: Поддержка перехватчиков перед отображением, например onBeforeOpen;

1. Он поддерживается в определении onBeforeOpenи beforeCloseDialogпередается в компонент контента по умолчанию вместе с настройками вызова компонента;

type DialogProps = ElDialogInstance['$props'] & {
  onBeforeOpen?: () => boolean | void
}

2. Измените useDialogфункцию, чтобы получить onBeforeOpenсобытие и передать его beforeCloseDialog.

export function useDialog<P = any>(content: Content, options?: Ref<Options<P>> | Options<P>) {
  // ...
  // 创建并挂载组件
  function openDialog() {
    // ...
    const { dialogProps, contentProps } = options
    // 调用before钩子，如果为false则不打开
    if (dialogProps?.onBeforeOpen?.() === false) {
      return
    }
    // ...
    // 定义当前块关闭前钩子变量
    let onBeforeClose: (() => Promise<boolean | void> | boolean | void) | null

    const vNode = h(ElDialog, {
      // ...
      beforeClose: async (done) => {
        // 配置`el-dialog`的关闭回调钩子函数
        const result = await onBeforeClose?.()
        if (result === false) {
          return
        }
        done()
      },
      onClosed: () => {
        dialogProps?.onClosed?.()
        closeAfter()
        // 关闭后回收当前变量
        onBeforeClose = null
      },
    }, {
      default: () => [typeof content === 'string'
        ? content
        : h(content as any, {
          // ...
          beforeCloseDialog: (fn: (() => boolean | void)) => {
            // 把`beforeCloseDialog`传递给`content`，当组件内部使用`props.beforeCloseDialog(fn)`时，会把fn传递给`onBeforeClose`
            onBeforeClose = fn
          },
        })],
      ...options.dialogSlots,
    })
    render(vNode, fragment)
    dialogInstance = vNode.component
    document.body.appendChild(fragment)
  }

  onUnmounted(() => {
    closeDialog()
  })

  return { openDialog, closeDialog }
}

(5) Достичь целей 9 и 10.

Цель 9: Поддержка изменения свойств конфигурации при определении и появлении.
Цель 10: Поддержка наследования прототипа root vue, вы можете использовать такие функции , vue-i18nкак ;$t

// 定义工具函数，获取计算属性的option
function getOptions<P>(options?: Ref<Options<P>> | Options<P>) {
  if (!options)
    return {}
  return isRef(options) ? options.value : options
}

export function useDialog<P = any>(content: Content, options?: Ref<Options<P>> | Options<P>) {
  // ...
  // 获取当前组件实例，用于设置当前dialog的上下文，继承prototype
  const instance = getCurrentInstance()
  // 创建并挂载组件，新增`modifyOptions`参数
  function openDialog(modifyOptions?: Partial<Options<P>>) {
    // ...
    const _options = getOptions(options)
    // 如果有修改，则合并options。替换之前的options变量为 _options
    if (modifyOptions)
      merge(_options, modifyOptions)
    
    // ...

    const vNode = h(ElDialog, {
      // ...
    }, {
      // ...
    })
    // 设置当前的上下文为使用者的上下文
    vNode.appContext = instance?.appContext || null
    render(vNode, fragment)
    dialogInstance = vNode.component
    document.body.appendChild(fragment)
  }

  onUnmounted(() => {
    closeDialog()
  })

  return { openDialog, closeDialog }
}

После использования Hook через вышеуказанный пакет useDialog, когда вам нужно вызвать всплывающее окно, вам нужно только ввести Hook и вызвать openDialogметод, что очень удобно и лаконично. Кроме того, такая инкапсуляция также сделает более удобным изменение логики всплывающего окна в дальнейшем. Вам нужно будет useDialogизменить ее только в Hook, без необходимости редактировать ее по одному.

4. Практический пример использования UseDialog Hook

Далее мы используем useDialogHook для решения проблемы покупки приложения, упомянутой в начале.

(1) Создать components/buy.vueкомпонент покупки

<script lang="ts" setup>
  const props = defineProps({
    from: {
      type: String,
      default: '',
    },
  })
</script>
<template>
  我是购买组件
</template>

(2) pages/subscription.vueИспользуйте buy.vueкомпонент покупки на странице.

<script lang="ts" setup>
  import Buy from '@/components/buy.vue'
</script>
<template>

  <Buy from="subscription" />

</template>

buy.vue(3) Компоненты всплывающей покупки на других функциональных страницах.

<script lang="ts" setup>
  import { useDialog } from '@/hooks/useDialog'
  const Buy = defineAsyncComponent(() => import('@/components/buy.vue'))

  const { openDialog } = useDialog(Buy, {
    dialogProps: {
      // ...
      title: '购买'
    },
    contentProps: {
      from: 'function',
    },
  })
  
  const onSomeClick = () => {
    openDialog()
  }
</script>

Расширение: другие приложения useDialog Hook

beforeClose& closeEventNameПример: buy.vueпокупка компонентов

<script lang="ts" setup>
  const props = defineProps({
    from: {
      type: String,
      default: '',
    },
    beforeCloseDialog: {
      type: Function,
      default: () => true,
    },
  })
  
  const emit = defineEmits(['closeDialog'])

  props.beforeCloseDialog(() => {
    // 假如from 为 空字符串不能关闭
    if (!props.from) {
      return false
    }
    return true
  })
  
  // 关闭dialog
  const onBuySuccess = () => emit('closeDialog')
</script>

<script lang="ts" setup>
  import { useDialog } from '@/hooks/useDialog'
  const Buy = defineAsyncComponent(() => import('@/components/buy.vue'))

  const { openDialog } = useDialog(Buy, {
    dialogProps: {
      // ...
      title: '购买'
    },
    contentProps: {
      from: '',
    },
  })
  
  const onSomeClick = () => {
    openDialog()
  }
</script>

Подведем итог

Использование useDialogинкапсуляции Hook el-dialogможет сделать интерфейсную технологию более интересной и лаконичной. Автор также надеется, что каждый сможет попробовать этот метод инкапсуляции, чтобы сделать код интерфейса более элегантным и простым в обслуживании.

Отличные инженеры подобны превосходным поварам. Они владеют изысканными навыками приготовления и приправы, чтобы каждое блюдо было восхитительным!

---

LigaAI придает большое значение поддержанию и развитию культуры разработчиков и продолжит делиться новыми технологиями и интересными технологическими практиками.

Добро пожаловать на учетную запись LigaAI, и мы с нетерпением ждем, когда вы нажмете на интеллектуальную платформу для сотрудничества в области исследований и разработок нового поколения, чтобы больше общаться с нами.

Чтобы помочь разработчикам отправиться в плавание, LigaAI с нетерпением ждет возможности сопровождать вас на протяжении всего пути!

Программист, родившийся в 1990-х годах, разработал программу для переноса видео и заработал более 7 миллионов менее чем за год. Концовка была очень суровой! Старшеклассники создают свой собственный язык программирования с открытым исходным кодом в качестве церемонии совершеннолетия – резкие комментарии пользователей сети: Полагаясь на RustDesk из-за повального мошенничества, отечественный сервис Taobao (taobao.com) приостановил внутренние сервисы и возобновил работу по оптимизации веб-версии Java 17 является наиболее часто используемой версией Java LTS. Доля рынка Windows 10 Достигнув 70%, Windows 11 продолжает снижаться. Open Source Daily | Google поддерживает Hongmeng, чтобы взять на себя управление телефонами Rabbit R1 с открытым исходным кодом, поддерживаемыми Docker Microsoft; Electric закрывает открытую платформу Apple выпускает чип M4 Google удаляет универсальное ядро ​​Android (ACK) Поддержка архитектуры RISC-V Юньфэн ушел из Alibaba и планирует в будущем выпускать независимые игры на платформе Windows

{{o.name}}

{{м.имя}}