1

我想将该属性添加到使用ember-bootstrapautoresize=true绘制的 textarea 中，以便使用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}}

但这仅适用于类名，不适用于属性。

实现我想要做的最简单的方法是什么？

4

2 回答 2

2

有两种方法可以做到这一点。

这两个示例都假定ember-bootstrap并ember-autoresize已安装。

1. Ad-hoc方式：无需配置，但使用不太方便

使用此处描述的“自定义控件” 。

这是一个例子： 

{{#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 组件。

这是经典项目结构的路径。对于 Pod 或 Module Unification，路径会有所不同。 

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

在该文件中，执行autoresize textarea 组件所做的事情，但在 Ember-Bootstrap 的 textarea 组件之上： 

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 textarea组件了： 

{{#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}}组件调用来单独启用自动调整大小。

于 2019-06-13T15:30:47.120 回答
-1

看起来使用ember-bootstrapand ember-autoresizetogether将不起作用，因为即使添加ember-autoresizemixin 也不会自动调整 textarea 的大小，尽管 mixin 已成功应用，证明了添加的类ember-autoresize。

也许两个插件都试图操纵 textarea 导致冲突。也许后者与前者结合 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。还不如用它。

于 2019-06-14T10:13:57.933 回答