首先，确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 安装：
npm install vant@next
# 或
yarn add vant@next
然后，在你的项目中，可以像这样使用 NoticeBar 组件：
<template>
<div>
<!-- 使用 vant-notice-bar 组件 -->
<van-notice-bar
left-icon="info-o"
:text="noticeText"
:color="noticeColor"
background="#fffbe8"
@click="handleClick"
/>
</div>
</template>
<script>
import { ref } from 'vue';
import { NoticeBar } from 'vant';
export default {
components: {
[NoticeBar.name]: NoticeBar,
},
setup() {
// 使用 ref 创建一个响应式变量，用于设置通知文本
const noticeText = ref('这是一条通知');
// 使用 ref 创建一个响应式变量，用于设置通知栏的颜色
const noticeColor = ref('#e94f4f');
// 点击通知栏时触发的方法
const handleClick = () => {
console.log('点击了通知栏');
};
return {
noticeText,
noticeColor,
handleClick,
};
},
};
</script>
在这个例子中，我们使用了 van-notice-bar 组件，通过 left-icon 设置通知栏左侧图标，通过 text 设置通知文本，通过 color 设置通知栏的颜色。通过 background 设置通知栏的背景色，通过 @click 事件处理点击通知栏时的回调方法。
你可以根据实际需求调整通知栏的配置项、样式以及点击事件的逻辑。
转载请注明出处：http://www.zyzy.cn/article/detail/5837/Vant