xiehanhan-input-tags-enhanced: Введите перевод строки для создания метки и добавьте атрибуты flatContent и pinArray.

inputTags: расширенная версия

Введение

Ввод каретки генерирует теги и добавляет свойства flatContent и pinArray.

Использование

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

Добавление свойств openFlatContent и flatContent: при использовании оригинального компонента, если на одной странице есть несколько контейнеров (input) с inputTags, можно гарантировать, что каждый тег в содержимом каждого input не повторяется, но нельзя гарантировать, что теги в содержимом нескольких inputs не повторяются.
- Использование: просто установите openFlatContent в true во время рендеринга.
- openFlatContent имеет значение true, представляющее использование flatContent, теги в содержимом inputs с установленным значением true для openFlatContent не могут повторяться.
- В противном случае это означает, что flatContent не используется, и теги могут повторяться с другими inputs;
- Вы можете получить flatContent через inputTags.config.flatContent.
Добавление свойства pinArray: при использовании оригинала все сгенерированные теги имеют кнопки закрытия, но иногда требуется включить некоторый встроенный контент.
- Просто добавьте необходимый встроенный контент в pinArray при рендеринге inputTags, и каждый input будет иметь свой собственный независимый pinArray.

Эффект использования

Рендеринг кода

Первоначальная загрузка

Первоначальная загрузка загружает теги из содержимого input.

Первоначальная загрузка

Демонстрация эффекта pinArray

В приведенном выше коде рендеринга элементы pinArray второго уровня содержат «栋» и «号楼», поэтому теги не имеют кнопок закрытия; в то время как «测试栋» не входит в их число, поэтому у тегов есть кнопки закрытия.

Демонстрация эффекта pinArray

Демонстрация эффекта flatContent

Как показано в приведенном выше коде рендеринга, мы установили значение openFlatContent равным true для первого и третьего уровней структуры, а значение для второго уровня — false. Поэтому, когда мы уже создали тег «测试期» в первом уровне, происходит следующее:

Во втором уровне input при вводе «тестирования периода» и нажатии Enter создается тег.

В третьем уровне input при вводе «тестирования периода» и нажатии Enter тег не создается.

Демонстрация эффекта flatContent

Посетите Pages, чтобы попробовать

https://xiehanhan.gitee.io/input-tags-enhanced

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

Для ознакомления с инструкциями по использованию компонентов и примерами см. https://gitee.com/xiehanhan/input-tags-enhanced/tree/master/example

Быстрое начало работы HTML:

                        <form class="layui-form">
                          <div class="layui-field-box">
                            <div class="layui-form-item" style="width: 90%;margin-left: 5%">
                                <label class="layui-form-label mylabel" style="font-size: 15px;color: #ff6436"><i
                                        class="iconfont"></i> 一级结构</label>
                                <div class="layui-input-block tags">
                                    <input class="layui-input " type="text" id="phase" placeholder="回车生成标签" autocomplete="off"/>
                                </div>
                            </div>
                        </div>
                        <div class="layui-field-box">
                            <div class="layui-form-item" style="width: 90%;margin-left: 5%">
                                <label class="layui-form-label mylabel" style="font-size: 15px;color: #dca300"><i
                                        class="iconfont"></i> 二级结构</label>
                                <div class="layui-input-блок tags">
                                    <input class="layui-input" type="text" id="building" placeholder="回车生成标签" autocomplete="off"/>
                                </div>
                            </div>
                        </div>
                        <div class="layui-field-box">
                            <div class="layui-form-item" style="width: 90%;margin-left: 5%">
                                <label class="layui-form-label mylabel" style="font-size: 15px;color: #63bf00"><i
                                        class="iconfont"></i> 三级结构</label>
                                <div class="layui-input-block tags">
                                    <input class="layui-input" type="text" id="unit" placeholder="回车生成标签" autocomplete="off"/>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                         <div class="layui-input-block">
                            <button class="layui-btn" type="button" id="test">测试</button>
                         </div>
                        </div>
                     </form>

JS:

layui.use(['inputTags','form'], function () {
    var inputTags = layui.inputTags;
    $("#test").on("click",function (){

*Примечание: предоставленный текст не содержит кода на каком-либо языке программирования, гиперссылок, специальных тегов форматирования в markdown, html, yaml, json, plantuml и других.* ```
console.log(JSON.stringify(structShield))
    console.log(inputTags.flatContent)
})

var structShield={
    phase:[],
    building:[],
    unit:[]
}
inputTags.render({
    elem:'#phase',
    content: ['期'],
    pinArray: ['期'],
    openFlatContent: true,
    aldaBtn: false,
    done: function(){
        structShield.phase=this.content;
    }
})
inputTags.render({
    elem:'#building',
    content: ['栋'],
    pinArray: ['栋','号楼'],
    openFlatContent: false,
    aldaBtn: false,
    done: function(){
        structShield.building=this.content;
    }
})
inputTags.render({
    elem:'#unit',
    content: ['单元'],
    pinArray: ['单元'],
    openFlatContent: true,
    aldaBtn: false,
    done: function(){
        structShield.unit=this.content;
    }
})
});

Вклад в проект

Форкните этот репозиторий.
Создайте ветку Feat_xxx.
Отправьте код.
Создайте Pull Request.

OSCHINA-MIRROR/xiehanhan-input-tags-enhanced

Введение

Использование

Эффект использования

Рендеринг кода

Первоначальная загрузка

Демонстрация эффекта pinArray

Демонстрация эффекта flatContent

Посетите Pages, чтобы попробовать

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

Вклад в проект

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/xiehanhan-input-tags-enhanced .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Введение

Использование

Эффект использования

Рендеринг кода

Первоначальная загрузка

Демонстрация эффекта pinArray

Демонстрация эффекта flatContent

Посетите Pages, чтобы попробовать

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

Вклад в проект

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/xiehanhan-input-tags-enhanced