From 33e8615629f8cf35dd196d30beac31c51880af44 Mon Sep 17 00:00:00 2001
From: cuixiaorui <cui_xiaorui@126.com>
Date: Tue, 5 Jan 2021 18:25:36 +0800
Subject: [PATCH] feat(element3): useMessageBox api change to Msgbox

---
 .../element3/packages/message-box/index.js    | 10 +-----
 .../packages/message-box/src/MessageBox.js    |  5 +--
 packages/element3/src/index.js                | 12 +++----
 packages/element3/types/message-box.d.ts      |  2 +-
 packages/website/src/docs/dialog.md           |  5 ++-
 packages/website/src/docs/drawer.md           | 15 ++++----
 packages/website/src/docs/message-box.md      | 36 ++++++++-----------
 7 files changed, 31 insertions(+), 54 deletions(-)

diff --git a/packages/element3/packages/message-box/index.js b/packages/element3/packages/message-box/index.js
index 937b605f2..ecd39579e 100644
--- a/packages/element3/packages/message-box/index.js
+++ b/packages/element3/packages/message-box/index.js
@@ -1,9 +1 @@
-import MessageBox from './src/MessageBox.js'
-
-export function useMsgbox() {
-  return MessageBox
-}
-
-export default {
-  service: MessageBox
-}
+export { MessageBox as Msgbox } from './src/MessageBox.js'
diff --git a/packages/element3/packages/message-box/src/MessageBox.js b/packages/element3/packages/message-box/src/MessageBox.js
index e578e3fa0..8908026ef 100644
--- a/packages/element3/packages/message-box/src/MessageBox.js
+++ b/packages/element3/packages/message-box/src/MessageBox.js
@@ -107,7 +107,7 @@ const showNextMsg = () => {
   // }
 }
 
-const MessageBox = function (options, callback) {
+export const MessageBox = function (options, callback) {
   // if (Vue.prototype.$isServer) return
   if (typeof options === 'string' || isVNode(options)) {
     options = {
@@ -213,6 +213,3 @@ MessageBox.close = () => {
   msgQueue = []
   currentMsg = null
 }
-
-export default MessageBox
-export { MessageBox }
diff --git a/packages/element3/src/index.js b/packages/element3/src/index.js
index 6ad194eb3..d417e6c25 100644
--- a/packages/element3/src/index.js
+++ b/packages/element3/src/index.js
@@ -53,7 +53,7 @@ import ElLoading, { useLoading } from '../packages/loading'
 
 import { Message } from './components/Message'
 
-import ElMessageBox, { useMsgbox } from '../packages/message-box'
+import { Msgbox } from '../packages/message-box'
 
 import { Notification } from './components/Notification'
 // Navigation
@@ -189,10 +189,10 @@ const install = (app, opts = {}) => {
 
 function applyOptions(app) {
   app.config.globalProperties.$loading = ElLoading.service
-  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
+  app.config.globalProperties.$msgbox = Msgbox
+  app.config.globalProperties.$alert = Msgbox.alert
+  app.config.globalProperties.$confirm = Msgbox.confirm
+  app.config.globalProperties.$prompt = Msgbox.prompt
   app.config.globalProperties.$notify = Notification
   app.config.globalProperties.$message = Message
 }
@@ -284,8 +284,8 @@ export {
   ElScrollbar,
   ElAutocomplete,
   Message,
+  Msgbox,
   useLoading,
-  useMsgbox,
   Notification,
   install,
   setupGlobalOptions
diff --git a/packages/element3/types/message-box.d.ts b/packages/element3/types/message-box.d.ts
index 9e17f3cfd..67e3394e1 100644
--- a/packages/element3/types/message-box.d.ts
+++ b/packages/element3/types/message-box.d.ts
@@ -13,7 +13,7 @@ export interface MessageBoxInputValidator {
   (value: string): boolean | string
 }
 
-export const useMsgbox: () => ElMessageBox
+export const Msgbox: ElMessageBox
 
 interface IMessageBox {
   title: string
diff --git a/packages/website/src/docs/dialog.md b/packages/website/src/docs/dialog.md
index b118a8742..3317ab763 100644
--- a/packages/website/src/docs/dialog.md
+++ b/packages/website/src/docs/dialog.md
@@ -31,14 +31,13 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。
 
 <script>
   import { ref } from 'vue'
-  import { useMsgbox } from 'element3'
+  import { Msgbox } from 'element3'
   export default {
     setup() {
-      let msgbox = useMsgbox()
       let dialogVisible = ref(false)
 
       function handleClose(done) {
-        msgbox
+        Msgbox
           .confirm('确认关闭？')
           .then((_) => {
             done()
diff --git a/packages/website/src/docs/drawer.md b/packages/website/src/docs/drawer.md
index 7b08c1b4f..b7afb1e5a 100644
--- a/packages/website/src/docs/drawer.md
+++ b/packages/website/src/docs/drawer.md
@@ -33,15 +33,14 @@
 
 <script>
   import { ref } from 'vue'
-  import { useMsgbox } from 'element3'
+  import { Msgbox } from 'element3'
   export default {
     setup() {
-      let msgbox = useMsgbox()
       let drawer = ref(false)
       let direction = ref('rtl')
 
       function handleClose(done) {
-        msgbox
+        Msgbox
           .confirm('确认关闭？')
           .then((_) => {
             done()
@@ -137,10 +136,9 @@
 
 <script>
   import { ref } from 'vue'
-  import { useMsgbox } from 'element3'
+  import { Msgbox } from 'element3'
   export default {
     setup() {
-      let msgbox = useMsgbox()
       let dialog = ref(false)
       let loading = ref(false)
       let form = ref({
@@ -160,7 +158,7 @@
         if (loading.value) {
           return
         }
-        msgbox
+        Msgbox
           .confirm('确定要提交表单吗？')
           .then((_) => {
             loading.value = true
@@ -217,15 +215,14 @@
 
 <script>
   import { ref } from 'vue'
-  import { useMsgbox } from 'element3'
+  import { Msgbox } from 'element3'
   export default {
     setup() {
-      let msgbox = useMsgbox()
       let drawer = ref(false)
       let innerDrawer = ref(false)
 
       function handleClose(done) {
-        msgbox
+        Msgbox
           .confirm('还有未保存的工作哦确定关闭吗？')
           .then((_) => {
             done()
diff --git a/packages/website/src/docs/message-box.md b/packages/website/src/docs/message-box.md
index 612ca6221..30617ecd6 100644
--- a/packages/website/src/docs/message-box.md
+++ b/packages/website/src/docs/message-box.md
@@ -18,14 +18,13 @@
 </template>
 
 <script>
-  import { useMsgbox, Message } from 'element3'
+  import { Msgbox, Message } from 'element3'
   export default {
     setup() {
-      const messageBox = useMsgbox()
 
       return {
         open() {
-          messageBox.alert('这是一段内容', '标题名称', {
+          Msgbox.alert('这是一段内容', '标题名称', {
             confirmButtonText: '确定',
             callback: (action) => {
               Message({
@@ -55,14 +54,13 @@
 </template>
 
 <script>
-  import { useMsgbox, Message } from 'element3'
+  import { Msgbox, Message } from 'element3'
   export default {
     setup() {
-      const messageBox = useMsgbox()
 
       return {
         open() {
-          messageBox
+          Msgbox
             .confirm('此操作将永久删除该文件, 是否继续?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
@@ -101,14 +99,13 @@
 </template>
 
 <script>
-  import { useMsgbox, Message } from 'element3'
+  import { Msgbox, Message } from 'element3'
   export default {
     setup() {
-      const messageBox = useMsgbox()
 
       return {
         open() {
-          messageBox
+          Msgbox
             .prompt('请输入邮箱', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
@@ -149,14 +146,13 @@
 
 <script>
   import { h } from 'vue'
-  import { useMsgbox, Message } from 'element3'
+  import { Msgbox, Message } from 'element3'
   export default {
     setup() {
-      const messageBox = useMsgbox()
 
       return {
         open() {
-          messageBox({
+          Msgbox({
             title: '消息',
             message: h('p', null, [
               h('span', null, '内容可以是 '),
@@ -210,14 +206,12 @@
 </template>
 
 <script>
-  import { useMsgbox } from 'element3'
+  import { Msgbox } from 'element3'
   export default {
     setup() {
-      const messageBox = useMsgbox()
-
       return {
         open() {
-          messageBox.alert(
+          Msgbox.alert(
             '<strong>这是 <i>HTML</i> 片段</strong>',
             'HTML 片段',
             {
@@ -249,14 +243,13 @@
 </template>
 
 <script>
-  import { useMsgbox, Message } from 'element3'
+  import { Msgbox, Message } from 'element3'
   export default {
     setup() {
-      const messageBox = useMsgbox()
 
       return {
         open() {
-          messageBox
+          Msgbox
             .confirm(
               '检测到未保存的内容，是否在离开页面前保存修改？',
               '确认信息',
@@ -300,14 +293,13 @@
 </template>
 
 <script>
-  import { useMsgbox, Message } from 'element3'
+  import { Msgbox, Message } from 'element3'
   export default {
     setup() {
-      const messageBox = useMsgbox()
 
       return {
         open() {
-          messageBox
+          Msgbox
             .confirm('此操作将永久删除该文件, 是否继续?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',