[t-textarea] autosize不起作用

tdesign-miniprogram 版本

1.1.14

重现链接

https://tdesign.tencent.com/miniprogram/components/textarea

重现步骤

参考上面步骤中的自动增高多行文本例子改成一个组件multiLineText：
index.js的代码如下：

// pages/components/multiLineText/index.js
Component({
  lifetimes: {
    attached: function () {
      
      // console.log('Component multiLineText placeholder:', this.properties.placeholder);
      console.log('Component multiLineText label', this.properties.label);
      console.log('Component multiLineText lineNumber:', this.properties.lineNumber);
      const {
        autosize
      } = this.data;
      autosize.minHeight = autosize.minHeight * this.properties.lineNumber;
      this.setData({
        autosize: autosize
      });
      // console.log('autosize:', this.data.autosize);
    },
    detached: function() {
      // console.log('detached...!', this.properties.label);
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {
    label: {
      type: String,
      value: '标签文本'
    },
    inputvalue: {
      type: Object,
      value: {
        id: '',
        data: {
          text: '我是一个兵!'
        },
        type: 'multiparagraph'
      }
    },
    placeholder: {
      type: String,
      value: '请输入文字'
    },
    /**
     * 输入框行数
     */
    lineNumber: {
      type: Number,
      value: 1
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    style: 'border-radius: 16rpx;',
    autosize: {
      maxHeight: 144,
      minHeight: 24,
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleChange(e) {
      const content = e.detail.value;
      // console.log('multiLine chaged：', content);
      let multiparacontent = this.properties['inputvalue'];
      if (content.length <= 0) {
        let title = this.properties.label;
        this.triggerEvent('valueEmpty', title);
      } else {
        multiparacontent.data.text = content;

        // let id = this.properties.inputvalue.id;
        if (multiparacontent.id.length === 0) {
          multiparacontent.id = util.getid();
        }
        // let type = this.properties.inputvalue.type;
        if (!multiparacontent.type || multiparacontent.type.length === 0) {
          multiparacontent.type = 'multiparagraph';
        }
        const dataObj = {};
        dataObj[this.properties.label] = [multiparacontent];
        this.triggerEvent('valueChange', dataObj);
      }
    }
  }
})

对应的wxml代码如下：

<view class="multiparagraph-content">
  <view class="multiparagraph-content__label"> {{label}} </view>
  <t-textarea
  value="{{inputvalue.data.text}}"
  placeholder="{{placeholder}}"
  disableDefaultPadding="{{true}}"
  bind:change="handleChange"
  style="{{style}}"
  autosize="{{autosize}}"/>
</view>

对应的json：

{
  "component": true,
  "usingComponents": {}
}

对应的wxss如下：

.external-class {
  height: 128rpx;
}

.multiparagraph-content {
  margin: 0 32rpx;
}

.multiparagraph-content {
  /* --td-input-vertical-padding: 24rpx; */

  /* background-color: #e7e8e8; */
  /* padding: 16rpx 16rpx 16rpx; */
  margin: 0 32rpx;
}

.multiparagraph-content__label {
  color: rgb(72 71 71 / 90%);
  font-size: 28rpx;
  line-height: 40rpx;
  margin: 16rpx 8rpx;
}

page {
  --td-font-size-m:28rpx;
}

调用代码块，multiLineText就是我改的一个组件名：

<view class="button-row">

  <t-row>
    <t-col span="4">
      <view class="button-view">
        <t-button size="small" class="button-item" bindtap="onPrevPage" disabled="{{currentStorageboxIndex <= 0}}">上一页</t-button>
      </view>
    </t-col>
    <t-col span="7" offset="4">
      <view class="button-text-view">
        <text>{{storageboxName}}</text>
      </view>
    </t-col>
    <t-col span="4" offset="3">
      <view class="button-view">
        <t-button size="small" class="button-item" bindtap="onNextPage" disabled="{{currentStorageboxIndex >= totalStoragebox -1}}">下一页</t-button>
      </view>
    </t-col>
  </t-row>
</view>
<view class="page-content">
  <block wx:for="{{editorjsData}}" wx:key="index">
    <paragraph inputvalue='{{item.value.editorjsData[0]}}' label='{{item.value.title}}' placeholder='{{item.value.placeholder}}' bind:valueChange='onValueChange' bind:valueEmpty="onValueIsEmpty" wx:if="{{item.value.editorjsData[0].type==='paragraph'}}" />
    <header inputvalue='{{item.value.editorjsData[0]}}' label='{{item.value.title}}' placeholder='{{item.value.placeholder}}' bind:valueChange='onValueChange' bind:valueEmpty="onValueIsEmpty" wx:if="{{item.value.editorjsData[0].type==='header'}}" />
    <singleImage imageData='{{item.value.editorjsData[0].data.url? [item.value.editorjsData[0].data]:[]}}' title='{{item.value.title}}' bind:valueChange='onValueChange' bind:singleImageRemove="onSingleImageRemove" wx:if="{{item.value.editorjsData[0].type==='image'}}" />
    <multiImage imageDataObj='{{item.value.editorjsData}}' title="{{item.value.title}}" bind:valueChange='onValueChange' bind:valueEmpty="onValueIsEmpty" wx:if="{{item.value.editorjsData.type==='carousel'}}" />
    <multiLineText inputvalue='{{item.value.editorjsData[0]}}' label='{{item.value.title}}' placeholder='{{item.value.placeholder}}' lineNumber="{{item.value.editorjsData[0].lineNumber}}" wx:if="{{item.value.editorjsData[0].type==='multiparagraph'}}" bind:valueChange='onValueChange' bind:valueEmpty="onValueIsEmpty" />
    <!-- <banner/> -->
  </block>

</view>

期望结果

实际结果

基础库版本

No response

补充说明

组件中的attached方法这段代码：

attached: function () {
      
      // console.log('Component multiLineText placeholder:', this.properties.placeholder);
      console.log('Component multiLineText label', this.properties.label);
      console.log('Component multiLineText lineNumber:', this.properties.lineNumber);
      const {
        autosize
      } = this.data;
      autosize.minHeight = autosize.minHeight * this.properties.lineNumber;
      this.setData({
        autosize: autosize
      });
      // console.log('autosize:', this.data.autosize);
    },

有时候起作用，有时候不起作用，特别是在同一个页面多次使用的时候

Start with the attached index.js lifecycle code and the t-textarea autosize example at the linked reproduction page; compare how autosize is passed in the WXML and updated when multiple multiLineText instances are used. Reproduce the intermittent behavior with the supplied component files, then verify that autosize consistently applies the requested lineNumber and matches the expected result.