vue antd 问题笔记

提交表单,验证失败,执行了回调,验证成功却没有执行回调

数据验证使用了自定义效验,在效验时忘记调用callback()

data() {
let checkIntro = (rule, value, callback) => {
    if (!(/^100$|^(\d|[1-9]\d)$/.test(value))) {
        return callback(new Error('请输入0到100的数字'));
    }
    callback();
};
return {
		rules: {
				score: [
		    		{required: true, message: '请进行评分', trigger: 'blur'},
		    		{validator: checkIntro, trigger: 'blur'}
				],
			}
		}
}
this.$refs.ruleForm.validate(valid => {//如果忘记调用callback();那么验证成功时,这里没有执行
                    if (valid) {
                        submitAudit({...form}).then(res => {
                            console.log(res)
                        }).catch(({message}) => {
                            this.$message.error(message);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
### Vue Ant Design 示例项目 #### 创建新项目并安装依赖项 为了创建一个新的 `Vue` 和 `Ant Design` 结合的示例项目,首先需要初始化一个 Vue 项目。可以通过 Vue CLI 工具来快速搭建环境。 ```bash npm install -g @vue/cli vue create my-project cd my-project ``` 接着,在项目目录中安装 `ant-design-vue`: ```bash npm install ant-design-vue@next --save ``` #### 配置全局引入 Ant Design 组件 编辑项目的入口文件 `main.js` 来配置全局样式以及按需载组件的方式[^2]。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; // Import global styles and components of antd import 'ant-design-vue/dist/reset.css'; // Reset CSS provided by Ant Design import Antd from 'ant-design-vue'; const app = createApp(App); app.use(Antd).mount('#app'); ``` #### 使用 Button 组件作为入门例子 在页面上展示最简单的按钮控件可以帮助理解基本用法。修改 `src/App.vue` 文件如下所示[^4]: ```html <template> <a-button type="primary">Primary</a-button> <!-- Primary button --> <br /> <a-button>Default</a-button> <!-- Default button --> <br /> <a-button type="dashed">Dashed</a-button> <!-- Dashed style button --> <br /> <a-config-provider :auto-insert-space-in-button="false"> <a-button type="link">Link</a-button> <!-- Link styled button without auto space insertion --> </a-config-provider> </template> <script setup lang="ts"></script> <style scoped></style> ``` 上述代码展示了四种不同类型的按钮:主要按钮、默认按钮、虚线风格按钮和链接样式的按钮,并且通过 `<a-config-provider>` 设置关闭了自动插入空白的功能以便更好地控制布局效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值