Vant3的Notify组件用于在页面中显示消息提示,例如成功提示、错误提示等。以下是一个简单的例子,展示如何在Vue.js中使用Vant3的Notify组件:

首先,确保你已经安装了Vant3组件库。你可以使用npm或者yarn进行安装:
npm install vant@next
# 或者
yarn add vant@next

然后,在你的Vue组件中引入并注册Notify组件:
<template>
  <div>
    <van-button @click="showNotify">显示消息提示</van-button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Notify, Button } from 'vant';

export default {
  components: {
    [Button.name]: Button,
  },
  setup() {
    const showNotify = () => {
      Notify({
        type: 'success', // 消息类型,可选值为 'primary' | 'success' | 'danger' | 'warning'
        message: '操作成功',
        duration: 2000, // 设置消息提示显示的时长,单位为毫秒,可选
      });
    };

    return {
      showNotify,
    };
  },
};
</script>

在上述例子中,我们使用Vue 3的ref函数创建一个响应式的showNotify函数,用于显示消息提示。然后,在模板中使用<van-button>标签引入了Vant3的按钮组件,并通过@click监听按钮点击事件,触发showNotify方法。

在showNotify方法中,我们调用Notify函数创建消息提示实例。通过type设置消息类型,可选值为 'primary' | 'success' | 'danger' | 'warning',通过message设置消息文本,通过duration设置消息提示的显示时长,单位为毫秒,可选。

请确保你的项目已正确配置Vant3,并根据你的实际需求调整代码。


转载请注明出处:http://www.pingtaimeng.com/article/detail/5738/Vant