ant design vue3中引入message消息提示,全局引入亲测有效

两种方式

第一种:使用provide和inject方式

第二种:使用全局挂载$message方式

第一种:

//main.ts
import { createApp } from 'vue';
import App from './App';
import  Antd,{ message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';

const app = createApp(App);
app.use(Antd);
// 在定义app的原型上用provide进行挂载
app.provide('message', message);
// xxx.vue
import {  inject } from 'vue';
const msg: any = inject('message');
const cancel = () => {
    msg.info('已取消');
};

第二种:

//main.ts
import { createApp } from 'vue';
import App from './App';
import  Antd,{ message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';

const app = createApp(App);
app.use(Antd);
app.config.globalProperties.$message = message;
import {  getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const cancel = () => {
    proxy.$message.info('已取消');
};

关于message消息提示全局配置,vue3中第二种方式可能后续就会失效,建议使用官方推荐的第一种方式注入,provide和inject搭配简直无敌,使用vite+ts+vue3项目,unplugin-vue-components插件无法处理非组件模块,如 message、Modal、notification、Icon等,这种组件需要手动加载,都可以使用这种方式解决,祝大家好运,共勉!

Vue3中,结合Ant Design Vue(简称`ant-design-vue`)库创建单个输入框的校验通常涉及以下几个步骤: 1. 安装依赖: 首先确保已安装Vue和`@ant-design/vuetify`或`@ant-design/icons`等相关的Ant Design Vue组件库。 ```bash npm install vue antd @vue/cli-plugin-ant-design ``` 或者使用yarn: ```bash yarn add vue antd @vue/cli-plugin-ant-design ``` 2. 引入组件和验证规则: 在你的Vue组件文件中引入`<Input>`组件,并在`data`中定义状态用于存储用户输入以及验证结果。 ```html <template> <a-input v-model="value" :rules="rules" placeholder="请输入内容"></a-input> <span class="error-message" v-if="errors?.message">{{ errors.message }}</span> </template> <script setup> import { defineComponent, ref } from 'vue'; import { Input } from '@ant-design-vue/input'; const value = ref(''); const rules = { required: { message: '必填', trigger: 'blur' }, // 自定义验证规则可在此添加,例如正则表达式验证邮箱、手机号码等 }; let errors = {}; </script> ``` 3. 验证方法: 你可以定义一个方法处理输入的改变,检查输入是否满足规则并更新错误消息。 ```javascript <script setup> // ... const validate = async () => { const result = await validateRules(value.value); if (result) { errors = {}; } else { errors = { message: rules[Object.keys(rules)].message }; } }; </script> <script lang="ts"> // 假设我们有一个全局的验证函数validateRules function validateRules(input: string): boolean { // 进行实际的验证逻辑,返回true表示通过,false表示失败 } </script> ``` 4. 触发动画校验: 可以在`<Input>`上绑定`on-change`事件,调用`validate`方法。 ```html <a-input v-model="value" :rules="rules" placeholder="请输入内容" @change="validate"></a-input> ``` 5. 提示样式: 为了美观,你可以为错误提示添加适当的CSS样式,比如使用Ant Design Vue提供的内置样式或者自定义样式。 当用户输入不符合规则时,`errors.message`将显示相应的错误信息。如果所有规则都通过,则不会显示错误消息
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

超级罗伯特

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值