предисловие

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

В сегодняшней статье вы проанализируете этот ряд вопросов, взяв в качестве примера библиотеку компонентов vant-weapp, от разработки стандартных всплывающих компонентов до использования составных самоэстетичных всплывающих окон с широкими возможностями настройки и до полного изучения. of vant-weapp Часть исходного кода компонента всплывающего окна фреймворка.

1. Внедрение компонентов всплывающего окна vant-weapp

vant-weappБиблиотека компонентов разработана командой Youzan.Гибкая, лаконичная и красивая библиотека компонентов пользовательского интерфейса апплета., в этой статье использование этой библиотеки компонентов будет использоваться в качестве стандарта.Все перечисленные ниже компоненты маркеров относятся к маркерам в этой библиотеке компонентов.

Классификация пулевых ящиков

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

Регистрация компонентов апплета

Перед использованием всплывающего компонента не забудьте зарегистрировать его в файле app.json апплета.Начать быстро, например, код для регистрации компонента van-popup выглядит следующим образом:

// app.json
"usingComponents": {
  "van-popup": "path/to/@vant/weapp/dist/popup/index"
}

Реально используемые в проекте следующие:

В этом последующем анализе источник van-dialog будет найден в диалоговом окне index.json, также были определены компоненты van-popup, но мы должны указать, что реализация компонента van-popup должна быть в файле конфигурации app.json. небольшая программа в соответствии с планом, определенным образом, небольшие процедуры микроканала, описанные на официальном сайтеИмпортированные компоненты внутри пользовательских компонентов действуют только внутри этого компонента.

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

2. Основное использование всплывающего окна

Обычное использование

Чаще всего используется компонент van-popup напрямую, чтобы управлять его отображением через свойство show компонента.Другие компоненты или метки, вложенные внутрь компонента, являются содержимым компонента popup, как показано ниже:

// wxml
<button bindtap="showPopup">展示弹出层</button>
<van-popup
	show="{{ show }}"
	position="top"
	bind:close="onClose"
  closeable
>内容</van-popup>

// js
Page({
  data: {
    show: false
  },
  showPopup() {
    this.setData({ show: true });
  },
  onClose() {
    this.setData({ show: false });
  }
});

Анализ ключевых атрибутов

Компонент van-popup может передавать пять значений свойства position:center、top、right、bottom、leftНапример, из какого положения всплывает элемент управления ярлыком: всплывающее окно в приведенном выше примере всплывает сверху вниз

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

Различные основные формы всплывающих окон следующие:

3. Основное использование диалогового окна диалога

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

Общее использование - с заголовком

Наиболее распространенное использование — использовать компонент van-dialog напрямую и управлять его отображением или нет с помощью свойства show компонента.Другие компоненты или метки, вложенные внутрь компонента, являются содержимым компонента диалога, как показано ниже:

// wxml
<van-dialog
  title="标题"
	message="代码是写出来给人看的，附带能在机器上运行"
  show="{{ show }}"
  confirm-button-open-type="getUserInfo"
  bind:close="onClose"
  bind:getuserinfo="getUserInfo"
>
  <image src="https://img.yzcdn.cn/1.jpg" />
</van-dialog>

// js
Page({
  data: {
    show: true
  },
  getUserInfo(event) {
    console.log(event.detail);
  },
  onClose() {
    this.setData({ close: false });
  }
});

Общее использование — без названия

Используйте компонент van-dialog напрямую и управляйте его отображением или нет с помощью свойства show компонента. Другие компоненты или метки, вложенные внутрь компонента, являются содержимым компонента диалогового окна. Не используйте use-title-slot и не передавайте свойство title, как показано ниже:

// wxml
<van-dialog
  show="{{ show }}"
  confirm-button-open-type="getUserInfo"
  bind:close="onClose"
  bind:getuserinfo="getUserInfo"
>
  <view class="message">代码是写出来给人看的，附带能在机器上运行</view>
</van-dialog>

// js
Page({
  data: {
    show: true
  },
  getUserInfo(event) {
    console.log(event.detail);
  },
  onClose() {
    this.setData({ close: false });
  }
});

Атрибут use-slot в приведенных выше двух вариантах использования указывает, что слот по умолчанию (то есть содержимое wxml, вложенное в van-dialog, такое как ... здесь) используется в качестве вывода содержимого, а bind:getuserinfo — это разработка WeChat. используемая возможность (То есть, при нажатии кнопки ОК соответствующая информация получается путем вызова API платформы WeChat, здесь находится личная идентификационная информация пользователя)

Вызов функции - подтверждение

Другим наиболее распространенным использованием является прямое использованиеDialog、Dialog.alert、Dialog.confirmспособ быстро открыть всплывающий компонент и закрыть всплывающий компонент с помощьюDialog.close, чтобы отменить состояние загрузки всплывающего окна, используйтеDialog.stopLoading, другие компоненты или теги, вложенные внутрь компонента, являются содержимым компонента диалогового окна, как показано ниже:

// wxml
<van-dialog id="van-dialog">
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';

// js
Dialog.alert({
  title: "标题"
  message: '代码是写出来给人看的，附带能在机器上运行'
}).then(() => {
  // on close
});

При использовании вызова функции здесь необходимо обратить внимание на то, чтобы написать это в wxml страницы с помощью van-dialog для использования компонента, о котором будет рассказано в анализе исходного кода диалога ниже (продажа ключа), или вы можешь угадать первым 😊😊

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

4. Расширенное использование диалога

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

Настройте заголовок с помощью use-title-slot

<van-dialog
  id="van-dialog"
  show="{{ dialogShow }}"
  message="资质原件拍照或扫描可以不加盖公章，复印件需盖章\n\n如是三证合一，则无需提供税务登记证、组织机构代码证"
  message-align="left"
  confirm-button-text="知道了"
  confirm-button-color="#EE712F"
  use-title-slot
>
  <view slot="title" class=" merchant-dialog__title">
    <view class="merchant-dialog__title-text">开户前，请准备以下资料</view>
    <van-icon name="cross" size="40rpx" class="merchant-dialog__title-icon" bindtap="closeDialog" />
  </view>
</van-dialog>
// 样式部分的代码此处省略

Активировать всплывающее окно

handleButtonClick1: function () {
  this.setData({
  	dialogShow: true
  })
},

В этом примере используются следующие функции:

• использоватьuse-title-slotАтрибут указывает, что слот с именем title используется для рендеринга в заглавную часть заголовка.
• использоватьconfirm-button-text、confirm-button-colorопределить стиль и текст нижней кнопки OK
• Датьvan-iconПривяжите событие касания, чтобы вручную закрыть диалоговое окно

Соответствующие эффекты следующие:

Настройте содержимое приглашения с помощью use-slot

<van-dialog
  id="van-dialog-2"
  use-slot
  use-title-slot
>
  <view slot="title" style="padding-bottom: 10px;">
    <van-icon name="close" color="#fff" size="30" bindtap="closeDialog2" />
  </view>
  <image class="image" src="https://tva1.sinaimg.cn/large/0082zybply1gbylbcwm44j30rs13bdsg.jpg" mode="aspectFit"></image>
</van-dialog>

пройти черезметод вызова функцииАктивировать всплывающее окно

handleButtonClick2: function () {
  Dialog({
    selector: '#van-dialog-2',
    showConfirmButton: false,
    closeOnClickOverlay: false,
    className: 'dialog2',
    width: '260px'
  })
},

В этом примере используются следующие функции:

• использоватьuse-slotУказывает, что слот по умолчанию используется для рендеринга содержимого в позицию основного содержимого всплывающего окна.
• Визуализируемое содержимое представляет собой изображение, чтобыРеализовать эффект занавеса
• использоватьclassNameэтоexternalClassesИспользование стилей страницы для управления внутренними стилями компонентов

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

Используйте переменные css для определения тем

<van-dialog
  id="van-dialog-3"
  use-title-slot
>
  <view slot="title" style="color: #000;">提示</view>
  <view>
    <view>为了给你推荐更合适的漫展～</view>
    <view>请开启定位权限～</view>
  </view>
</van-dialog>

пройти черезметод вызова функцииАктивировать всплывающее окно

handleButtonClick3: function () {
  Dialog({
    selector: '#van-dialog-3',
    showCancelButton: true,
    cancelButtonTrext: '取消',
    confirmButtonText: '去设置',
    cancelButtonColor: '#C46B85',
    confirmButtonColor: '#C46B85',
    message: '为了给你推荐更合适的漫展～\n请开启定位权限～',
    confirmButtonOpenType: 'openSetting',
    width: '260px',
    className: 'dialog3'
  })
},

класс внешнего стиля

.dialog-index--dialog3 {
  --dialog-background-color: rgba(255,255,255,0.8);
  --popup-background-color: rgba(255,255,255,0.8);
  --button-default-background-color: transparent;
  color: #666;
}

В этом примере используются следующие функции:

• использоватьcancelButtonColor、confirmButtonColorОперация Управляющая нижняя кнопка Цвет
• Используйте имя класса externalClasses для управления внутренними стилями компонентов со стилями страницы.
• Изменить переменную тела внутри компонента во внешнем классе стиля--dialog-background-colorПодождите, чтобы изменить цвет темы всплывающего окна

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

5. Разработайте компоненты всплывающих окон в реальных сценариях

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

• Реализовать эффект занавеса
• Реализовать запрос разрешения на операцию
• Запрашивать обновление приложения
• Советы по использованию приложений

Эта часть может перейти непосредственно к исходному кодуGitHub.com/Джон и бывший U/VA…

Вы также можете отсканировать QR-код этого апплета, чтобы увидеть эффект.

6. Предварительные условия для анализа исходного кода

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

Как использовать меньше для разработки стилей

Стиль обработки является одной из основных логик, которую нельзя игнорировать во всех UI-фреймворках.Обработка стилей в vant-weapp в основном делится на следующие три части, соответствующая структура исходного кода показана на рисунке ниже, с использованием меньшего повторное использование миксинов для управления переменными темы, извлечения общедоступного стиля и т. д.

переменная темы

Файл var.less определяет все переменные, связанные со стилем, используемые фреймворком, а часть исходного кода, относящаяся к всплывающему окну, выглядит следующим образом:

// Dialog
@dialog-width: 320px;
@dialog-small-screen-width: 90%;
@dialog-font-size: @font-size-lg;
@dialog-border-radius: 16px;
@dialog-background-color: @white;
@dialog-header-font-weight: @font-weight-bold;
@dialog-header-line-height: 24px;
@dialog-header-padding-top: @padding-lg;
@dialog-header-isolated-padding: @padding-lg 0;
@dialog-message-padding: @padding-lg;
@dialog-message-font-size: @font-size-md;
@dialog-message-line-height: 20px;
@dialog-message-max-height: 60vh;
@dialog-has-title-message-text-color: @gray-7;
@dialog-has-title-message-padding-top: @padding-sm;

Исходный код:var.less

в этом файле в конечном итоге будет преобразовано вcss-переменная, не компилируется в значение, на которое указывает переменная, как при обработке стилей в веб-фреймворках, таких как antd и iview. В соответствии с характеристиками области переменных css вы можете локально переопределить переменную стиля во внешнем классе стиля пользовательского компонента, чтобы изменить стиль внутри компонента.

общий стиль

Общие классы стилей, такие как очистка плавающих элементов, исключение текста, границы в 1 пиксель и т. д., обрабатываются в папке миксинов.

очистить поплавок

.clearfix() {
  &::after {
    display: table;
    clear: both;
    content: '';
  }
}

Используйте общий псевдокласс after, чтобы очистить поплавок

файл опущен

.multi-ellipsis(@lines) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: @lines;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}
.ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

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

БЭМ нейминг

Как создавать зарегистрированные пользовательские компоненты

Официально представлен апплет WeChatКонструктор компонентовРегистрация пользовательских компонентов, чтобы предоставить пользовательские компоненты с более гибким и мощным регистратором компонентов в сочетании с машинописью, следующие функции инкапсулированы для компонента

Инкапсулирует общие методы построения компонентов

function VantComponent<Data, Props, Methods>(
  vantOptions: VantComponentOptions<
    Data,
    Props,
    Methods,
    CombinedComponentInstance<Data, Props, Methods>
  > = {}
): void {
  const options: any = {};
  mapKeys(vantOptions, options, {
    data: 'data',
    props: 'properties',
    mixins: 'behaviors',
    methods: 'methods',
    beforeCreate: 'created',
    created: 'attached',
    mounted: 'ready',
    relations: 'relations',
    destroyed: 'detached',
    classes: 'externalClasses'
  });
  const { relation } = vantOptions;
  if (relation) {
    makeRelation(options, vantOptions, relation);
  }
  // 给所有组件添加默认外部样式类custom-class
  options.externalClasses = options.externalClasses || [];
  options.externalClasses.push('custom-class');
  // 给所有组件添加默认behaviors
  options.behaviors = options.behaviors || [];
  options.behaviors.push(basic);
  // map field to form-field behavior
  if (vantOptions.field) {
    options.behaviors.push('wx://form-field');
  }
  // 默认启用多slot支持、组件中允许全局样式修改
  options.options = {
    multipleSlots: true,
    addGlobalClass: true
  };
  // 最终使用官网构造方法构造组件
  Component(options);
}

Исходный код:component.ts

поведение повторно использует общую логику

behaviorsЭто официальный апплет WeChat для повторного использования компонентов.data、methodsСпособ метода равного атрибута, и в vuemixinsНебольшая роль, определена Vant-WeAppmixinsКак показано ниже:

Среди них basic — это mxin, который повторно используется всеми пользовательскими компонентами и предоставляет три метода для всех пользовательских компонентов:$emit,setа такжеgetRect.

• $emitупакованныйtriggerEventметод;
• setупаковкаsetDataМетод в форме обещания;
• getRectИспользуйте метод Promise, чтобы найти boundingClientRect соответствующего узла.

Исходный код выглядит следующим образом:

// basic.ts
export const basic = Behavior({
  methods: {
    $emit(...args) {
      this.triggerEvent(...args);
    },
    set(data: object, callback: Function) {
      this.setData(data, callback);

      return new Promise(resolve => wx.nextTick(resolve));
    },
    getRect(selector: string, all: boolean) {
      return new Promise(resolve => {
        wx.createSelectorQuery()
          .in(this)[all ? 'selectAll' : 'select'](selector)
          .boundingClientRect(rect => {
            if (all && Array.isArray(rect) && rect.length) {
              resolve(rect);
            }

            if (!all && rect) {
              resolve(rect);
            }
          })
          .exec();
      });
    }
  }
});

Исходный код:basic.ts

наименование жизненного цикла

На самом деле, как называется жизненный цикл, не очень важно, vant-weapp изменил название в основном по следующим двум причинам:

• Эффективность разработки:vant-weapp получен из библиотеки компонентов пользовательского интерфейса для vue --vant, названное унифицированным преобразованием для облегчения логического повторного использования существующих платформ.
• Цена: Именование жизненного цикла ближе к основной структуре MVVM, чтобы снизить затраты на обучение пользователя и затраты на обслуживание инфраструктуры.

function mapKeys(source: object, target: object, map: object) {
  Object.keys(map).forEach(key => {
    if (source[key]) {
      target[map[key]] = source[key];
    }
  });
}
mapKeys(vantOptions, options, {
  data: 'data',
  props: 'properties',
  mixins: 'behaviors',
  methods: 'methods',
  beforeCreate: 'created',
  created: 'attached',
  mounted: 'ready',
  relations: 'relations',
  destroyed: 'detached',
  classes: 'externalClasses'
});

Исходный код:component.ts#L24

пройти черезmapKeysпара методовVantComponentПереданная функция жизненного цикла была преобразована, и имя жизненного цикла имени преобразования соответствует апплету WeChat.

Изоляция стилей для пользовательских компонентов

Областью области действия стиля по умолчанию пользовательского компонента апплета WeChat является текущий компонент, то есть стили в wxss в папке компонента действительны только для wxml в папке (удалите имя тега и селектор идентификатора)

Этот шаблон изоляции стилей покомпонентно подобен библиотеке стилей компонентов, обрабатываемой в среде React.styled-components

Обмен стилями между компонентами

Существует несколько возможных решений, позволяющих совместно использовать стили между компонентами или разрешить настраиваемым компонентам принимать внешние стили.

строить планы	Применение	иллюстрировать
Конфигурация свойства styleIsolation	1.page-isolated означает, что app.wxss отключен на этой странице, и в то же время wxss страницы не повлияет на другие пользовательские компоненты; 2.page-apply-shared означает, что на этой странице отключен app.wxss, при этом стиль страницы wxss не повлияет на другие пользовательские компоненты, а пользовательские компоненты, установленные как общие, повлияют на страницу; 3.page-shared означает, что app.wxss отключен на этой странице.В то же время стиль страницы wxss повлияет на другие пользовательские компоненты, установленные как общие или общие, а также на пользовательские компоненты, установленные как общие.	Параметр styleIsolation поддерживается, начиная с версии базовой библиотеки 2.6.5.
Конфигурация свойства addGlobalClass	Указывает, что стиль страницы wxss повлияет на пользовательский компонент, но стиль, указанный в пользовательском компоненте wxss, не повлияет на страницу.	1. Поддерживается базовая библиотека Mini Program версии 2.2.3 или выше. 2. Эквивалентно styleIsolation:apply-shared 3. Эта схема используется в vantweapp:addGlobalClass: 'true',По умолчаниюstyleIsolation: 'shared'не удалось
externalClasses классы внешнего стиля	Пользователь компонента может указать имя внешнего стиля, соответствующее этому классу стиля, и стиль, соответствующий имени стиля, вступит в силу внутри компонента.	1. Базовая библиотека 1.9.90 стала поддерживать 2. Этот метод также поддерживается в vant-weapp 3. Рекомендуется использовать этот метод для настройки стиля vant-weapp.
class="~blue-text" относится к стилю родительского компонента	Даже при включенной изоляции стилей компоненты могут локально ссылаться на стили страницы, на которой находится компонент, или на стили родительского компонента.	Начата поддержка базовой библиотеки 2.9.2

Использовать сводку

Лучший способ настроить стили компонентов для пользователей библиотеки компонентов vant-weapp:Используйте внешние классы стилей + переменные CSS, используйте собственные стили, только если нет связанных переменных CSS +!importantОбеспечьте приоритет стиля, пожалуйста, ознакомьтесь с мерами предосторожности при использовании компонентов vant-weapp в пользовательских компонентах.Переопределение стиля.

Схема связи пользовательских компонентов

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

Здесь компонент van-dialog использует местоположение для отслеживания события bindclick, и, наконец, это событие будет запущено при нажатии кнопки внутри компонента van-dialog.Все пользовательские события пользовательских компонентов в анализе исходного кода принимают это режим.

Семь, Анализ исходного кода компонента всплывающего слоя Popup

Структура исходного кода части компонента

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

Соглашение об именах компонентов соответствует спецификации пользовательского компонента апплета WeChat (README.md — это документ с инструкциями по использованию компонента, который используется для создания описания документации компонента на официальном веб-сайте).

Файл конфигурации всплывающего компонента идентифицирует текущий индекс как компонент посредствомusing-componentsпредставилvan-iconа такжеvan-overlayКомпоненты, которые можно использовать непосредственно в соответствующем файле wxml.

Основная логика компонента

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

Наложения и события

Слой наложения управляет отображением и стилем слоя наложения с помощью таких свойств компонента, как overlay и overlayStyle.onClickOverlay, вызовите пользовательское событие закрытия компонента через $emit.

onClickOverlay() {
  this.$emit('click-overlay');

  if (this.data.closeOnClickOverlay) {
    this.$emit('close');
  }
}

Кнопка закрытия и события

Отображение кнопки закрытия по умолчанию определяется свойством closable, а стиль кнопки также можно изменить, настроив свойства, связанные со значком закрытия.Событие кнопки закрытия имеет значение onClickCloseIcon, а настраиваемое событие закрытия компонента запускается $ излучать.

onClickCloseIcon() {
  this.$emit('close');
},

Распространение контента

Принимает слот по умолчанию, положение которого основано на переданномpositionПараметры разныеtop、right、bottom、left、centerПять, в соответствии с этими пятью параметрами позиции, есть соответствующие пять различных позиций всплывающих окон и анимаций.

анимация перехода

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

// popup/index.less
.van-bottom-enter,
.van-bottom-leave-to {
  transform: translate3d(0, 100%, 0);
}
.van-top-enter,
.van-top-leave-to {
  transform: translate3d(0, -100%, 0);
}
.van-left-enter,
.van-left-leave-to {
  transform: translate3d(-100%, -50%, 0);
}
.van-right-enter,
.van-right-leave-to {
  transform: translate3d(100%, -50%, 0);
}

В то же время он предоставляет внешние классы стилей, которые можно использовать для настройки анимации.Здесь разделение этапов анимации такое же, как и в Vue.Классификация:enter、enter-active、enter-to、leave、leave-active、leave-to

// popup/index.ts
VantComponent({
  classes: [
    'enter-class',
    'enter-active-class',
    'enter-to-class',
    'leave-class',
    'leave-active-class',
    'leave-to-class'
  ],
  ...
}

Восемь, анализ исходного кода компонента диалогового окна

Структура исходного кода части компонента

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

Структура аналогична всплывающему компоненту, разница в том, что index.json используетvan-popup、van-buttonкомпоненты и дополнительный файл с именем dialog.ts, который предоставляет методы вызова функций API.

Структура компоновки компонентов

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

Исходная структура:

// dialog/index.wxml
<van-popup
  show="{{ show }}"
  ...
>
  <view
    wx:if="{{ title || useTitleSlot  }}"
    class="van-dialog__header {{ message || useSlot ? '' : 'van-dialog--isolated' }}"
  >
    <slot wx:if="{{ useTitleSlot }}" name="title" />
    <block wx:elif="{{ title }}"> {{ title }}</block>
  </view>

  <slot wx:if="{{ useSlot }}" />
  <view
    wx:elif="{{ message }}"
    class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }} {{ messageAlign ? 'van-dialog__message--' + messageAlign : '' }}"
  >
    <text class="van-dialog__message-text">{{ message }}</text>
  </view>

  <view class="van-hairline--top van-dialog__footer">
    <van-button
      wx:if="{{ showCancelButton }}"
      ...
    >
      {{ cancelButtonText }}
    </van-button>
    <van-button
      wx:if="{{ showConfirmButton }}"
      ...
    >
      {{ confirmButtonText }}
    </van-button>
  </view>
</van-popup>

реализация вызова функции

спередиВызов функции - подтверждениеВ вызове функции Dialog для открытия компонента всплывающего окна основная идея реализации вызова функции в основном заключается в следующем:Выполните поиск с помощью метода selectComponent(selector) (аналогично поиску DOM, поиску экземпляров компонентов в Vue), чтобы определить отображаемый диалоговый компонент на странице и вручную обновить данные его экземпляра компонента.** Метод Dialog определяется следующим образом:

const Dialog: Dialog = options => {
  options = {
    ...Dialog.currentOptions,
    ...options
  };
  return new Promise((resolve, reject) => {
    // context为当前查找组件实例的上下分，默认是当前页面，默认根据ID=van-dialog进行查找
    const context = options.context || getContext();
    const dialog = context.selectComponent(options.selector);
    delete options.context;
    delete options.selector;
    if (dialog) {
      dialog.setData({
        onCancel: reject,
        onConfirm: resolve,
        ...options
      });
      queue.push(dialog);
    } else {
      console.warn('未找到 van-dialog 节点，请确认 selector 及 context 是否正确');
    }
  });
};

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

Вызов функции теперь должен гарантировать, что компонент van-dialog существует на странице wxml.При поиске в пользовательском контексте убедитесь, что компонент van-dialog существует в контексте.

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

Параметры в вызове функции будут иметь значения по умолчанию, чтобы принудительно переопределить другие атрибуты, такие как не-id, переданные в атрибуте компонента van-dialog, то есть атрибуты, переданные через компонент, недействительны при вызове функции.

Dialog.confirm

всплывающее окно подтверждения

метод вызова

Dialog.confirm({
	selector: '#van-dialog',
	title: '提示',
	message: '这里放置提示内容'
})

Метод реализации

Dialog.confirm = options =>
  Dialog({
    showCancelButton: true,
    ...options
  });

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

Dialog.close

закрыть всплывающее окно

метод вызова

Dialog.close()

Метод реализации

Dialog.close = () => {
  queue.forEach(dialog => {
    dialog.close();
  });
  queue = [];
};

Пройдите все найденные экземпляры компонента van-dialog, вызвав метод Dialog во внутреннем кеше, и выполните его метод close.

Dialog.setDefaultOptions

Изменить конфигурацию диалога по умолчанию

метод вызова

Dialog.setDefaultOptions(options)

Метод реализации

Object.assign(Dialog.currentOptions, options);

Слияние входящей конфигурации по умолчанию с внутренней конфигурацией Dialog.currentOptions через Object.assign

Dialog.resetDefaultOptions

Восстановить конфигурацию диалога по умолчанию

метод вызова

Dialog.resetDefaultOptions()

Метод реализации

Dialog.resetDefaultOptions = () => {
  Dialog.currentOptions = { ...Dialog.defaultOptions };
};

Восстановите конфигурацию Dialog.currentOptions в Dialog.defaultOptions.

Суммировать

В этой статье объясняется базовое использование, расширенное использование, пользовательскую тему, пользовательское контент и т. Д. Всплывающую компонент в библиотеке компонентов Vant-OrioP и в дальнейшем изучается реализация всплывающего компонента компонента и диалогового окна в компоненте Vant-Oripe. Только путем тщательного понимания идей упаковки Framework UI мы можем еще больше модифицировать структуру для настройки различных компонентов, которые являются более сложными и более подходящими для требований проекта.От практического к продвижению к исходному коду исследованияИдея предоставляет вам еще один метод изучения исходного кода фреймворка.

Следующим шагом будет инкапсуляция серии практических случаев на компоненте рамы пули vant-weapp, с нетерпением жду вашего внимания и коллекции.

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

Первая говорящая сама по себе птица:ууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууноуэтомушт.ком/Джон IE-рубашка/положить в…

В блоге адрес:blog.lessing.online/

Автор гитхаб:github.com/johniexu