Modal.method()的onOk属性在Vue Ant设计中的应用
在Vue Ant设计中，Modal.method()是用于创建模态框的方法，而onOk属性是该方法的一个属性，用于定义点击模态框确定按钮时的回调函数。
具体来说，Modal.method()是Vue Ant中用于创建模态框的方法，可以通过调用该方法来创建一个模态框，并设置其属性和事件。其中，onOk属性是用于定义点击模态框确定按钮时的回调函数。当用户点击确定按钮时，会触发该回调函数，开发者可以在回调函数中编写相应的逻辑代码，例如提交表单、发送请求等操作。
在Vue Ant设计中，使用Modal.method()创建模态框的优势是可以快速、方便地创建出符合Ant Design风格的模态框，并且可以通过设置不同的属性和事件来满足不同的需求。模态框广泛应用于各种场景，例如表单提交、确认操作、提示信息等，可以提升用户体验和交互效果。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足各种业务需求。产品介绍链接
- 腾讯云云数据库MySQL版：提供高性能、可扩展的云数据库服务。产品介绍链接
- 腾讯云对象存储（COS）：提供安全可靠、高扩展性的云存储服务。产品介绍链接
以上是对Modal.method()的onOk属性在Vue Ant设计中的应用的完善且全面的答案。
相关·内容
我正在尝试使用Vue Ant's confirmation modal dialog，但是在onOk属性中似乎没有任何东西可以访问。我尝试调用我的任何方法或this.$emit，但得到Error in v-on handler: "TypeError: Cannot read property '$emit' of undefined"。我想知道如何在这个组件的onOk属性中访问我的方法和数据。 deleteCampaign() {
this.$confirm({
title: `Are you sure you want
浏览 147提问于2019-03-31得票数 2
回答已采纳
2回答
我们使用react和ant设计作为前端技术。我在ant设计模式中注意到了一件事。当我们将onCancel attr放在模式中时，如下代码所示。这将允许我们通过单击右上角的“X”来关闭模式，但也允许通过单击模型之外的任何位置来关闭模式。有没有办法在保持“X”动作的同时防止这种外部点击动作？提前感谢 <Modal
visible={visible}
title="My modal"
onOk={handleOk}
onCancel={closeMyModa
浏览 42提问于2021-01-21得票数 0
回答已采纳
1回答
我正在使用Antd中的一个DatePicker元素，我只想显示日历体。
我尝试使用样式组件直接针对日历的页眉和页脚，并在两者上设置display: none;属性，但到目前为止还没有骰子。
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { DatePicker } from "antd";
import style
浏览 0提问于2019-07-09得票数 2
回答已采纳
我正在开发一个React应用程序，目前有一个日期选择器可以使用Ant选择一个日期范围。我希望将选定日期的值存储到一个变量中，该变量可由我的程序中的另一个文件访问。如何将选定的值绑定到变量中？下面是我的日期选择器的JavaScript代码：
<p>Select a date range: </p>
</div>
<div className="left">
<Space direction="vertical" size={1
浏览 3提问于2022-04-06得票数 0
回答已采纳
我使用的是ant设计组件，在组件内部函数"this“是未定义的或missing.so的，对于少数组件，我使用temp变量在数据发生更改时更改状态，我认为这不是更改/处理状态的正确方式。我在ant设计文档和其他博客上读到过，但找不到任何精确的solution.Here，我正在放一个”确认“组件代码片段。
confirm({
title: "Some thing i wanna do which i need to confirm",
onOk() {
//here i need this
浏览 54提问于2019-07-09得票数 0
我无法让ant-design-vue通知(或消息)在我的项目中工作，这是我用vue-CLI3创建的。我正在使用https://vue.ant.design/components/notification/中的示例，但是通知没有出现。 在对GitHub上的ant-design-vue问题做了一些研究之后，我认为这可能是由于ant-design-vue本身的缺陷。在调用全局呈现函数时，它似乎不支持通知消息，这是由vue-cli 3创建的，如下所示： new Vue({
router,
store,
render: h => h(App)
}).$mount('#ap
浏览 35提问于2019-06-13得票数 1
我有一个应用程序，它应该从数据选择器和时间选择器获取数据，并将这些数据输出到控制台中。
function onChange(value, dateString) {
console.log("Selected Time: ", value);
console.log("Formatted Selected Time: ", dateString);
}
function onOk(value) {
console.log("onOk: ", value);
}
function onChangeTime(value) {
c
浏览 10提问于2020-06-30得票数 0
据我所见，Ant是，如果您正在开发一个反应性、角度或Vue应用程序。我找不到任何关于在普通JS项目中使用组件的信息，就像在大多数其他通用CSS框架(Bootstrap/Semantic/Foundation/等等)中一样。
是否可以使用独立于反作用/角度/值的蚂蚁设计？
浏览 0提问于2019-09-03得票数 2
实际上，我们在.vue文件中使用this.$notification.open(opitons)，然后它将在我们的web应用程序中显示通知。但是如何在.js文件中使用this.$notification.open(选项)呢？例如，我在.js文件中编写外部函数，如果出现错误，它将显示通知。我尝试导入Antd，然后使用Antd.notification.open(打开)。此代码不起作用。 Ant设计通知链接在此处：https://www.antdv.com/components/notification/
浏览 108提问于2020-06-27得票数 0
1回答
如何将顶部的X按钮隐藏在ant d模式中，以及如何禁用使用ESC键关闭模态的行为
return (
<Modal
title={modalHeader}
okText="EXIT"
cancelText="CONTINUE"
visible={visible}
onCancel={onCancelHandler}
onOk={exitUser}
width={600}
cancelButtonProps={{hidden:isExFlag}}
>
<DescriptionParagraph>
{modalBodyText}
</De
浏览 1提问于2020-10-06得票数 2
回答已采纳
我能够构建vue web组件并将其加载到其他页面中，但是我无法找到如何正确地包含UI框架的文档。web组件似乎在shadowDOM下，使用样式标记导入css将无法工作。
(在模板中添加CDN链接，并应用样式)
任何关于任何框架的提示，Vuetify或Ant设计或尾风CSS都将不胜感激。
类似问题：
浏览 4提问于2022-02-14得票数 2
回答已采纳
我有跟随Vue组件。
当单击按钮时，它会显示My-弹出窗口，根据world标志显示消息。
当我的弹出窗口关闭时，它会切换world标志真/假。
另外，在关闭时，我的弹出弹出并花费2~3秒来完全消失。
问题是，在触发onOK()方法之后，我还可以看到关闭my-弹出更改时的消息。
(例如如果当前消息是hello world，则在衰落时将其更改为hello universe )
是否有任何方式切换world标志，直到弹出关闭时仍保留相同的消息？
<template>
<button @click="popupShown = true">hello</
浏览 1提问于2018-05-17得票数 2
回答已采纳
我已经创建了一个and模式，我想将模态体颜色更改为红色，这是我的代码，已经应用了背景颜色，但它没有显示，我也想用flex对齐图像和modalName，我已经插入了and版本4.2，我使用的是样式的组件。不知道什么是wrong.please的帮助，并感谢提前。
modal.js
import React , {useState} from "react";
import { Modal ,Button} from "antd";
import styled from "styled-components";
import "antd/d
浏览 22提问于2022-11-22得票数 0
1回答
这是我的模式组件， 提交成功后，它将关闭，但如果提交失败，它将留在页面上 我使用redux表单和ant设计。 Modal.confirm({
title: title
content:delete
okText: yes
cancelText: no
okType: 'danger',
onOk: () => {
this.props.delete(this.props.id);
},
});
浏览 46提问于2020-03-19得票数 0
回答已采纳
1回答
到目前为止，我已经用顺风和ant设计完成了我的vue3应用程序设置，但是无法自定义ant设计主题--我遵循这个
我犯了这个错误
error in ./node_modules/ant-design-vue/es/button/style/index.less
Syntax Error: TypeError: this.getOptions is not a function
@ ./node_modules/ant-design-vue/es/button/style/index.less 4:14-207 15:3-20:5 16:22-215
@ ./node_modules
浏览 1提问于2021-11-08得票数 0
2回答
我正在学习nuxtjs，我使用ant-design-vue作为我的ui库，我可以将该库作为插件导入，它工作得很好
import Vue from 'vue'
import Antd from 'ant-design-vue';
export default () => {
Vue.use(Antd)
}
但这是全局导入组件，但我想要做的是将单个组件导入特定页面，而不是全局，因为nuxt会自动延迟加载这个，ps:我可以使用插件导入单个组件，它可以工作，但它仍然是全局导入。例如，如果我有一个使用datepicker的管理仪表板，而我在应用程序的其他任何地
浏览 0提问于2018-11-05得票数 1
我正在尝试使用vue-ant框架的表格组件。我只想导入表格样式。但是，当尝试导入import 'ant-design-vue/lib/table/style/css'表格样式时，来自其他组件的所有元素都会受到影响。是否可以仅对该组件使用该样式。 我尝试将其导入到javascript标记，但遇到了一些错误，因为less文件需要来自<style>文件的一些参数
浏览 19提问于2019-09-10得票数 2
我的package.json是
"peerDependencies": {
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.41.2"
}
当我尝试“纱线安装”时
warning " > sass-loader@8.0.0" has unmet peer dependency "webpack@^4.36.0".
warning &#
浏览 6提问于2019-11-28得票数 1
回答已采纳
我刚刚遇到了CPropertyPage的一个问题。
我一直试图使用OnOK处理程序进行一些验证：
void CCalendarSettingsGooglePage::OnOK()
{
bool bHandle = false;
UpdateData(TRUE);
// AJT v20.2.0 — We need to pass "true" so that the error message will display!
if (ValidSettings(true))
{
bHandle = true;
浏览 6提问于2020-06-18得票数 2
回答已采纳
我有一个继承自CPropertyPage类的类。我有OnOk()方法和OnKillActive()方法。每当我在对话中按Ok键。OnKillActive()被调用，但OnOk()从未被调用。问题是取决于一个条件，我不想关闭对话按Ok。但对话即将结束，按Ok键。
当我按“确定”键时，如何防止对话结束？
代码：
In MyClass.h:
class MyClass : public CPropertyPage {
}
In MyClass.cpp:
void MyClass::OnOK(){
if (condition true) {
浏览 6提问于2017-04-01得票数 0
回答已采纳
1回答
我使用模块化的antdv和babel插件导入，当导入InputSearch抛出标题中描述的错误时。
"ant-design-vue"："^2.2.8""vue"："^3.0.0"
// main.js
import { createApp } from "vue";
import App from "./App.vue";
import { ConfigProvider, Button, Form, Input, InputSearch } from "ant-design-vue"
浏览 3提问于2021-10-11得票数 0
我正在使用Nuxtjs和Antd设置第一个应用程序。我正在使用babel-plugin-import来减少Antd的包大小。
它工作得很好，但在组件中，它看起来很奇怪。
使用babel-plugin-import
<template>
<Button type="primary">Enjoy it</Button>
</template>
<script>
import { Button } from 'ant-design-vue'
export default {
components:
浏览 46提问于2020-02-21得票数 1
我正在使用Ant Design Vue构建web应用程序。
我想知道如何删除<a-modal>报头中的bottom-width。
这是我想要的截图。
这是我的代码。
<template>
<a-modal width="1000px" title="demo">
Hi, Modal
</a-modal>
</template>
<script>
:
</script>
<style lang="less" scoped>
浏览 30提问于2020-06-03得票数 0
1回答
如何在vuejs 3中使用多个插件？
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
createApp(App).use(router, axios, Antd).mo
浏览 6提问于2022-02-17得票数 0
回答已采纳
我有一个带有视图更多图标的antd表，可以弹出一个模式。该图标应该根据表中特定行的id和详细信息呈现每个模态，但目前，每个图标只是将所有模态呈现在彼此的顶部 const ViewUpload = props => {
const { visible, onCancel, data, onOk } = props;
return (
<>
{
data.map(({ description, id, url, title }) => (
&l
浏览 17提问于2020-01-03得票数 0
回答已采纳
我尝试编写一个容器组件"A“来布局第三方组件"Tree"，为了使用A，我使用"inheritAttrs”来获取“Tree”的所有道具和事件：
<template>
<Tree v-bind="$attrs" />
</template>
<script lang="ts">
export default {
inheritAttrs: true,
};
</script>
<script lang="ts" setup>
浏览 8提问于2022-03-22得票数 12
回答已采纳
3回答
在一个反应性项目中，我使用Ant设计(Antd)作为CSS框架。因此，我们有一个要求改变模式的造型，这是Antd的组成部分。改变其边界半径的Modal组件是预期的，但是，通过许多尝试，都是徒劳的。是否有适当的解决办法？
模态分量
<Modal
title="Basic Modal"
visible={isModalVisible}
onOk={handleOk}
onCancel={handleCancel}
className="modalStyle"
浏览 2提问于2021-07-21得票数 5
回答已采纳
我目前正在尝试使用jest和酶来测试“onOk”和“onCancel”方法： Modal.confirm({
title: 'Role Change',
content: `Change?`,
okText: 'Change',
onOk: method1,
onCancel: method2
}) 这是在组件中调用的帮助器方法中。我试着等待组件更新，然后查询OK按钮，但酶似乎找不到它。当我在组件上执行debug()时，模态也没有出现。有没有一种很好的方法来监视这些方法，甚至一开始就调用它们？谢谢!
浏览 29提问于2020-07-02得票数 3
1回答
我使用的是vue2 ant设计库，并且有很多与之相同的组件 import Vue from "vue"
import select from "select"
Vue.use(select) 最好的用法是这样，还是应该在app.vue中导入所有的ant设计ui？
浏览 21提问于2021-08-19得票数 0
2回答
我使用来自Denis Vuyka的WPF的属性控件。
我有一个问题，如果我不按Tab键，它就不能应用属性的新值。
因此，如果我在属性网格中更改属性，然后单击“确定”按钮，则该属性仍具有以前的值。
要重现的示例代码：
public partial class MainWindow : Window
{
DataObject dataObject = new DataObject();
public MainWindow()
{
InitializeComponent();
propertyGrid.SelectedObject = dat
浏览 0提问于2011-07-06得票数 0
我在另一个组件中使用ANT Design的模式，如下所示：
import React from "react";
import {
Modal,
Button
} from "antd";
class SomeModalWrapper extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
handleOk() {
console.log("OK");
}
render() {
浏览 0提问于2019-08-01得票数 2
回答已采纳
我有这样的组成部分：
const App = () => {
const [isModalVisible, setIsModalVisible] = useState(false);
const showModal = () => {
setIsModalVisible(true);
};
const handleOk = () => {
setIsModalVisible(false);
};
const handleCancel = () => {
setIsModalVisible(false);
};
浏览 4提问于2020-12-30得票数 2
回答已采纳
1回答
我有一个应用程序，我使用范围派克从蚂蚁设计。应用程序具有默认值，当我在设置时间后单击OK时，应该会获得新值。当我单击OK时会出现这个问题，因为我得到了一个类似于下面的数组：
但是，我应该只得到一个数组，如:带有两个选定日期的onOk: ["2015-01-05T23:00:00.000Z", "2017-12-31T22:00:00.000Z"]。如何解决这个问题？
function onChange(value, dateString) {
console.log('Selected Time: ', value);
cons
浏览 6提问于2020-03-26得票数 0
回答已采纳
我正在尝试实现一种表，它有一个add按钮来打开一个模式。
在这个模型中，我有我想要在表中更新的输入，但是使用ant设计模式它有一个ok按钮和一个cancel按钮。如何创建获取值的路径？我很难理解/写这个语法。有人能帮我吗？
在"onOk“中，我不知道如何编写函数，尝试创建一个onSubmit(值)，并将其用于console.log，但它没有显示
这是密码
function showModal(nome,colunas) {
setFormDisplay("");
setModal(!modal);
setFormName(nome);
浏览 0提问于2022-02-02得票数 0
我正在尝试将Ant Design 作为模块添加到Nuxt3项目中。
import { fileURLToPath } from "node:url"
import { defineNuxtModule } from "@nuxt/kit"
export default defineNuxtModule({
setup (_, nuxt) {
nuxt.options.css.push("ant-design-vue/dist/antd.css")
},
hooks: {
浏览 11提问于2022-06-09得票数 1
回答已采纳
当我在链接插件对话框中单击OK时，我试图将以下属性添加到创建的元素中
style="color:#1cb9b0"
不确定我将在哪里添加属性，它会在onOk函数中吗？这是目前
onOk: function () {
var data = {};
// Collect data from fields.
this.commitContent(data);
if (!this._.selectedElements.length) {
in
浏览 5提问于2017-10-26得票数 0
回答已采纳
1回答
我正在使用Ant设计，但是Modal在单击Yes和No时并没有像预期的那样关闭。有人能帮忙吗?这里是代码
function Study(props) {
let data=props.data
const showConfirm=(e,val,view) =>{ debugger
confirm({
title: 'Are you sure you want to remove '+val+' from your study list?',
icon: <ExclamationCircleOutlined />,
浏览 2提问于2021-05-24得票数 0
3回答
在CDialog中应用按钮
、、、、
我有一个对话框，在按下OK按钮后，程序使用对话框中的数据绘制一个绘图。我需要绘制的情节，而不必关闭对话框与图标，因此应用按钮。绘制对话框的代码是，
INT_PTR val = dlg->DoModal();
if ( val == IDOK) {
//draw plot
}
onOK和onApply的代码
void DLg::OnOK() {
GetDataGrid();
CDialog::OnOK();
}
void DLg::OnBnClickedApply()
{
GetDataGrid();
}
如何使DoModal()在不关闭对话框的情况下
浏览 1提问于2014-10-15得票数 0
回答已采纳
我试图通过shell运行ANT，而不导入NetBeans IDE中的项目。它抛出以下错误：
/躯干/nbproject/buil-inst.xml:377:未设置libs.CopyLibs.classpath属性。此属性必须指向org-netbeans-modules-java-j2seproject-copylibstask.jar文件，该文件是NetBeans IDE安装的一部分，通常位于/java/ant/NetBeans文件夹。要么在IDE中打开项目并确保存在CopyLibs库，要么手动设置该属性。例如: ant -Dlibs.CopyLibs.classpath=a/path/to
浏览 6提问于2012-08-28得票数 0
1回答
我想动态地样式Ant Design Vue按钮(在Ant Design表的表行中)：
<template #status="{ text }">
<a-button ghost
:style="{'border-color': getColor(text) }">
</a-button>
</template>
下面是我的计算属性(在script部分)：
const getColor = computed((status) => {
let color = '&#
浏览 3提问于2022-01-16得票数 2
回答已采纳
我正在使用Antd中的DatePicker组件，并且正在尝试编辑负责处理月份名称的Moment函数。
到目前为止，我的组件显示了缩写名称，但我正在尝试将其更改为MMMM格式，以便显示月份的全名。
有谁知道如何做到这一点，以及在组件级别上是否可能做到这一点？
My Component
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import {
浏览 11提问于2019-07-10得票数 1
回答已采纳
我知道在“监视”部分使用处理程序对属性进行深度监视，但我不知道如何在getter/setter计算属性中实现vue深度监视。
本质上，我有这样的东西，其中vue无法观察到变化。
如何让vue观察“someComputedProperty”的变化？
computed: {
someComputedProperty: {
set (value) {
this.someComputedPropertyObject[this.someOtherObject.id] = value;
},
get () {
return t
浏览 4提问于2021-09-12得票数 0
回答已采纳
我在这个沙箱上复制了一个问题：。
我在那里所做的是将body, html, #root, .App设置为height: 100vh;，然后让我的main flex来填充视图的其余部分，并在本质上充当应用程序的滚动区域。
html,
body,
#root,
.App {
margin: 0;
padding: 0;
overflow-y: hidden;
height: 100vh;
}
main {
overflow-y: scroll;
flex: 1 0 auto;
}
问题是--如果我在Antd自动完成中选择了一个项，然后我滚动--您可以看到列表内容保持在原处
浏览 0提问于2018-12-20得票数 8
回答已采纳
0回答
`my-ui` 库引用了 `ant-design-vue` , 并且按需引入的.
比如 `Select` :
```
import Select from "ant-design-vue/lib/select";
import 'ant-design-vue/lib/select/style/css' // css.js 引用 less 格式
```
打包后, 上面代码没有变, 由于第三库用了 less ,
这就意味着, 我的库使用者需要在编译时引入 ant 的 less文件.
这就需要**对应less文件的打包处理(less-loader)**, **这很
浏览 655提问于2021-02-23
3回答
是否有人找到了一种将对话框数据保存到CMyDialog::OnOK数据库中的好方法？
void CMyDialog::OnOK()
{
// If I save my data here, I don't know if DoDataExchange()
// found validation errors.
CDialog::OnOK();
// If I save my data here, EndDialog() has already been called
}
寻找关于如何最好地构建这一结构的想法。我知道正常情况是让调用者根据需要保存数
浏览 6提问于2019-10-09得票数 3
回答已采纳
2回答
我有一个子对话框，它是我在资源编辑器中创建的一个新对话框。然后，我在父对话框上使用了一个静态控件作为占位符。在占位符使用以下代码的位置显示子控件：
CRect rect;
m_optionPanelPlaceholder.GetWindowRect(&rect); // In screen coordinates
ScreenToClient(&rect);
m_optionPanelPlaceholder.ShowWindow(SW_HIDE);
optionsDialogPanel_ = new OptionsDialogPanel(settings_);
// Call
浏览 1提问于2011-10-01得票数 0
1回答
因此，我有一个基于MFC的应用程序，它主要来自于CDialog，还有一些控件等等。
由于某些原因，它需要托管在另一个应用程序中，使用基于CView的容器类。
因此，在容器类中必须有一些托管这个东西的way...of，它是使用CDialog制作的，它期望这个东西是一个CView。
集装箱类对我来说是封闭的。它需要一个CView，但是我可以修改基于对话框的应用程序。
是否有一种简单的方法可以从基于CDialog的迁移到基于CView的迁移，请问我需要看什么。我对MFC不是很熟悉，这个问题听起来可能很模糊，但这就是我所拥有的。
任何帮助都会是appreciated...Thanks。
浏览 3提问于2013-11-18得票数 3
回答已采纳
1回答
我试图写的是一个视图->控制器->模型->客户端-> HttpRequestSender关系，这是抽象的，所以当我使用不同的平台(android，Fx-SpringRest)时，我可以替换HttpRequestSender。因为在android上，我需要使用一个非主线程来预置HttpRequest，所以我的解决方案是使用从控制器向下抛出链发送的回调来启用所需的异步行为。
我的问题是，尽管这是一个可行的解决方案，但是代码变得非常难以理解。
因此，像registerDevice(String name)这样的简单方法-如下所示：
public class DeviceReg
浏览 0提问于2018-10-15得票数 0
回答已采纳
在Vue中，我知道任何包含在Vue文件中的Javascript都会暴露给浏览器( OAuth模型中的用户代理)。我想对使用OAuth 2保护的API进行API调用，然后将API调用返回的数据显示在Vue应用程序中。使用OAuth时，我需要使用一个只有客户端服务器(节点/express服务器)知道的访问令牌，并且我不想向浏览器(用户代理)透露访问令牌。
我尝试使用vue-axios来实现，但这迫使我将auth-token添加到vue中的逻辑中，这意味着浏览器可以访问访问令牌，这似乎真的很不安全。
因此，我认为我可以在托管Vue应用程序的节点/express服务器上进行API调用。然后，将数据包含
浏览 5提问于2018-02-09得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
