uniapp 弹出textarea输入框

在uni-app中可以使用uni.showModal()方法配合自定义组件的方式来实现弹出textarea输入框的效果。

首先，创建一个自定义组件，例如命名为MyTextarea：

<template>
  <view class="my-textarea">
    <textarea v-model="content" :placeholder="placeholder"></textarea>
  </view>
</template>

<script>
  export default {
    props: {
      placeholder: {
        type: String,
        default: '请输入...'
      }
    },
    data () {
      return {
        content: ''
      }
    }
  }
</script>

<style>
  .my-textarea {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 20rpx;
  }

  textarea {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    resize: none;
    font-size: 32rpx;
  }
</style>

该组件包含一个textarea输入框和一个placeholder属性用于设置提示文本。

然后，在需要弹出输入框的页面中，可以使用uni.showModal()方法来展示自定义组件MyTextarea：

<template>
  <view class="container">
    <button @click="showTextarea">弹出输入框</button>
  </view>
</template>

<script>
  import MyTextarea from '@/components/MyTextarea'

  export default {
    components: {
      MyTextarea
    },
    methods: {
      showTextarea () {
        uni.showModal({
          title: '请输入内容',
          content: '',
          showCancel: false,
          confirmText: '确定',
          cancelText: '取消',
          success: (res) => {
            if (res.confirm) {
              console.log(this.$refs.textarea.content)
            }
          },
          fail: () => {},
          complete: () => {},
          maskClosable: false,
          customClass: '',
          component: this.$refs.textarea.$el // 弹出自定义组件MyTextarea
        })
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  button {
    padding: 20rpx;
    font-size: 32rpx;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    outline: none;
  }
</style>

上面的代码中，当点击按钮时，会调用showTextarea方法，该方法使用uni.showModal()方法弹出一个模态框，并设置component属性为MyTextarea组件的实例，从而展示出输入框。

最后，在MyTextarea组件中，可以使用v-model指令来绑定输入框的值，例如在一个方法中获取输入框的值：

console.log(this.$refs.textarea.content)

其中，this.$refs.textarea指向组件MyTextarea的实例，content则是MyTextarea组件中绑定输入框的值。