vant——可输入文字的弹出框

想实现点击按钮，出现一个弹出框，可以进行输入。并且有确定和取消事件。

在我们需要操作的VUE界面上，放置控件：

<!--这是一个按钮，赋予click事件-->
 <van-button type="default" :icon="require ('../../assets/main/approving.png') " @click="onClick">正在审批</van-button>
<!--弹出框，赋予chargeBtn事件-->
     <van-dialog
    v-model="show"
    title="弹出框"
    show-cancel-button
    :beforeClose="chargeBtn"
  >
<!--输入框-->
    <van-field
      v-model="message"
      rows="1"
      autosize
      label="留言"
      type="textarea"
      placeholder="请输入留言"
    />
  </van-dialog>

<script>
import Vue from 'vue';
import { Dialog,Field } from 'vant';
Vue.use(Dialog);
Vue.use(Field);
export default {
  data() {
    return {
      show: false,
      message: '',
   };
  },
  methods: {
    onClick() {
//当点击按钮时，显示弹出框
       this.show = true;
    },
    chargeBtn(action, done) {//确认or取消
      if (action === 'cancel') {//取消按钮
        done();
      } else if (action === 'confirm') {//确定按钮
          //向后端传值并关闭dialog弹出框
            this.show = false;
          };
        this.message='';
        done();
    }
  }
}