Vant—van-field textarea 二次封装高度自适应并设置最大最小高度

最新推荐文章于 2025-04-25 18:45:28 发布

原创最新推荐文章于 2025-04-25 18:45:28 发布 · 1.2w 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vant #van-field #textarea #二次封装

Vant 专栏收录该内容

4 篇文章

订阅专栏

本文档介绍了如何在Vant中对van-field的textarea组件进行二次封装，创建了CommentField.vue组件，实现了高度自适应以及设定最大最小高度的功能。在使用页面上，该组件将提供更便捷的文本输入体验。

在这里插入图片描述

1、components新建CommentField.vue

<template>
  <div class="comment-field-wrap">
    <div class="comment-field__input">
      <van-field
        :value="value"
        placeholder="请输入留言内容"
        rows="1" // 显示为一行的高度
        type="textarea"
        autosize
        maxlength="100"
        @input="$emit('input', $event)" // v-model
      />
    </div>
    <button @click="publishComment">发表</button>
  </div>
</template>
<script>
import { Field } from 'vant'
import { publishComment } from '@api'
export default {
  components: {
    [Field.name]: Field
  },
  props: {
    value: { // 使用该组件时外部传入value值
      type: String,
      default: ''
    }
  },
  data() {
    return {
      params: {
        xxx
      }
    }
  },
  methods: {
    // 发表评论
    publishComment() {
      if (!this.value) {
        this.$toast({ message: '请输入留言内容' })
        return
      }
      publishComment({
        xxx
      }).then((res) => {
        this.$toast({
          type: 'success',
          message: '发表成功',
          onClose: () => {
            this.$emit('publish') // 点击发表按钮发送请求 成功后emit
          }
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.comment-field-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFEFF;
  padding: 14px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.09);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  .comment-field__input {
    flex: 1;
    display: flex;
    justify-content: space-between;
    border-radius: 21px;
    overflow: hidden;
    border: 1px solid @auxiliary-color-line;
    margin-right: 30px;
    /deep/ .van-field {
      width: 285px;
      border-radius: 17px;
      display: flex;
      align-items: center;
      padding: 8px 20px;
      background: @auxiliary-color-bg;
      &::after {
        content: none;
      }
      .van-field__control {
        max-height: 72px !important; // 设置最大高度 超出隐藏
      }
    }
  }
  button {
    font-size: @font-size-16;
    color: @font-color-5;
    background: none;
    border: none;
    flex-shrink: 0;
    padding: 0;
  }
}
</style>

2、使用页面

<comment-field
    v-model.trim="word" // trim清空前后空格
    @publish="publishWord" // 发表成功的回调
/>
data() {
    return {
        publishWord() {
        	xxx
            // 提交表单神马
        }    
    }
}