vue組件拓展吞杭,或封裝成函數(shù)調(diào)用思路

模版樣式

首先需要?jiǎng)?chuàng)建一個(gè)基礎(chǔ)的組件恼除,無(wú)論是拓展還是封裝都是基于一個(gè)基礎(chǔ)的Vue組件。

  1. 創(chuàng)建組件
    這里使用tailwind提供的組件封裝一個(gè)彈窗
    index.vue
<template>
  <TransitionRoot as="template" :show="open">
    <Dialog class="relative z-10" @close="open = false">
      <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
      </TransitionChild>

      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
          <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leave-from="opacity-100 translate-y-0 sm:scale-100" leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
            <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
              <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                  <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                    <ExclamationTriangleIcon class="h-6 w-6 text-red-600" aria-hidden="true" />
                  </div>
                  <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                    <DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">Deactivate account</DialogTitle>
                    <div class="mt-2">
                      <p class="text-sm text-gray-500">Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
                <button type="button" class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto" @click="open = false">Deactivate</button>
                <button type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto" @click="closehandle" ref="cancelButtonRef">Cancel</button>
              </div>
            </DialogPanel>
          </TransitionChild>
        </div>
      </div>
    </Dialog>
  </TransitionRoot>
</template>

<script lang="ts" setup>
import { ref ,onMounted} from 'vue'
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'

const open = ref(false)
interface propsT {
    text: string,
    title: string,
    close:Function
}
const props = defineProps<propsT>()

onMounted(()=>{
    if(props.show){
        open.value = props.show
    }
})
const closehandle = ()=>{
  open.value = false;
  props.close()
}
</script>
  1. 函數(shù)封裝
import confirm from './index.vue';
import {App, createApp} from 'vue';

class conFirm {

    static self: conFirm;

    app: App|null = null
    div?:HTMLElement 
    constructor() {
    }
    public static getInterce(){
        
        if(!this.self){
            this.self = new conFirm()
        }
        return this.self
    }
  //傳入?yún)?shù)
    show(title:any,text:any) {
        if(!this.div) this.div = document.createElement('div');
        this.app = createApp( confirm,{
            title,
            text,
            show:true,
            close: ()=> this.closeHandle()
        })
        document.body.appendChild(this.div)
        this.app.mount(this.div)
    }

    // 卸載組件處理
    closeHandle() {
        this.app?.unmount()
        this.div?.remove()
    }
}
export default conFirm

  1. 調(diào)用
conFirm.getInterce().show(
    'ttttt',
    'ccccc'
  )
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末乍丈,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子把将,更是在濱河造成了極大的恐慌轻专,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,651評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件察蹲,死亡現(xiàn)場(chǎng)離奇詭異请垛,居然都是意外死亡催训,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門宗收,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)漫拭,“玉大人,你說(shuō)我怎么就攤上這事混稽〔勺ぃ” “怎么了?”我有些...
    開封第一講書人閱讀 162,931評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵匈勋,是天一觀的道長(zhǎng)礼旅。 經(jīng)常有香客問我,道長(zhǎng)洽洁,這世上最難降的妖魔是什么各淀? 我笑而不...
    開封第一講書人閱讀 58,218評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮诡挂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘临谱。我一直安慰自己璃俗,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,234評(píng)論 6 388
  • 文/花漫 我一把揭開白布悉默。 她就那樣靜靜地躺著城豁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪抄课。 梳的紋絲不亂的頭發(fā)上唱星,一...
    開封第一講書人閱讀 51,198評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音跟磨,去河邊找鬼间聊。 笑死,一個(gè)胖子當(dāng)著我的面吹牛抵拘,可吹牛的內(nèi)容都是我干的哎榴。 我是一名探鬼主播,決...
    沈念sama閱讀 40,084評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼僵蛛,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼尚蝌!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起充尉,我...
    開封第一講書人閱讀 38,926評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤飘言,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后驼侠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體姿鸿,經(jīng)...
    沈念sama閱讀 45,341評(píng)論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡谆吴,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,563評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了般妙。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片纪铺。...
    茶點(diǎn)故事閱讀 39,731評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖碟渺,靈堂內(nèi)的尸體忽然破棺而出鲜锚,到底是詐尸還是另有隱情,我是刑警寧澤苫拍,帶...
    沈念sama閱讀 35,430評(píng)論 5 343
  • 正文 年R本政府宣布芜繁,位于F島的核電站,受9級(jí)特大地震影響绒极,放射性物質(zhì)發(fā)生泄漏骏令。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,036評(píng)論 3 326
  • 文/蒙蒙 一垄提、第九天 我趴在偏房一處隱蔽的房頂上張望榔袋。 院中可真熱鬧,春花似錦铡俐、人聲如沸凰兑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)吏够。三九已至,卻和暖如春滩报,著一層夾襖步出監(jiān)牢的瞬間锅知,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工脓钾, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留售睹,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,743評(píng)論 2 368
  • 正文 我出身青樓可训,卻偏偏與公主長(zhǎng)得像侣姆,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子沉噩,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,629評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容