Умение работать с сериями React/Vue для реализации компонента глобальной подсказки (сообщения)

JavaScript React.js
Умение работать с сериями React/Vue для реализации компонента глобальной подсказки (сообщения)

предисловие

Эта статья является одиннадцатой статьей авторского дизайна компонента письма.Сегодня я познакомлю вас с реализацией не менее специального компонента — компонента глобального сообщения. Эффект компонента, который мы видим, может выглядеть так:

Из-за принципа построения глобального компонента подсказки и предыдущей статьи автораБыть опытным в серии React/Vue и помочь вам реализовать мощное окно напоминания об уведомлении (Уведомление)Это похоже, разница в основном заключается в параметрах компоновки и конфигурации, поэтому в этой статье не будут представлены детали и принципы реализации.В этой статье в основном представлены идеи дизайна и методы проектирования.

Базовая компонентная библиотека в основном разделена на следующие категории.:

  • Универсальные компоненты: Например, кнопка, значок и т. д.
  • компонент макета: такие как сетка, макет макета и т. д.
  • Группа навигацииЧасти: такие как хлебные крошки, раскрывающийся список, меню и т. д.
  • Компонент ввода данных: Например, форма формы, переключатель переключения, загрузка файла загрузки и т. д.
  • компонент отображения данных: например, аватар аватара, таблица таблиц, список списков и т. д.
  • компонент обратной связи: например, индикатор выполнения, ящик ящика, модальное диалоговое окно и т. д.
  • Другие виды бизнеса

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

В этой статье для разработки компонента будет использоваться React, а также некоторые часто используемые Javascript.Шаблоны проектирования,Напримеродноэлементный шаблон, но какой бы фреймворк вы ни использовали для его реализации, принцип универсален, если вам интересно, то для его реализации можно использовать и vue. Если вы мало знаете о шаблонах проектирования, вы можете двигаться дальше:

15 минут, чтобы понять шаблоны проектирования JavaScript, которые должны знать фронтенд-инженеры (с подробной картой ума и исходным кодом).

текст

Прежде чем приступить к разработке компонента, я надеюсь, что у вас есть определенные основы в CSS3 и JS и вы понимаете базовый синтаксис react/vue.Давайте сначала разберем компонент сообщения.Сообщение разделено на следующие части:

Каждый блок может быть настроен индивидуально, и другие компоненты могут быть объединены.Мы также можем настроить смещение, при котором глобальная подсказка появляется вверху, аналогично компонентам antd. И все мы знаем, что библиотеки компонентов, такие как antd или element, будут поставляться с некоторыми состояниями темы для повышения эффективности пользователей.success(статус успеха),warning(состояние предупреждения),error(статус ошибки),info(статус уведомления) и т. д., то наша собственная реализация глобальной подсказки (Message) Компоненты также должны иметь эти функции.

Ниже приведены компонент сообщения после эффектов, которые я использую, реагирую на достижение:

Далее давайте рассмотрим конкретные идеи дизайна окна напоминания об уведомлении (Message).

1. Идеи дизайна компонента сообщения

В соответствии с принципами проектирования компонентов, изложенными автором ранее, нашим первым шагом является подтверждение требований.Компонент окна напоминания с уведомлением (сообщение) обычно имеет следующие требования:

  • Может контролировать время, когда сообщение автоматически закрывается
  • Можно настроить выходное местоположение узла рендеринга сообщений.
  • Настраиваемый значок закрытия
  • Тип глобальной подсказки можно выбрать вручную
  • Можно настроить смещение глобальной подсказки
  • Можно установить информационный текст глобальной подсказки
  • Значки, которые могут настраивать глобальные подсказки
  • Обеспечьте функцию обратного вызова при нажатии глобальной подсказки
  • Обеспечивает функцию обратного вызова, когда глобальная подсказка закрыта
  • Возможность вручную уничтожать окна уведомлений

После того, как требования будут собраны, как начинающий программист, будут нарисованы следующие каркасы:

Конкретные детали дизайна см. в моей предыдущей статье.Дизайн компонента уведомленийстатья.

2. Реализовать компонент глобального сообщения на основе реакции

Для основной части компонента мы по-прежнему используем режим React Notification.

2.1 Создание основного каркаса окна напоминания об уведомлении (Уведомление)

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

import Notification from 'rc-notification'
import './index.less'

const xMessage = (function() {
  let message = null
  /**
     * notice类型弹窗
     * @param {config}  object 提示框配置属性
     *   @param {type} string 提示窗类型
     *   @param {btn}  ReactNode 自定义关闭按钮
     *   @param {className}  string 自定义 CSS class
     *   @param {duration}  number 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭
     *   @param {getContainer}  HTMLNode 配置渲染节点的输出位置
     *   @param {icon}  ReactNode 自定义图标
     *   @param {key}  string 当前提示唯一标志
     *   @param {content}  string|ReactNode 提示标题，必选
     *   @param {onClose}  func 点击默认关闭按钮时触发的回调函数
     *   @param {onClick}  func 点击提示时触发的回调函数
     *   @param {top}  number 消息从顶部弹出时，距离顶部的位置，单位像素
     *   @param {closeIcon}  ReactNode 自定义关闭图标
     */
  const pop = (config) => {
    const {
      type, className,
      duration = 4.5,
      getContainer = () => document.body,
      icon, key, content, onClose, onClick,
      top, closable = true, closeIcon
    } = config
    message.notice({
      content: <div className={classnames('xMessage', className )}>
        <div className={classnames('iconWrap', type)}>
            <Icon type={iconType[type]} />
          </div>
        <div className="xNoticeTit">
          { content }
        </div>
      </div>,
      key, closable, getContainer,
      onClose() {
        onClose && onClose()
      },
      onClick() {
        onClick && onClick()
      },
      closeIcon, duration, style: { top }
    })
  }

  /**
     * 提示提示组件, 全局参数
     * @param {duration} number 默认自动关闭延时，单位秒
     * @param {getContainer} HTMLNode 配置渲染节点的输出位置，默认document.body
     * @param {closeIcon} HTMLNode 自定义关闭图标
  */
  const config = (config) => {}
  const remove = (key) => {}
  const destroy = () => {}

  if(message) {
    return {
      config, pop, remove, destroy
    }
  }
  // 如果为创建实例，则创建默认实例
  Notification.newInstance({}, (notice) => message = notice)

  return {
    config, pop, remove, destroy
  }
})()

export default xMessage

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

  • config — глобальная конфигурация сообщения, используемая для управления глобальными смещениями, стилями, контейнерами рендеринга и т. д.;
  • pop - метод, используемый для создания экземпляра глобальной подсказки при управлении свойствами экземпляра
  • remove — используется для удаления указанного экземпляра
  • уничтожить - используется для уничтожения глобального сообщения

Сначала реализуем конфиг:

const config = (config) => {
  const { duration, getContainer, closeIcon } = config

  Notification.newInstance({
    getContainer: getContainer,
    duration: duration || 4.5,
    closeIcon
  }, (notice) => message = notice)
}

Конечно, мы также можем настроить расширение в соответствии с нашими потребностями.

Реализация поп-метода:

const pop = (config) => {
    const {
      type,
      className,
      duration = 4.5,
      getContainer = () => document.body,
      icon,
      key,
      content,
      onClose,
      onClick,
      top,
      closable = true,
      closeIcon
    } = config
    message.notice({
      content: <div className={classnames('xMessage', className )}>
        {
          (icon || ['info', 'success', 'error', 'warning'].indexOf(type) > -1) &&
          <div className={classnames('iconWrap', type)}>
            {
              icon ? icon : <Icon type={iconType[type]} />
            }
          </div>
        }
        <div className="xNoticeTit">
          { content }
        </div>
      </div>,
      key,
      closable,
      getContainer,
      onClose() {
        onClose && onClose()
      },
      onClick() {
        onClick && onClick()
      },
      closeIcon,
      duration,
      style: { top }
    })
  }

Этот метод в основном используется для настройки экземпляра создания глобального сообщения, мы можем назвать его так:

xNotification.pop({type: 'success', content: '你的请求被审批通过啦！'})

Фактический эффект выглядит следующим образом:

Точно так же antd будет вызываться так:

// antd
Notification.info({//...})

Причина, по которой автор делает это, заключается в том, что состояния информации, успеха и предупреждения могут фактически повторно использоваться в структуре DOM, поэтому избыточный код может быть значительно сокращен путем настройки.

Методы удаления и уничтожения относительно просты, перейдем непосредственно к коду:

const remove = (key) => {
    message.removeNotice(key)
  }

const destroy = () => {
  message.destroy()
}

Из приведенного выше видно, что их реализации основаны на API, который поставляется с экземпляром сообщения.

2.2 Реализовать тип окна уведомлений и пользовательский значок

Во-первых, давайте определим отношение сопоставления между типом и значком:

 const iconType = {
    success: 'FaRegCheckCircle',
    warning: 'FaRegMeh',
    info: 'FaRegLightbulb',
    error: 'FaRegTimesCircle'
 }

Эти четыре типа соответствуют разным типам значков значков, поэтому мы можем отображать разные значки значков в соответствии с типом, переданным пользователем:

<div className={classnames('iconWrap', type)}>
    <Icon type={iconType[type]} />
</div>

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

{
  (icon || ['info', 'success', 'error', 'warning'].indexOf(type) > -1) &&
  <div className={classnames('iconWrap', type)}>
    {
      icon ? icon : <Icon type={iconType[type]} />
    }
  </div>
}

Эффект следующий:

Благодаря вышеуказанным шагам компонент глобальной подсказки (сообщения) завершен.Есть много общего между реализацией и компонентом уведомления.Если вы не понимаете, вы можете задать вопросы в области комментариев, и автор ответит, как только насколько это возможно после просмотра.

2.3 Использование компонента глобального сообщения

Мы можем использовать его следующим образом:

<Button type="warning" onClick={
        () => {
            message.pop({
                type: 'error',
                content: '趣谈前端学习打卡'
            })
        }
    }>错误信息通知(error)</Button>

Настройте глобальные свойства:

import { message } from '@alex_xu/xui'

message.config({ duration: 6 })

Автор опубликовал реализованные компоненты в npm.Если вам интересно, вы можете установить и использовать их напрямую с npm следующим образом:

npm i @alex_xu/xui

// 导入xui
import { 
  Button, Skeleton, Empty, Progress,
  Message, Tag, Switch, Drawer, Badge, Alert
} from '@alex_xu/xui'

Библиотека компонентов поддерживает импорт по требованию, нам нужно только настроить в проекте babel-plugin-import, конкретная конфигурация выглядит следующим образом:

// .babelrc
"plugins": [
  ["import", { "libraryName": "@alex_xu/xui", "style": true }]
]

Скриншот библиотеки npm выглядит следующим образом:

наконец

В дальнейшем автор продолжит реализовывать

  • table(лист),
  • tooltip(панель подсказок),
  • Skeleton(скелетный экран),
  • form(форма формы),
  • switch(выключатель),
  • дата/календарь,
  • Компонент для чтения QR-кода

и другие компоненты, чтобы рассмотреть многолетний путь автора по компонентизации.

Если вы не знакомы с принципами проектирования компонентов react/vue, вы можете обратиться к моей предыдущей серии статей о дизайне компонентов:

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

Если вы хотите получить полный исходный код серии статей о дизайне компонентов или хотите узнать большеигра Н5, webpack,node,gulp,css3,javascript,nodeJS,визуализация данных холстаВ ожидании передовых знаний и реальных сражений, добро пожаловать в нашу техническую группу в общедоступном аккаунте «Интересный передний конец», чтобы вместе учиться и обсуждать, а также вместе исследовать границы переднего плана.

больше рекомендаций

Категории