獨立的彈窗元件

簡單案例展示

1、彈窗js

import vue from 'vue'

;export default function dialogmodel(components, props))}
}).$mount()
; 
//獲取元件例項
const comp = vm.$children
[0];
//在元件例項中新增刪除事件
comp.remove =()
=>
//掛靠在body上);
//返回元件例項
return comp;
}

>

class
="dialog"
v-if
="isshow"
>
>
}h1>
>
}h1>
@click
="closebox"
>
關閉button
>
@click
="suresbox"
>
確定button
>
div>
template
>
>
export
default},
props:
, methods:
,hide()
,closebox()
,suresbox()
}}script
>

>

class
="test1"
>
@click
="showdia"
>
按鈕button
>
div>
template
>
>
//引入彈窗元件
import dialogs from
'@/components/dialogs'
//引入彈窗例項
import dialogmodel from
'@/utils/dialog.js'
export
default})
dia.
show()
;}}}
script
>

彈窗元件的開發

開發過程中彈窗是必不可少的，如果我們每次需要彈窗都要重新開發，既浪費了人力又影響了效能，那麼元件是不錯的選擇。style login title title close style 對應的 html標籤如下，先注釋掉，一會動態加進body。input type button value 1 inpu...

封裝vue的彈窗元件

先寫乙個工具函式,建立元件例項 建立指定元件例項並掛載於body上 import vue from vue export default function create component,props mount 更新操作 1.上面vm幫我們建立元件例項 2.通過 children獲取該元件例項 c...

獨立元件開發打包

元件單獨打包 先在src下面新建hymenucsg.js檔案 然後在build下的webpack.base.conf.dist.js裡面 設定入口檔案hymenucsg src hymenucsg.js csg 最後執行打包命令 npm run dist dev 之後會在dist下面生成元件的js和...