使用Vue手寫一個對話框

更新時間：2024年04月11日 09:59:21 作者：spriteApe

相信大家之前都寫過一些組件,尤其是這樣的彈窗組件,這篇文章主要來和大家聊聊如何使用Vue手寫一個對話框,感興趣的小伙伴可以跟隨小編一起學習一下

寫在前面

相信大家之前都寫過一些組件，尤其是這樣的彈窗組件，沒吃過豬肉還沒見過豬跑嘛哈哈哈~

有人可能會說，為什么要自己寫，我就用ant-design或者餓了么的。sorry，我要的彈窗UI跟組件庫的相差太遠了，而且對話框組件通常都掛載在body下，要改樣式的話得一個個去寫全局的樣式，會全局覆蓋掉組件庫的css…… 微調(diào)改樣式就還好。如果組件庫的對話框dom結構跟你想要的差了十萬八千里，那也是佛祖難救……

基本實現(xiàn)

<template>
  <Teleport to="body">
    <div
      class="popDialogMask"
      :style="{ zIndex: props.zIndex }"
      v-show="modalOpen"
      @click="props.maskClosable && (modalOpen = false)"
      v-bind="$attrs"
    >
      <div class="popDialogContent" @click.stop :style="{ width: props.width + 'px' }">
        <slot name="title">
          <div class="title">
            <div class="i-carbon:warning mr-2 color-#FF9A42" />
            {{ props.title }}
          </div>
        </slot>
        <slot name="content">
          <div class="content"></div>
        </slot>
        <slot name="footer">
          <div class="footer">
            <a-button
              type="primary"
              ghost
              @click="handleEdit('cancel')"
              v-if="cancelButtonVisible"
              >{{ props.cancelText }}</a-button
            >
            <a-button type="primary" @click="handleEdit('confirm')" :block="!cancelButtonVisible">{{
              props.okText
            }}</a-button>
          </div>
        </slot>
      </div>
    </div>
  </Teleport>
</template>

<script lang="ts" setup>
import { type IDiaLogProps } from './types'
const modalOpen = defineModel<boolean>('open')
const props = withDefaults(defineProps<IDiaLogProps>(), {
  title: '',
  maskClosable: false,
  cancelButtonVisible: true,
  zIndex: 2000,
  okText: '確定',
  cancelText: '取消',
  width: 640,
})
const emits = defineEmits(['confirm', 'cancel'])
const handleEdit = (type: Parameters<typeof emits>[0]) => {
  modalOpen.value = false
  emits(type)
}
</script>
<style lang="scss" scoped>
.popDialogMask {
  @apply fixed top-0 bottom-0 left-0 right-0  flex justify-center items-center;
  background-color: rgba(0, 0, 0, 0.45);
  .popDialogContent {
    @apply bg-white rounded-3xl  p-12 box-border;
    .title {
      @apply text-3xl flex justify-center items-center font-bold;
    }
    .content {
      @apply h-26;
    }
    .footer {
      @apply flex justify-between;
      :deep(.ant-btn) {
        @apply p-x-22.5 rounded-20 p-y-0 text-3xl;
        height: 80px;
        line-height: 80px;
      }
    }
  }
}
</style>

順便我要講一下vue的defineModel這個語法糖，用起來真香

組件中使用

下面給出一個基本示例

    <pos-dialog
      v-model:open="posDialogVisible"
      title="我是title"
      :cancelButtonVisible="false"
    >
      <template #content>
        <div class="my-13 text-center">content</div>
      </template>
    </pos-dialog>

API方式調(diào)用

下面我們在utils中把組件引入，導出一個工具函數(shù)給我們后續(xù)API方式"食用"

export const showPosDialog = (option: typeof PosDialog.props) => {
  const modalWarp = document.createElement('div')
  const destroy = () => {
    // eslint-disable-next-line no-use-before-define
    modalInstance.unmount()
    //因為用了Teleport 我發(fā)現(xiàn)這里不寫最好
    // document.body.removeChild(modalWarp)
  }
  const modalInstance = createApp(PosDialog, {
    ...option,
    open: true,
    //AOP
    onConfirm() {
      option.onConfirm && option.onConfirm()
      destroy()
    },
    onCancel() {
      option.onCancel && option.onCancel()
      destroy()
    },
  })
  modalInstance.mount(modalWarp)
   //因為用了Teleport 我發(fā)現(xiàn)這里不寫最好
  // document.body.appendChild(modalWarp)
}

使用方法

下面給出一個基本示例

  showPosDialog({
    title: '是否移除該商品？',
    onConfirm() {
      emits('delete')
    },
  })

這樣，我們就實現(xiàn)了一個組件既可以在template中使用，也可以在任何js中使用啦

初始不渲染

不知道大家有沒有注意到，組件庫的對話框在第一次打開之前，是沒有掛載到body節(jié)點下的。上面我們封裝的組件，如果有100個對話框，頁面一開始就會在body下掛載100個節(jié)點，且都是實例化完成后的，增加了性能上的開銷

投石問路

這可咋整，百度也不知道怎么問。一時間沒有好的思路，我就去down一個ant-design-vue的源碼看看。不得不說，這個項目是一層組件套一層，太雞兒復雜了。功夫不負有心人，我在components/_util/Portal.tsx文件第69行看到了這么一行代碼

    return () => {
      if (!shouldRender.value) return null;
      if (isSSR) {
        return slots.default?.();
      }
      //沒錯，就是這行！
      return container ? <Teleport to={container} v-slots={slots}></Teleport> : null;
    };

ant-design設計思路比較復雜，咱就不過多深究了，反正實現(xiàn)思路是有了。搞個組件包一層。如果是第一次且綁定值為false那就返回一個null

具體實現(xiàn)

import { type IDiaLogProps } from './types'
import Dialog from './Dialog.vue'
export default defineComponent<IDiaLogProps & { open: boolean }>({
  name: 'PosDialog',
  inheritAttrs: false,
  props: Dialog.props,
  setup(props, { attrs, slots }) {
    const isFirstRender = ref(true)
    // 初始值為false的話需要監(jiān)聽第一次打開
    if (!props.open) {
      // 打開過一次dialog 后，將 isFirstRender 設置為 false
      const unWatch = watch(
        () => props.open,
        (val) => {
          if (val) {
            isFirstRender.value = false
            unWatch()
          }
        }
      )
    } else {
      isFirstRender.value = false
    }

    return () => {
      return isFirstRender.value ? null : <Dialog v-slots={slots} {...props} {...attrs} />
    }
  },
})

干這種活還是用tsx用起來比較順手，寫的時候注意把props、slot、attrs這些透傳下去即可

vNode

其實在API方式調(diào)用時，我們還可以傳vNode給組件。

修改組件

修改組件中需要支持vNode的插槽

        <component :is="props.title" v-if="isVNode(props.title)"></component>
        <slot name="title" v-else>
          <div class="title">
            <div class="i-carbon:warning mr-2 color-#FF9A42" />
            {{ props.title }}
          </div>
        </slot>

使用vNode

  showPosDialog({
   // title: '是否移除該商品？',
    title: <div>vNode:是否移除該商品？</div>,
    onConfirm() {
      emits('delete')
    },
  })

思考

實現(xiàn)過程沒有那么順暢，但也算是填補一部分技術空白吧。如果大佬有更好的想法，歡迎在評論區(qū)交流呀

別人都用hooks我為什么用工具函數(shù)

反正各有各的看法吧，用hooks可以方便用vue的響應式數(shù)據(jù)、生命周期鉤子等等，但是只能在vue組件中去調(diào)用。我的實現(xiàn)沒有用到vue的這些東西，所以就寫成工具函數(shù)了，在哪都可以調(diào)用。

個人覺得，沒有用到vue這些東西，沒必要強制hooks化。

再看vue的hooks使用，實際上就是在構建之初實例化一次，后續(xù)的"消費"在于調(diào)用返回的函數(shù)。像我這種API的對話框，就是創(chuàng)建的時候?qū)嵗淮?，關閉后就銷毀了。沒有復用一說，也就沒必要寫成hooks了

至于為什么不復用，如果同時存在兩個API調(diào)起的對話框，你只有一個實例（復用方案），那無法滿足需求了

總結

相比于我之前封裝的組件，我覺得對話框?qū)儆诼杂刑厥獾慕M件吧。

得掛載body下防止樣式層級受影響
需要支持API方式調(diào)用
初始不渲染
支持vNode傳參

到此這篇關于使用Vue手寫一個對話框的文章就介紹到這了,更多相關Vue對話框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue3組合式API獲取子組件屬性和方法的代碼實例
這篇文章主要為大家詳細介紹了vue3組合式API獲取子組件屬性和方法的代碼實例,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2024-01-01
vue3中批量全局注冊組件實例詳解
在vue中，我們在main.ts引入的全局注冊的組件是可以不需要import導入而直接使用的，使用的時候是自己全局注冊組件時的名稱，而不是組件名，這篇文章主要介紹了vue3中批量全局注冊組件,需要的朋友可以參考下
2023-05-05
聊聊vue番茄鐘與electron?打包問題
這篇文章主要介紹了vue番茄鐘與electron?打包問題，本文通過實例結合相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-06-06
Vue實現(xiàn)簡單的跑馬燈
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單的跑馬燈，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-05-05
el-select自定義指令實現(xiàn)觸底加載分頁請求options數(shù)據(jù)(完整代碼和接口可直接用)
某些情況下,下拉框需要做觸底加載,發(fā)請求,獲取option的數(shù)據(jù),下面給大家分享el-select自定義指令實現(xiàn)觸底加載分頁請求options數(shù)據(jù)(附上完整代碼和接口可直接用),感興趣的朋友參考下吧
2024-02-02
Vue監(jiān)控路由與路由參數(shù), 刷新當前頁面數(shù)據(jù)的方法匯總
這篇文章主要介紹了Vue監(jiān)控路由與路由參數(shù), 刷新當前頁面數(shù)據(jù)的幾種方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-10-10
vue編譯打包本地查看index文件的方法
下面小編就為大家分享一篇vue編譯打包本地查看index文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vue自定義指令實現(xiàn)v-tap插件
這篇文章主要為大家詳細介紹了vue自定義指令實現(xiàn)v-tap插件的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
vue3中使用v-model實現(xiàn)父子組件數(shù)據(jù)同步的三種方案
這篇文章主要介紹了vue3中使用v-model實現(xiàn)父子組件數(shù)據(jù)同步的三種方案,如果只有一個匿名v-model的傳遞的話,可以使用vue3.3新添加的編譯宏,defineModel來使用,每種方案結合示例代碼給大家介紹的非常詳細,需要的朋友可以參考下
2023-10-10
在vue中實現(xiàn)PDF文件流預覽功能
這篇文章主要為大家詳細介紹如何在vue中實現(xiàn)PDF文件流預覽功能,文中的實現(xiàn)步驟講解詳細,對大家的學習或工作具有一定的參考價值,需要的可以參考一下
2023-12-12