Skip to content

使用外部引入后，第一次进入时model无法关闭，刷新之后正常 #2595

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
1 task
Clors1997 opened this issue Jul 23, 2020 · 7 comments
Closed
1 task

使用外部引入后，第一次进入时model无法关闭，刷新之后正常 #2595

Clors1997 opened this issue Jul 23, 2020 · 7 comments
Labels
outdated

Comments

@Clors1997
Copy link

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.6.4

Environment

[email protected]，chrome

Reproduction link

https://www.antdv.com/components/modal-cn/#components-modal-demo-information-modal-dialog

Steps to reproduce

index.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.js"></script>

base.conf
externals: {
vue: 'Vue',
'moment': 'moment',
'ant-design-vue': "antd"
},

使用时第一次进入页面无法关闭modal，无论是右上角还是阴影，@cancel编写正确，
刷新之后正常关闭

What is expected?

使用时第一次进入页面能正常关闭modal

What is actually happening?

使用时第一次进入页面无法关闭modal
@labike
Copy link

labike commented Jul 23, 2020

Modal的显示隐藏都是由visible控制或者Modal.methods提供的方法比如success, destroy控制

@Clors1997
Copy link
Author

Modal的显示隐藏都是由可见控制或者Modal.methods提供的方法示例成功，destroy控制

对不起，Modal第一次进入确实没有响应关闭我设置的事件，关键是没有任何响应，刷新之后Modal正常关闭，我认为是内部出现了问题

@labike
Copy link

labike commented Jul 23, 2020

@Clors1997 提供一下code在codesandbox中

@labike
Copy link

labike commented Jul 23, 2020

@Clors1997

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.js"></script>
    <script src="http://momentjs.cn/downloads/moment.min.js"></script>
    <link type="text/css" rel="stylesheet" href="http://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.css"/>
</head>
<body>
<div id="app">
    <div>
        <!-- <a-button type="primary">Primary</a-button>
        <a-button>Default</a-button>
        <a-button type="dashed">Dashed</a-button>
        <a-button type="danger">Danger</a-button>
        <a-button type="link">Link</a-button> -->
        <a-modal
            title="Title"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="handleCancel"
            >
            <p>{{ ModalText }}</p>
        </a-modal>
    </div>
</div>
<script type="application/javascript">
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js',
        visible: true,
        confirmLoading: false,
        ModalText: 'Content of the modal'
    },
    mounted() {
        
    },
    methods: {
        handleOk (e) {
            this.ModalText = 'The modal will be closed after two seconds'
            this.confirmLoading = true
            setTimeout(() => {
                this.visible = false
                this.confirmLoading = false
            }, 2000)
        },
        handleCancel (e) {
            console.log('Clicked cancel button')
            this.visible = false
        }
    },
});
</script>
</body>
</html>

@Clors1997
Copy link
Author

@Clors1997

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.js"></script>
    <script src="http://momentjs.cn/downloads/moment.min.js"></script>
    <link type="text/css" rel="stylesheet" href="http://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.css"/>
</head>
<body>
<div id="app">
    <div>
        <!-- <a-button type="primary">Primary</a-button>
        <a-button>Default</a-button>
        <a-button type="dashed">Dashed</a-button>
        <a-button type="danger">Danger</a-button>
        <a-button type="link">Link</a-button> -->
        <a-modal
            title="Title"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="handleCancel"
            >
            <p>{{ ModalText }}</p>
        </a-modal>
    </div>
</div>
<script type="application/javascript">
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js',
        visible: true,
        confirmLoading: false,
        ModalText: 'Content of the modal'
    },
    mounted() {
        
    },
    methods: {
        handleOk (e) {
            this.ModalText = 'The modal will be closed after two seconds'
            this.confirmLoading = true
            setTimeout(() => {
                this.visible = false
                this.confirmLoading = false
            }, 2000)
        },
        handleCancel (e) {
            console.log('Clicked cancel button')
            this.visible = false
        }
    },
});
</script>
</body>
</html>

感谢，修改vue版本后使用正常，vue2.5.2 =》 vue2.6.10。奇怪的是一样的版本使用vendor引入不会出现该bug，ant外部引入有vue版本限制？

@labike
Copy link

labike commented Jul 23, 2020 •
edited
Loading

@Clors1997 没有限制. 解决了就把这个issue关闭

@weekly-digest weekly-digest bot mentioned this issue Jul 26, 2020
Closed
@github-actions
Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 24, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
outdated
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@labike @Clors1997