uniapp 怎么实现点击发送按钮textatea不失去焦点 具体实现代码

可以使用自定义组件实现，在自定义组件中实现textarea的聚焦和失焦事件，从而避免在点击发送按钮之后自动失去焦点。以下是一个简单的自定义组件示例：

1. 在pages下创建一个custom-textarea文件夹，在该文件夹下创建textarea.vue组件。代码如下：

<template>
  <textarea
    ref="textarea"
    :value="textareaValue"
    @input="textareaInput"
    @blur="textareaBlur"
    @focus="textareaFocus"
    :placeholder="placeholder"
    :rows="rows"
    :disabled="disabled"
    :maxlength="maxlength"
    :autofocus="autofocus"
    :style="{ width: width + 'px', height: height + 'px' }"
  ></textarea>
</template>

<script>
export default {
  name: 'custom-textarea',
  props: {
    value: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    rows: {
      type: Number,
      default: 3,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    maxlength: {
      type: [Number, String],
      default: 140,
    },
    width: {
      type: [Number, String],
      default: '100%',
    },
    height: {
      type: [Number, String],
      default: 80,
    },
    autofocus: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      textareaValue: '',
    }
  },
  mounted() {
    this.textareaValue = this.value
    if (this.autofocus) {
      this.focus()
    }
  },
  methods: {
    textareaInput(e) {
      this.textareaValue = e.target.value
      this.$emit('input', e.target.value)
    },
    textareaFocus() {
      this.$emit('focus')
    },
    textareaBlur() {
      this.$emit('blur', this.textareaValue)
    },
    focus() {
      this.$refs.textarea.focus()
    },
    blur() {
      this.$refs.textarea.blur()
    },
  },
}
</script>

<style scoped>
textarea {
  border: none;
  outline: none;
  resize: none;
  font-size: 16px;
  line-height: 28px;
}
</style>

2. 在需要使用该组件的页面中引入该组件，并在发送按钮的点击事件中使用`$refs`调用该组件的`blur`方法，从而避免失去焦点。例如：

<template>
  <view class="container">
    <custom-textarea
      v-model="textareaValue"
      :placeholder="placeholder"
      :rows="3"
      :width="300"
      :maxlength="140"
      :autofocus="true"
    ></custom-textarea>
    <button class="send-btn" @click="handleSend">发送</button>
  </view>
</template>

<script>
import CustomTextarea from '@/components/custom-textarea'

export default {
  components: {
    CustomTextarea,
  },
  data() {
    return {
      textareaValue: '',
      placeholder: '请输入内容',
    }
  },
  methods: {
    handleSend() {
      // 发送按钮点击事件
      this.$refs.textarea.blur() // 调用自定义组件的blur方法，避免失去焦点
      // 其他处理逻辑
    },
  },
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.send-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #409eff;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
</style>