快捷導(dǎo)航

利用Vue3實現(xiàn)一個可以用js調(diào)用的組件

更新時間：2021年08月13日 11:14:53 作者：coding小蝦米

最近遇到個功能要求,想要在全局中調(diào)用組件,而且要在某些js文件內(nèi)調(diào)用,所以這篇文章主要給大家介紹了關(guān)于如何利用Vue3實現(xiàn)一個可以用js調(diào)用的組件的相關(guān)資料,需要的朋友可以參考下

前言

項目開發(fā)中基本都會用到組件庫，但是設(shè)計稿樣式和功能不一定和組件庫相同，尤其像是消息提示彈窗、確認(rèn)彈窗，各個項目各個設(shè)計師都有自己的一套風(fēng)格。雖然我們可以使用組件庫中的組件對其進(jìn)行樣式覆蓋來使用。但是一些定制功能還是不容易修改，這種情況我們就會選擇自定義組件，然后通過 components 屬性引入頁面，顯式寫入標(biāo)簽調(diào)用的，對于消息提示這種給用戶簡單的提示或操作，大多數(shù)常用的ui庫類似功能都支持通過js調(diào)用。我們也可以參照ui庫的調(diào)用方式，實現(xiàn)一個通過js函數(shù)調(diào)用的自定義組件。

一、常規(guī)Vue組件

假如我們需要實現(xiàn)一個確認(rèn)框，點(diǎn)擊按鈕打開確認(rèn)框，點(diǎn)擊確認(rèn)框的確定和取消按鈕關(guān)閉確認(rèn)框，并調(diào)用對應(yīng)方法。

1. 組件主要代碼：

src/components/Confirm/Confirm.vue

2. 使用方式

3. 實現(xiàn)效果

二、改為js調(diào)用組件

上面的調(diào)用組件的方式非常繁瑣，既要引入，又要處理各中操作的回調(diào)，并且組件dom節(jié)點(diǎn)插入到當(dāng)前頁面之下，樣式有可被組件內(nèi)容覆蓋或者受到其他影響。

我們希望實現(xiàn)的結(jié)果：通過js函數(shù)的方式調(diào)用組件，函數(shù)返回一個promise，確認(rèn)then，取消catch`，例如:

Confirm({
  title: '',
  message: ''
}).then(() => {
  // 點(diǎn)擊確認(rèn)
}).catch(() => {
  // 點(diǎn)擊取消
})

1. 實現(xiàn)步驟：

首先確認(rèn)需要返回一個 promise 對象。創(chuàng)建一個方法，首先返回一個 promise 對象。
使用Vue 的 createApp 方法創(chuàng)建 Confirm 組件實例。使用 createApp 第二個參數(shù)，我們可以將根 prop 傳遞給應(yīng)用程序，將組件所需要的數(shù)據(jù)傳入。
創(chuàng)建一個節(jié)點(diǎn)，用作將組件實例掛載的容器，將節(jié)點(diǎn)append到body中。
將組件實例掛載到創(chuàng)建的節(jié)點(diǎn)上，就實現(xiàn)組件的上級是body，不會受到調(diào)用頁面影響。
當(dāng)點(diǎn)擊確定調(diào)用 resolve，并卸載當(dāng)前組件，移除dom。點(diǎn)擊取消調(diào)用 reject 并卸載當(dāng)前組件，移除dom。

2. 具體實現(xiàn)代碼：

修改 Confirm 組件js部分，將 onConfirm 和 onCancel 從props 中傳遞進(jìn)來，方便組件實例使用。

// src/components/Confirm/Confirm.vue
<script>
export default {
  name: 'Confirm',
  props: {
    title: {
      type: String,
      default: '提示'
    },
    message: {
      type: String,
      default: '默認(rèn)提示信息'
    },
    confirmBtnText: {
      type: String,
      default: '確認(rèn)'
    },
    cancelBtnText: {
      type: String,
      default: '取消'
    },
    onConfirm: {
      type: Function,
      default: () => {}
    },
    onCancel: {
      type: Function,
      default: () => {}
    }
  }
}
</script>

在同目錄下新建 index.js文件，將 onConfirm、onCancel 等參數(shù)通過props傳遞到組件，在實例中就能接收到事件回調(diào)。

// src/components/Confirm/index.js
import { createApp } from 'vue'
import Confirm from './Confirm'
function confirm ({ title, message, confirmBtnText, cancelBtnText }) {
  return new Promise((resolve, reject) => {
    // 實例化組件，createApp第二個參數(shù)是props
    const confirmInstance = createApp(Confirm, {
      title: title || '提示',
      message: message || '確認(rèn)消息',
      confirmBtnText: confirmBtnText || '確定',
      cancelBtnText: cancelBtnText || '取消',
      onConfirm: () => {
        unmount()
        resolve()
      },
      onCancel: () => {
        unmount()
        reject(new Error())
      }
    })
    // 卸載組件
    const unmount = () => {
      confirmInstance.unmount()
      document.body.removeChild(parentNode)
    }
    // 創(chuàng)建一個掛載容器
    const parentNode = document.createElement('div')
    document.body.appendChild(parentNode)
    // 掛載組件
    confirmInstance.mount(parentNode)
  })
}

export default confirm

使用組件

setup () {
  const showConfirm = () => {
    Confirm({
      title: '標(biāo)題',
      message: '內(nèi)容'
    }).then(() => {
      console.log('點(diǎn)擊確認(rèn)')
    }).catch(() => {
      console.log('點(diǎn)擊取消')
    })
  }
  return {
    showConfirm
  }
}