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();
    }
  }
}