前言

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

一、常規(guī)Vue組件

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

1. 組件主要代碼：

src/components/Confirm/Confirm.vue

2. 使用方式

3. 實(shí)現(xiàn)效果

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

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

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

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

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

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

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

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

// 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ù)通過(guò)props傳遞到組件，在實(shí)例中就能接收到事件回調(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) => {
    // 實(shí)例化組件，createApp第二個(gè)參數(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)建一個(gè)掛載容器
    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
  }
}

3. 實(shí)現(xiàn)效果展示

總結(jié)

到此這篇關(guān)于利用Vue3實(shí)現(xiàn)一個(gè)可以用js調(diào)用的組件的文章就介紹到這了,更多相關(guān)Vue3實(shí)現(xiàn)js調(diào)用的組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論