1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/dreamer365-iPicker

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

iPicker.create("#target", {

data: { source: Promise.resolve( $.getJSON( "area.json" ) ), }, theme: "cascader"* });

// panel 模式 iPicker.create("#target", {

data: { source: Promise.resolve( $.getJSON( "area.json" ) ) }, theme: "panel"* });


<h3 id="d">Установка значения по умолчанию</h3>

```javascript
**iPicker.create("#target", {**

*data: {*
    *source: Promise.resolve( $.getJSON( "area.json" ) )*
  },
*selected: [ "230000", "230100", "230103" ],*
*selectedCallback: () => console.log( "Значение по умолчанию установлено успешно" )**
});

Отслеживание изменений выбранного элемента

**iPicker.create("#target", {**

*data: {*
    *source: Promise.resolve( $.getJSON( "area.json" ) )*
  },
*onSelect: ( code, name, all ) => {***
        
    // Все параметры являются массивами*
    *console.log( code );*
    *console.log( name );*
    *console.log( all );*
  }**
});

Настройка уровня отображения

**iPicker.create("#target", {**

*data: {*
    *source: Promise.resolve( $.getJSON( "area.json" ) )*
  },
*level: 2**
});

Отключение уровней отображения по умолчанию

// Отключить все уровни*
**iPicker.create("#target", {**

*data: {*
    *source: Promise.resolve( $.getJSON( "area.json" ) )*
  },
*disabled: true**
});

// Отключить указанный уровень, только для select режима*
**iPicker.create("#target", {**

*data: {*
    *source: Promise.resolve( $.getJSON( "area.json" ) )*
  },
*disabled: [ 2, 3 ]**
});

Отключение элементов по умолчанию

// Отключить все элементы*
**// iPicker.create("#target", {**

*// data: {*
*// source: Promise.resolve( $.getJSON( "area.json" ) )*
*// },*
*// disabledItem: true**
*// });*

// Отключить указанные элементы*
**iPicker.create("#target", {**

*data: {*
    *source: Promise.resolve( $.getJSON( "area.json" ) )*
  },
*disabledItem: [ "230000", "230100", "230103" ]**
});

Методы компонента

iPicker предоставляет 10 методов:

// 01. Создание компонента*
*const picker = iPicker.create( "#target", { ... } );*

// 02. Создание компонента (сокращённая запись)*
*const picker = iPicker( "#target", { ... } );*

// 03. Установка выбранного элемента*
**iPicker.set( picker, [ "230000", "230100", "230103" ] );**

// 04. Получение выбранного элемента (первые два метода эквивалентны)*
**iPicker.get( picker );**
**iPicker.get( picker, "code" );**
**iPicker.get( picker, "name" );**
**iPicker.get( picker, "all" );**

// 05. Очистка выбранного элемента*
**iPicker.clear( picker );**

// 06. Сброс (восстановление исходного состояния)*
**iPicker.reset( picker );**

// 07. Уничтожение компонента*
**iPicker.destroy( picker );**

// 08. Включение всех уровней*
**iPicker.enabled( picker, true );**

// 09. Включение указанного уровня, диапазон: 1 - 3, только для режима select*
**iPicker.enabled( picker, [ 2, 3 ] );**
**iPicker.enabled( picker, 3 );**

// 10. Отключение всех уровней*
**iPicker.disabled( picker, true );**

// 11. Отключение указанного уровня, диапазон: 1 - 3, только для режима select*
**iPicker.disabled( picker, [ 2, 3 ] );**
**iPicker.disabled( picker, 3 );**

// 12. Включение всех элементов*
**iPicker.enabledItem( picker, true );**

// 13. Включение указанных элементов*
**iPicker.enabledItem( picker, [ "230000" ] );**

// 14. Отключение всех элементов*
**iPicker.disabledItem( picker, true );**

// 15. Отключение указанных элементов*
**iPicker.disabledItem( picker, [ "230000" ] );**

Параметры конфигурации

**radius** — значение радиуса скругления углов в поле и выпадающем списке, в пикселях.

maxHeight — максимальная высота выпадающего списка, в пикселях.

disabled — уровень отключения, при значении true отключаются все уровни, при числовом значении или массиве отключаются указанные уровни.

disabledItem — отключение указанного региона, при значении true отключаются все регионы, при массиве отключается указанный регион (передаётся административный код).

selected — значения по умолчанию (передаётся административный код).

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

placeholder — текст подсказки в поле, для темы select это массив, а для тем cascader и panel — строка.

separator — разделитель текста в результатах для тем cascader и panel.

onlyShowLastLevel — для тем cascader и panel показывает только последний уровень выбранных данных в поле.

clearable — показывает ли кнопку очистки справа от поля (отображается при наведении курсора мыши на поле).

strict — режим строгой проверки.

icon — значок в конце поля, возможные значения: triangle, arrow.

onClear — функция, выполняемая при нажатии кнопки очистки.

onSelect — функция, выполняемая при выборе региона, имеет три параметра: административный код, название региона, набор кодов и названий.


Далее идёт текст, не относящийся к запросу. В нём нет технических терминов, поэтому он не переводился.

Параметр Описание Тип Значение по умолчанию
*theme* Режим темы, доступные значения: select, cascader, panel String select
*data* Настройка источника данных, включает три свойства:*
*1. props*: сопоставление свойств данных (доступно только при использовании пользовательского источника данных)*
*2. source*: тип источника данных (Promise используется для локальных источников данных; Function используется для пользовательских источников данных)*
*3. when*: функция, выполняемая после успешной загрузки источника данных. Функция принимает два параметра: исходные данные и уровень данных. Уровень данных применим только к пользовательским источникам данных.* *Функция должна возвращать обработанные данные.*
Object {
 props: {
  code: "code",
  name: "name"
}*,
*source: null*,
*when: null*
}**
*level* Отображаемый уровень, доступные значения: 1, 2, 3 Number 3
*width* Ширина окна отображения, может быть задана как число в пикселях или как процентное значение Number / String 200
*height* Высота окна отображения в пикселях Number 34
Chrome Firefox Opera Edge Safari IE
60+ 60+ 60+ 17+ 12+ не поддерживается

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

Вы можете оставить комментарий после Вход в систему

Введение

Компонент с многоуровневым интерактивным взаимодействием между провинциями, городами и районами, разработанный на нативном JavaScript. Развернуть Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

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

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/dreamer365-iPicker.git
git@api.gitlife.ru:oschina-mirror/dreamer365-iPicker.git
oschina-mirror
dreamer365-iPicker
dreamer365-iPicker
master