- 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将被清空。
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

