Ember.js 我如何结合灰烬引导和灰烬自动调整大小？

我想将属性

autoresize=true

添加到一个textarea，该textarea是为了使用而绘制的

，此属性未绑定，因此我无法简单地将其添加到模板中

我试着像这样操纵控件：

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

但这只适用于类名，而不适用于属性

---

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

有两种方法

这两个示例都假定安装了

ember引导

和

ember自动调整大小

1.特别方法：无需配置，但使用不太方便 使用上述“自定义控件”

下面是一个例子：

演示：

2.健壮的方法：需要配置，但使用更方便 覆盖

下面是经典项目结构的路径。对于POD或模块统一，路径将不同。

在该文件中，执行的操作，但在Ember Bootstrap的textarea组件之上：

然后您可以正常调用引导textarea组件：

演示：

---

以上代码将启用对所有Ember引导文本区域的自动调整大小。如果需要粒度控制，还可以从组件定义中删除

autoresize:true

。这将允许您通过将

autoresize=true

传递到

{form.element}}

组件调用中来单独启用自动调整大小。

看起来像是同时使用

ember bootstrap

和

ember autoresize将不起作用，因为即使添加
ember autoresize
mixin也不会自动调整textarea的大小，尽管mixin被成功应用，正如
ember autoresize
添加的类所证明的那样

也许两个插件都试图手动填充textarea会导致冲突。也许后者与前者在结合Ember 3.11时不兼容

或者，您可以通过对输入操作
数据最小行
，一起破解解决方案，如下所示

为简洁起见引用：

// 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。也可以使用它。
第一个实现非常棒，但是
form.element
已经添加了表单元素，因此您的实现将在表单元素中添加表单元素（例如，textarea中的textarea）。第二个选择看起来也不错，虽然对我来说是陌生的。但是，它会导致“未能创建'component:bs form/element/control/textarea'的实例。很可能是定义不正确的类或无效的模块导出。”因为我不清楚这应该如何工作，所以我无法自行修复此问题，即使错误很小。
自动调整大小
而不使用
。js
可以工作。不幸的是，实际的mixin没有。您还可以使用自定义的
textarea autoresize
控件类型扩展Ember引导。可能会给你一些启发。这个评论线索是。你不需要继承任何东西，除了值。为了让textarea尊重
formLayout
，它只需要
class=“form control”
。我相应地更新了答案。“看起来一起使用ember引导和ember自动调整大小将不起作用”——这是错误的。另一个答案有一个有效的演示。“Bootstrap以任何方式添加jQuery。”——这是错误的。现代引导不依赖于jQuery，余烬引导也不依赖于jQuery。
app/components/bs-form/element/control/textarea.js

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;
    }
  })
});

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

// 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;
    });