refactor(messageBox): finish messagebox component #526
Conversation
Refactor(messagebox):finish refactor messagebox component hug-sun#479
# Conflicts: # packages/element3/packages/message-box/src/MessageBox.vue
|
1、代码中请删除console，以及不必要的注释 |
| }) | ||
| describe('proprety', () => { | ||
| it('proprety title', () => { | ||
| const warpper = mount(MessageBox, { |
| title: 'chushihua' | ||
| } | ||
| }) | ||
| expect(warpper.find('.el-message-box__title').text()).toBe('chushihua') |
There was a problem hiding this comment.
find 和 get 的使用区别
当你保证这个元素肯定存在的时候用 get
当你不确定这个元素是否存在的时候用 find ，一般 find 用于验证元素是否存在
| title: 'chushihua' | ||
| } | ||
| }) | ||
| expect(warpper.find('.el-message-box__title').text()).toBe('chushihua') |
There was a problem hiding this comment.
可以使用 jest-vtu 里面的方法代替
expect(wrapper.find('.el-message-box__title')).toHaveTextContent('chushihua')
| } | ||
| }) | ||
| await warpper.findComponent({ ref: 'input' }).setValue('2323') | ||
| await nextTick() |
There was a problem hiding this comment.
setValue 已经是异步的了
这里是否还需要一个 nextTick() ?
packages/element3/src/use/popup.js
Outdated
| @@ -7,9 +7,9 @@ import { | |||
| watch, | |||
| toRefs | |||
| } from 'vue' | |||
| import _ from 'lodash' | |||
There was a problem hiding this comment.
需要使用 lodash-es
不然的话会增加打包代码的体积
| @@ -13,7 +13,7 @@ export interface MessageBoxInputValidator { | |||
| (value: string): boolean | string | |||
| } | |||
|
|
|||
| export const useMsgbox: () => ElMessageBox | |||
| export const MessageBox: () => ElMessageBox | |||
There was a problem hiding this comment.
这里应该是
export const MessageBox: ElMessageBox
packages/website/src/docs/drawer.md
Outdated
| export default { | ||
| setup() { | ||
| let msgbox = useMsgbox() | ||
| let msgbox = MessageBox |
There was a problem hiding this comment.
这里去掉 msgbox 这个变量吧
直接用 MessageBox
让用户看起来更清晰一点
packages/website/src/docs/drawer.md
Outdated
| export default { | ||
| setup() { | ||
| let msgbox = useMsgbox() | ||
| let msgbox = MessageBox |
There was a problem hiding this comment.
这里去掉 msgbox 这个变量吧
直接用 MessageBox
让用户看起来更清晰一点
packages/website/src/docs/dialog.md
Outdated
| export default { | ||
| setup() { | ||
| let msgbox = useMsgbox() | ||
| let msgbox = MessageBox |
There was a problem hiding this comment.
这里去掉 msgbox 这个变量吧
直接用 MessageBox
让用户看起来更清晰一点
packages/element3/src/index.js
Outdated
| app.config.globalProperties.$msgbox = ElMessageBox.service | ||
| app.config.globalProperties.$alert = ElMessageBox.service.alert | ||
| app.config.globalProperties.$confirm = ElMessageBox.service.confirm | ||
| app.config.globalProperties.$prompt = ElMessageBox.service.prompt |
| }) | ||
| expect(warpper.find('.el-message-box__message > p').text()).toBe('333') | ||
| }) | ||
| it('meesage is VNode', () => { |
| @@ -3,7 +3,7 @@ | |||
| 模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。 | |||
|
|
|||
| :::tip | |||
| 从场景上说，MessageBox 的作用是美化系统自带的 `alert`、`confirm` 和 `prompt`，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。 | |||
| @@ -171,9 +171,6 @@ export interface ElMessageBox { | |||
|
|
|||
| declare module '@vue/runtime-core' { | |||
| export interface ComponentCustomProperties { | |||
| /** Show a message box */ | |||
| $msgbox: ElMessageBox | |||
| handleAction(unref(distinguishCancelAndClose) ? 'close' : 'cancel') | ||
| } | ||
| } | ||
| onMounted(() => { |
There was a problem hiding this comment.
onMounted 和 onUnmounted 着两个生命周期内的功能 是否可以按照功能来封装一下
现在不具备可读性
| handleAction, | ||
| handleInputEnter, | ||
| handleWrapperClick | ||
| } = handleList(state, instance, validate) |
There was a problem hiding this comment.
handleList 可以从 setup 中抽离出现
可以让 setup 更清晰
# Conflicts: # packages/element3/packages/message-box/src/MessageBox.vue
请提交 PR 之前确认一下已通过
refactor messagebox components #479