vue项目中使用vant

痛定思痛。 2022-12-22 14:28 197阅读 0赞

##### 全局使用 #####

在main.js中全局引入vant

import Vant from 'vant';
    import 'vant/lib/index.css';
    Vue.use(Vant);

组件中直接使用

<div class="cancel-btn" @click.prevent="cancelEvent('张三', 44231563215241110)" >
     核销
    </div>

methods: { 
        cancelEvent(name, userId) { 
          this.$dialog
            .confirm({ 
              title: "提示",
              message: "确定核销:" + name + "," + userId,
            })
            .then(() => { 
              console.log("确定提交");
            })
            .catch(() => { 
              console.log("取消提交");
            });
        },
      },

##### 按需使用 #####

在需要的组件中直接引入使用

import Vue from "vue";
    import {  Notify } from "vant";
    import "vant/lib/notify/style";
    Vue.use(Notify);
    //------------------上面引入，下面方法中使用---------------------------
    methods: { 
    	clickEvent(){ 
    		this.$notify({ 
    		  type: "warning",
    		  message: "请填写你的信息",
    		});
    	}
    }

##### 或者在main.js中按需引入，在组件中使用 #####

main.js引入

// vant按需引入
    import { 
      Button,
      Form,
      Field,
      DatetimePicker,
      Cell,
      Icon,
      Popup,
      Picker,
      Toast,
      Notify
    } from "vant";
    import "vant/lib/index.css";
    Vue.use(Button)
      .use(Form)
      .use(Field)
      .use(DatetimePicker)
      .use(Cell)
      .use(Icon)
      .use(Popup)
      .use(Picker)
      .use(Toast)
      .use(Notify);

在组件中使用

methods: { 
    	clickEvent(){ 
    		this.$notify({ 
    		  type: "warning",
    		  message: "请填写你的信息",
    		});
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目中引入vant

vue项目中引入vant 本文讲解再vue项目里面如何引入vant，我推荐再vue项目里面引入vant，不推荐创建vant项目，因为会出现很多奇怪的格式错误。详情

我就是我/ 2024年03月16日 15:48/ 0 赞/ 43 阅读

相关 vue-cli项目下引入vant组件

前言 Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。

Myth丶恋晨/ 2023年08月17日 15:39/ 0 赞/ 137 阅读

相关 Vue+vant使用uploader上传图片

Vue使用vant上传图片给后台服务器这几天在写项目时，遇到了基本的业务需求，上传图片给后台，我是使用vant来开发的，由于是第一次亲身体验这种情况，所以当时我也是一头

今天药忘吃喽~/ 2023年01月15日 03:56/ 0 赞/ 663 阅读

相关 vue项目中使用vant

全局使用在main.js中全局引入vant import Vant from 'vant'; import 'vant/lib/index.css';

痛定思痛。/ 2022年12月22日 14:28/ 0 赞/ 198 阅读

相关 vue项目引入vant

vue项目引入vant npm i vant -S 在使用的page.vue中的直接按需引入 <script> import

叁歲伎倆/ 2022年12月08日 05:44/ 0 赞/ 221 阅读

相关 Vue项目中使用Vant的“ImagePreview 图片预览”组件

html示例代码： <img :src="imageUrl" alt="" @click="getImg()"> js示例代码： import { Im

小咪咪/ 2022年08月29日 00:10/ 0 赞/ 418 阅读

相关 vue-cli-vant-starter（vue-cli 和 vant 结合的项目开发模板）

新项目每次都需要去配置一个新的开发环境，索性直接搭一个模板，为以后快速开发使用。项目地址：[vue-cli-vant-starter][] vue-cli 和 vant

柔情只为你懂/ 2022年04月25日 08:34/ 0 赞/ 269 阅读

相关 vue-cli项目中使用axios/vant

1.下载安装执行下载命令：npm i axios -S / npm install axios --save-dev 查看是否安装成功：

青旅半醒/ 2021年09月13日 15:50/ 0 赞/ 543 阅读

相关 VUE项目中安装和使用vant组件

首先要搭建好vue脚手架：[https://blog.csdn.net/qq\_20757489/article/details/83718242][https_blog.cs

谁借莪１个温暖的怀抱￠/ 2021年08月19日 22:44/ 0 赞/ 515 阅读

相关 vue 使用vant库

1、引入 cnpm i vant -S cnpm i babel-plugin-import -D 2、配置按需加载

雨点打透心脏的1/2处/ 2021年07月25日 00:58/ 0 赞/ 367 阅读