如何使用vant2中的弹出框组件

最新推荐文章于 2024-07-15 12:14:46 发布

嗷呜~小脑斧

最新推荐文章于 2024-07-15 12:14:46 发布

阅读量1.8k

点赞数 2

文章标签：前端 html vue.js javascript vue

本文链接：https://blog.csdn.net/weixin_46939404/article/details/127331236

版权

一、在html中：我是用在多行输入的文本框<textarea></textarea>中，给输入框绑定了一个点击事件，我绑定的是点击Esc键出现弹窗。

  <div class="container">
    <div class="TextBox">

      <textarea
        @keyup.esc="KeyUpEsc"
        :style="{ width: '100%', height: '100%' }"
      ></textarea>

    </div>
  </div>

二、在javascript中：

<script>

import { Dialog } from "vant";

export default {
  name: " ",
  components: {
    Dialog: Dialog.Component,
  },
  data() {
    return {
      show: false,
    };
  },
  mounted() {},
  methods: {
    KeyUpEsc() {
    //以下代码vant2中已给
      Dialog.confirm({
        message: "是否确定",
        messageFontSize: "0.36rem",
        confirmButtonColor: "rgba(229, 60, 50, 1)",
        cancelButtonColor: "rgba(136, 136, 136, 1)",
        confirmButtonText: "是",
        cancelButtonText： "否",
      })
        .then(() => {
          console.log("是");
        })
        .catch(() => {
          console.log("否");
        });
    },
  },
};
</script>