Closed dfaglory closed 1 year ago
由于 /src/design/ant/index.less,修改了antd 原生\
// TODO beta.11 fix .ant-col { width: 100%; }
导致antd 原生\
这是antd官网,form组件的一个官方例子
<template> <a-form :model="formState" name="horizontal_login" layout="inline" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed" > <a-form-item label="Username" name="username" :rules="[{ required: true, message: 'Please input your username!' }]" > <a-input v-model:value="formState.username"> <template #prefix> <UserOutlined class="site-form-item-icon" /> </template> </a-input> </a-form-item> <a-form-item label="Password" name="password" :rules="[{ required: true, message: 'Please input your password!' }]" > <a-input-password v-model:value="formState.password"> <template #prefix> <LockOutlined class="site-form-item-icon" /> </template> </a-input-password> </a-form-item> <a-form-item> <a-button :disabled="disabled" type="primary" html-type="submit">Log in</a-button> </a-form-item> </a-form> </template> <script lang="ts"> import { defineComponent, reactive, computed } from 'vue'; import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'; interface FormState { username: string; password: string; } export default defineComponent({ components: { UserOutlined, LockOutlined, }, setup() { const formState = reactive<FormState>({ username: '', password: '', }); const onFinish = (values: any) => { console.log('Success:', values); }; const onFinishFailed = (errorInfo: any) => { console.log('Failed:', errorInfo); }; const disabled = computed(() => { return !(formState.username && formState.password); }); return { formState, onFinish, onFinishFailed, disabled, }; }, }); </script>
vben版本:2.7.2
// design/ant/index.less remove .ant-col {width: 100%;}
由于 /src/design/ant/index.less,修改了antd 原生\