van2的弹窗自定义事件

最新推荐文章于 2024-07-26 10:14:44 发布

原创最新推荐文章于 2024-07-26 10:14:44 发布 · 978 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #前端 #ui

本文介绍了在Vue2框架下使用Vant2库进行弹窗组件的自定义事件处理，包括函数式调用和组件调用两种方式，并提供了示例代码。文章强调了Vue2在当前开发中的稳定性和重要性，尽管Vue3已逐渐流行。

今天帮别人解决了一个移动端的van2的弹窗自定义事件就记录一下

现在国内开发大多数还是已vue为主，vue3已经比较火热，但是对比vue2来讲，vue2更加稳定，以及一些老项目还是用的vue2框架为主，变动的成本过大，因此我觉得vue2还是没有退出市场主流

回归正题，vant2弹窗的自定义事件

分为两种方式进行操作

第一种是函数式调用

这个可以在官方文档里面里面看到
在这里插入图片描述
代码图片

在方面里面可以加配置，自定义弹出框类型
遮罩层样式也可以进行自定义配置修改

 Dialog({
	//这个地方是Options自定义配置的地方，可以参考https://vant-contrib.gitee.io/vant/v2/#/zh-CN/dialog#options
	//vant2官方文档的地方进行配置
	title: "我是标题" , message: "我是信息",width:"100px", overlayStyle:{
        background:"pink"
      }
  });

在这里插入图片描述

第二种是组件调用

代码演示

    <van-dialog v-model="show" title="组件标题" show-cancel-button
    confirm-button-text="组件确认"
    confirm-button-color="red"
    cancel-button-text="组件取消"
    cancel-button-color="black"
    :overlay-style="color"
    >
    <p>我是组件信息框</p>
    </van-dialog>