如何在this.$model.confirm点击确定之后还能弹出另一个弹出框，并且可以加入输入框

你可以在this.$model.confirm的确定回调中再次调用一个弹出框组件，并在该组件中添加一个输入框。具体实现可以参考以下代码：

this.$model.confirm('确定要执行该操作吗？', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  // 点击确定后执行的操作
  this.$model.prompt('请输入相关信息', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(({ value }) => {
    // 获取输入框的值并执行相关操作
    console.log('输入框的值为：', value)
  }).catch(() => {
    // 点击取消后执行的操作
  })
}).catch(() => {
  // 点击取消后执行的操作
})

在该代码中，当用户点击确定按钮后，会弹出一个带有输入框的新弹出框组件，用户可以在该组件中输入相关信息。当用户点击该组件中的确定按钮后，会执行相关操作并输出输入框中的值。如果用户点击取消按钮，则不会执行任何操作。

相关问题

<template> <div> <h2>注册</h2> <form @submit.prevent="register"> <div> <label for="username">用户名：</label> <input type="text" id="username" v-model="username"> </div> <div> <label for="password">密码：</label> <input type="password" id="password" v-model="password"> </div> <div> <label for="confirmPassword">确认密码：</label> <input type="password" id="confirmPassword" v-model="confirmPassword"> </div> <button type="submit">注册</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '', confirmPassword: '', } }, methods: { register() { // 调用后端API进行注册 this.$http.post('/api/register', { username: this.username, password: this.password, confirmPassword: this.confirmPassword, }).then(response => { // 注册成功：跳转到登录页 this.$router.push('/login'); }).catch(error => { // 注册失败：显示错误信息 alert('注册失败：' + error); }); } } } </script>

这是一个Vue.js的组件，实现了一个用户注册的页面。页面包括一个表单，其中包含用户名、密码和确认密码三个输入框，以及一个注册按钮。当用户在输入框中输入相应信息并点击注册按钮时，会调用后端API进行注册，如果注册成功则跳转到登录页，否则会弹出注册失败的提示框。该组件使用了axios库发送HTTP请求，使用了Vue-router进行路由跳转。

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组件中绑定输入框的值。