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.

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

重构 UI 的 Modal 组件，使其支持渲染后打开 #5077

Closed
ruibaby opened this issue Dec 19, 2023 · 1 comment · Fixed by #5078
Closed

重构 UI 的 Modal 组件，使其支持渲染后打开 #5077

ruibaby opened this issue Dec 19, 2023 · 1 comment · Fixed by #5078
Assignees
@ruibaby
Labels
area/console Issues or PRs related to the Halo Console kind/improvement Categorizes issue or PR as related to a improvement.
Milestone
2.12.0

Comments

@ruibaby
Copy link
Member

ruibaby commented Dec 19, 2023

你当前使用的版本

2.11.2

描述一下此特性

目前 Modal 组件是通过 v-model:visible 来控制是否显示，无法在组件初始化之后直接打开，意味着无法通过 v-if 来控制显示，这可能会造成开发中的很多不必要代码，因为需要手动控制 Modal 组件内的数据状态，尤其是对 Modal 组件二次封装之后。并且很多时候并不需要提前初始化 Modal 组件。

/kind improvement
/area console
/milestone 2.12.x

附加信息

No response
@f2c-ci-robot f2c-ci-robot bot added the kind/improvement Categorizes issue or PR as related to a improvement. label Dec 19, 2023
@f2c-ci-robot f2c-ci-robot bot added this to the 2.12.x milestone Dec 19, 2023
@f2c-ci-robot f2c-ci-robot bot added the area/console Issues or PRs related to the Halo Console label Dec 19, 2023
@ruibaby
Copy link
Member Author

ruibaby commented Dec 19, 2023

/assign

@ruibaby ruibaby mentioned this issue Dec 19, 2023
Merged
f2c-ci-robot bot pushed a commit that referenced this issue Dec 29, 2023
@ruibaby
refactor: visible condition of modal component (#5078)
44cb311 
#### What type of PR is this?

/area console
/kind improvement
/milestone 2.12.x

#### What this PR does / why we need it:

重构 UI 的 Modal 组件，支持通过 v-if 控制是否显示（渲染）。

example:

```vue
<script lang="ts" setup>
import { ref } from "vue"
const visible = ref(false)
const modal = ref()

function open() {
  visible.value = true
}

function close() {
  modal.value.close()
}
</script>

<template>
  <button @click="open">Open</button>
    <VModal v-if="visible" ref="modal" title="test">
      <button @click="close">Close</button>
    </VModal>
</template>
```

#### Which issue(s) this PR fixes:

Fixes #5077 

#### Special notes for your reviewer:

测试方式：

1. cd console && pnpm --filter "./packages/components" storybook
2. 测试 Modal 组件在文档中是否工作正常。
3. 启动 Console 或者 UC。
4. 观察以前页面上的弹框是否工作正常。

#### Does this PR introduce a user-facing change?

```release-note
重构 UI 的 Modal 组件，支持通过 v-if 控制是否显示（渲染）。
```
@JohnNiang JohnNiang modified the milestones: 2.12.x, 2.12.0 Jan 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ruibaby ruibaby

Labels
area/console Issues or PRs related to the Halo Console kind/improvement Categorizes issue or PR as related to a improvement.
Projects
None yet
Milestone
2.12.0
Development

Successfully merging a pull request may close this issue.

refactor: visible condition of modal component ruibaby/halo
2 participants
@JohnNiang @ruibaby