Moonofweisheng / wot-design-uni

一个基于Vue3+TS开发的uni-app组件库,提供70+高质量组件,支持暗黑模式、国际化和自定义主题。
https://wot-design-uni.pages.dev
MIT License
631 stars 92 forks source link

[Bug 上报] wd-textarea使用style.height设置高度之后出现错位 #387

Open JerryM0623 opened 1 week ago

JerryM0623 commented 1 week ago

Wot Design Uni 版本号

1.2.26、1.2.28

平台

h5

复现Demo地址

https://github.com/JerryM0623/wd-issue-demo

重现步骤

编写以下代码到项目中,然后运行至h5模式

<wd-form ref="form" :model="formModel">
      <wd-cell-group border>
        <wd-input
          type="text"
          label="功德芳名"
          label-width="100px"
          clearable
          v-model="formModel.name"
          placeholder="请输入用户名"
        />
        <wd-input
          type="digit"
          label="手机号码"
          label-width="100px"
          clearable
          v-model="formModel.tel"
          placeholder="请输入手机号码"
          :maxlength="11"
        />
        <wd-textarea
          label="个人祈愿"
          label-width="100px"
          v-model="formModel.wish"
          :maxlength="30"
          clearable
          show-word-limit
          center
          placeholder="请输入个人祈愿"
          style="height: 200rpx"
        />
      </wd-cell-group>
      <view class="footer">
        <wd-button custom-class="submit-button" :round="false" @click="handleSubmit" block>
          提交
        </wd-button>
      </view>
    </wd-form>

const formModel = reactive({
  name: '',
  tel: '',
  wish: '保佑我全家身体健康,万事如意!',
})
const handleSubmit = () => {
  console.log('submit')
}

.submit-button {
  background: #b8741a !important;
}

期望的结果是什么?

修复之后的textarea文本框随着外层的高度改变而改变

实际的结果是什么?

image 运行之后页面元素错位

环境信息

使用 unibest 作为模板框架进行开发 运行环境:微信开发者工具模拟器内、Chrome浏览器内

其他补充信息

image 我怀疑是这个150px的css导致的 不知道能不能提供帮助

为什么有两个版本号呢? unibest默认是1.2.26版本,我发现新出了1.2.28版本我就更新看看能不能解决这个bug 所以两个版本我都安装我都运行了都是一样的错位