Как я могу объединить ember-bootstrap и ember-autoizeize? - PullRequest
Новая
       46

Как я могу объединить ember-bootstrap и ember-autoizeize?

1 голос
/ 13 июня 2019

Я хотел бы добавить атрибут autoresize=true к текстовой области, которая рисуется с помощью ember-bootstrap , чтобы использовать ember-autoresize .

Как вы можете видеть здесь , этот атрибут не связан, поэтому я не могу просто добавить его в свой шаблон.

Я пытался манипулировать данным контролем так: 

{{#bs-form formLayout="vertical" model=email as |form|}}
    {{#form.element controlType="textarea" property="textEdit" as |el|}}
        {{el.control autoresize=true}}
    {{/form.element}}
{{/bs-form}}

Но это работает только для classNames, но не для атрибутов.

Какой самый простой способ достижения того, что я пытаюсь сделать?

Ответы [ 2 ]

2 голосов
/ 13 июня 2019

Есть два способа сделать это.

В обоих примерах предполагается, что установлены ember-bootstrap и ember-autoresize.

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

Используйте «Пользовательские элементы управления», описанные здесь .

Вот пример: 

{{#bs-form formLayout="vertical" model=email as |form|}}
    {{#form.element controlType="textarea" property="textEdit" as |el|}}
        {{textarea autoresize=true id=el.id value=el.value class="form-control"}}
    {{/form.element}}
{{/bs-form}}

Демонстрация: https://ember -twiddle.com / 4860f5d660dceadc804495d2720f69f6? OpenFiles = templates.application.hbs% 2C

2. Надежный подход: необходима конфигурация, но удобнее в использовании

Переопределить оригинальный компонент textarea .

Вот путь к классической структуре проекта. Для модулей или модулей, путь будет другим. 

app/components/bs-form/element/control/textarea.js

Внутри этого файла выполните то, что делает компонент textarea с автоматическим изменением размера , но поверх компонента textarea Ember-Bootstrap: 

import BootstrapTextareaComponent from 'ember-bootstrap/components/bs-form/element/control/textarea';
import AutoResizeMixin from 'ember-autoresize/mixins/autoresize';
import { computed, get } from '@ember/object';
import { isEmpty, isNone } from '@ember/utils'; 

export default BootstrapTextareaComponent.extend(AutoResizeMixin, {
  autoresize: true,
  shouldResizeHeight: true,
  significantWhitespace: true,
  autoResizeText: computed('value', 'placeholder', {
    get() {
      var placeholder = get(this, 'placeholder');
      var value = get(this, 'value');
      var fillChar = '@';

      if (isEmpty(value)) {
        return isEmpty(placeholder) ? fillChar : placeholder + fillChar;
      }

      if (isNone(value)) {
        value = '';
      }

      return value + fillChar;
    }
  })
});

Затем вы можете вызвать компонент текстовой области Bootstrap в обычном режиме: 

{{#bs-form model=this formLayout="vertical" as |form|}}
  {{form.element label="Inline" placeholder="Enter description..." property="appName" controlType="textarea"}}
{{/bs-form}}

Демонстрация: https://ember -twiddle.com / 693209c5fd4c2eeae765827f42dbd635? OpenFiles = templates.application.hbs% 2C

Приведенный выше код активирует автоматическое изменение размера для всех текстовых полей Ember-Bootstrap. Если вам нужен детальный контроль, вы также можете удалить autoresize: true из определения компонента. Это позволит вам включить автоматическое изменение размера по отдельности, передав autoresize=true в вызов компонента {{form.element}}.

0 голосов
/ 14 июня 2019

Похоже, что использование ember-bootstrap и ember-autoresize вместе не сработает , потому что даже добавление миксина ember-autoresize не приводит к автоматическому изменению размера текстовой области, хотя миксин применяется успешно, о чем свидетельствует добавленный классby ember-autoresize.

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

В качестве альтернативы , вы можете взломать решение вместе, манипулируя data-min-rows на входе, например, codepen jqueryпример .

Для краткости: 

// Applied globally on all textareas with the "autoExpand" class
$(document)
    .one('focus.autoExpand', 'textarea.autoExpand', function(){
        var savedValue = this.value;
        this.value = '';
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
    })
    .on('input.autoExpand', 'textarea.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0, rows;
        this.rows = minRows;
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
        this.rows = minRows + rows;
    });

Bootstrap добавляет jQuery в любом случае.Можно и использовать.

...