账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    ant-Design a-input组件失焦时值被清空
    70
    0
    问题描述TS入门课9.3节使用ant-D的modal组件显示Login组件,Login中的a-input组件输入数据失焦后,值被清空@边城问题出现的环境背景及自己尝试过哪些方法相关插件版本:{ "name": "todo-static", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", "lint": "vue-cli-service lint" }, "dependencies": { "ant-design-vue": "^1.7.8", "axios": "^0.24.0", "core-js": "^3.18.3", "lodash": "^4.17.21", "vue": "^2.6.14", "vue-class-component": "^7.2.6", "vue-property-decorator": "^9.1.2", "vue-router": "^3.5.2" }, "devDependencies": { "@types/jest": "^24.9.1", "@types/lodash": "^4.14.178", "@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/parser": "^4.33.0", "@vue/cli-plugin-babel": "^4.5.14", "@vue/cli-plugin-eslint": "^4.5.14", "@vue/cli-plugin-router": "^4.5.14", "@vue/cli-plugin-typescript": "^4.5.14", "@vue/cli-plugin-unit-jest": "^4.5.14", "@vue/cli-service": "^4.5.14", "@vue/eslint-config-typescript": "^7.0.0", "@vue/test-utils": "^1.2.2", "eslint": "^6.8.0", "eslint-plugin-vue": "^6.2.2", "less": "^3.13.1", "less-loader": "^5.0.0", "typescript": "^4.1.6", "vue-template-compiler": "^2.6.14" }}相关依赖:"ant-design-vue","vue-property-decorator"根据相关链接提示,这个问题的原因貌似是因为使用"vue-property-decorator"的@PropSync时需要在父级组件中使用.sync,我想请教如何在createElement中使用.sync修饰符。相关代码粘贴代码文本(请勿用截图)Login.tsimport {Component, PropSync, Vue} from "vue-property-decorator";@Componentexport default class Login extends Vue{ @PropSync("username", { default: "" }) localUsername!: string; @PropSync("password", { default: "" }) localPassword!: string;}Login.vue<template> <a-form> <a-form-item> <a-input v-model="localUsername" autocomplete="username" size="large" placeholder="用户名"> <a-icon slot="prefix" type="user"></a-icon> </a-input> </a-form-item> <a-form-item> <a-input-password v-model="localPassword" autocomplete="current-password" size="large" placeholder="密码"> <a-icon slot="prefix" type="key"></a-icon> </a-input-password> </a-form-item> </a-form></template><script lang="ts" src="./Login.ts"></script>handlerError.tsisLogging = true; const user = { username: "", password: "" }; Modal.info({ title: "请登录", icon: "user", content: (createElement: any) => createElement( Login, { on: { "update:username": (value: string) => { console.log(value); user.username = value; }, "update:password": (value: string) => { console.log(value); user.password = value; } } } ), async onOk() { const { username, password } = user; const result = await new RemoteAuthApi().login(username, password); if(result?.token){ // 登录成功 isLogging = false; }else{ return Promise.reject(); } } });你期待的结果是什么?实际看到的错误信息又是什么?
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 怎能用文字帶過 普通会员 1楼

      在Ant Design中,A-input组件默认不会清空失焦时的值。如果你想在失焦时清空值,你可以在组件的value属性中设置一个默认值。

      例如:

      ```jsx import React from 'react'; import { AInput } from 'antd';

      const Input = ({ value, onChange, placeholder }) => ( ); ```

      在这个例子中,value属性的默认值是'',这意味着当用户点击输入框时,它的值将被设置为''

      如果你希望在失焦时清空value,你可以设置一个初始值,并在失焦时清除这个初始值:

      ```jsx import React from 'react'; import { AInput } from 'antd';

      const Input = ({ value, onChange, placeholder }) => ( ); ```

      在这个例子中,value的初始值是'',在失焦时,value将被清空。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部