Введение

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

1. Выбор определённого уровня: можно выбрать провинцию, город, район или уезд по умолчанию выбирается провинция;
2. Поддержка редактирования и отображения выбранных данных: выбранные данные могут быть заданы заранее, и компонент автоматически отметит их при отображении;
3. Поддержка исключения выбора: можно указать, какие области следует исключить из выбора, и эти области будут скрыты при отображении компонента;
4. Механизм многоуровневого взаимодействия: выбор узла области на одном уровне автоматически сопоставляет соответствующие родительские и дочерние узлы и динамически отображает количество выбранных областей;
5. Минимизация возвращаемых результатов выбора: возвращается только необходимый код области.

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

Онлайн-пример
Пожалуйста, посетите: https://zhou-wannian.gitee.io/layui-areaselect/.

Архитектура программного обеспечения

1. В настоящее время компонент использует данные JSON в качестве основы для отображения областей, но можно заменить их данными из интерфейса бэкенда, учитывая необходимость адаптации формата данных. Также можно изменить исходный код для соответствия формату областей текущего проекта.
2. Учитывая, что область сама по себе может быть абстрагирована как структура древовидного узла, код был разработан с использованием модели обновления представления, управляемой данными, с основной идеей использования API DOM JavaScript.
3. Автор является разработчиком Java на стороне сервера, поэтому качество кода компонента не гарантировано, а только функциональность. Если у вас есть предложения, пожалуйста, дайте мне знать.
4. Планируется выпустить дополнительные версии, такие как версия, не зависящая от других фреймворков, и версия Vue.

Руководство по установке

1. Импортируйте этот проект в vscode и запустите index.html через live server, чтобы увидеть эффект.
2. Текущая версия использует layui, и если ваш собственный проект также основан на layui, вы можете легко интегрировать его. Другие типы проектов также могут быть адаптированы для использования.

Использование
Подробности см. в index.js. После импорта плагина вызовите метод select с соответствующими параметрами. Значения и форматы параметров см. в area.js и index.js. Если у вас возникли проблемы с использованием, пожалуйста, оставьте комментарий или отправьте электронное письмо.

Скриншоты

• Выбранное значение отображается (https://images.gitee.com/uploads/images/2021/0707/152002_71b5c7f0_8572136.png «1.png»);
• Все выбрано (https://images.gitee.com/uploads/images/2021/0707/152019_392872c6_8572136.png «2.png»);
• Ничего не выбрано (https://images.gitee.com/uploads/images/2021/0707/152031_3c13c0e8_8572136.png «3.png»);
• Выбор дочерней области (https://images.gitee.com/uploads/images/2021/0720/121541_bfbba305_8572136.png QQ截图20210720121317.png).