Skip to content
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.

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

🐛 [Bug]: 3.19版本model组件指定关闭函数后,关闭model时,会执行三次 close 事件 #2512

Open
cyberkingkong opened this issue Nov 12, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@cyberkingkong
Copy link

Version

3.19

Vue Version

3.3.7

Link to minimal reproduction

https://github.com/opentiny/tiny-vue

Step to reproduce

3.19版本的model组件,指定close事件后,每次执行关闭,都会运行三次close事件。

What is expected

No response

What is actually happening

No response

What is your project name

backend

Any additional comments (optional)

No response

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.


Title: 🐛 [Bug]: After specifying the close function in the model component of version 3.19, the close event will be executed three times when the model is closed.

@kagol kagol added the bug Something isn't working label Nov 12, 2024
@cyberkingkong
Copy link
Author

cyberkingkong commented Nov 20, 2024

<template>
<tiny-modal
    v-model="dialogShow"
    :title="title"
    :lock-scroll="false"
    :show-header="true"
    :show-footer="true"
    :mask-closable="true"
    width="1000"
    @confirm="confirmClick"
    @close="closeClick"
  >
    <template #default>
      <tiny-layout>
        <tiny-form
          ref="formRef"
          :model="rowData"
          :rules="rules"
          label-width="150px"
          :label-align="true"
          label-position="left"
          size="small"
        >
        <tiny-row :flex="true">
            <tiny-col :span="12" label-width="100px">

              <tiny-form-item :label="$t('columns.classify')" prop="classifyId">
                <tiny-select
                  v-model="rowData.classifyId"
                  value-field="id"
                  text-field="title"
                  render-type="tree"
                  :tree-op="classifyTree"
                  placeholder="请选择分类"
                ></tiny-select>
              </tiny-form-item>

              <tiny-form-item v-if="false" :label="$t('columns.pid')" prop="pid">
                <tiny-select
                  v-model="rowData.pid"
                  value-field="id"
                  text-field="title"
                  render-type="tree"
                  :tree-op="subjectTree"
                  placeholder="请选择所属项目"
                ></tiny-select>
              </tiny-form-item>

              <tiny-form-item :label="$t('columns.title')" prop="title">
                <tiny-input
                  v-model="rowData.title"
                  :disabled="disabled"
                  :placeholder="$t('form.input')"
                ></tiny-input>
              </tiny-form-item>

              <tiny-form-item :label="$t('columns.detail')" prop="detail">
                <Editor
                  :model-value="rowData.detail"
                  module="cms"
                  width="100%"
                  @update:modelValue="setValue"
                />
              </tiny-form-item>
            </tiny-col>
          </tiny-row>
        </tiny-form>
      </tiny-layout>
    </template>
  </tiny-modal>
</template>

<script setup lang="ts">
const emit = defineEmits(['closeEvent']);
  const closeClick = () => {
    Notify({
      type: 'info',
      title: '操作',
      message: `操作取消`,
    });
    emit('closeEvent', false);
  };
<script>

上面是item.vue的部分代码。在list.vue里调用item弹出modal后,点击关闭按钮,就会执行三次 closeClick 事件
但是点击mask就只会触发一次closeClick事件
同样的代码,切换回 16 版本就没有这个问题。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants