Каков стандартный способ добавления / удаления элементов в / из макета веб-компонента? - PullRequest
Новая
       121

Каков стандартный способ добавления / удаления элементов в / из макета веб-компонента?

0 голосов
/ 30 мая 2020

Я пишу веб-компоненты с использованием пакетов VueJS и vue-custom-element. Веб-компонент, который я создаю, представляет собой компоненты макета, содержащие несколько модулей, таких как chat , userList и так далее. Мне нужно добавить возможность добавлять / удалять элементы из макета во время выполнения .

Как это может быть?

<my-layout></my-layout>

Это простой макет. Как заставить работать эти кнопки?

enter image description here

Это текущий шаблон макета: 

<template>
  <div>
    <button>Add new chat module</button>
    <button>Add new users module</button>
    <div id="layout" class="row">
      <div class="col-sm">
        <my-chat></my-chat>
      </div>
      <div class="col-sm">
        <my-users></my-users>
      </div>
    </div>
    <block :menu="testMenu">Custom block</block>
  </div>
</template>

Это возможные решения:

  • Вызов метода внутри веб-компонента. (Кажется, это невозможно!)
    • document.getElementById("layout").addModule('chat')
  • Отправка конфигурации JSON как атрибута, содержащего список запрошенных модулей и их количество.
    • <my-layout conf='{"modules":{"chat":{"count":5}}"}'></my-layout>
  • Добавьте отдельный атрибут count для каждого модуля.
    • <my-layout chat-count="5" users-count="2"></my-layout>
...