[t-textarea] autosize不起作用

[flyonok]

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

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