彈窗元件的開發

開發過程中彈窗是必不可少的，如果我們每次需要彈窗都要重新開發，既浪費了人力又影響了效能，那麼元件是不錯的選擇。

<

style

>

* .login

.title

.title .close

<

/style

>

*對應的 html標籤如下，先注釋掉，一會動態加進body。

<

input

type="button"

value="1"

>

<

input

type="button"

value="2"

>

<

input

type="button"

value="3"

>

<

script

>

window.onload = function()

ainput[1].onclick = function() );}}

function

dialog()

}dialog.prototype.init = function(opt)

dialog.prototype.create = function()

dialog.prototype.setdata = function() else

if (this.settings.dir == 'right')

}// 合併物件

function

extend(obj1, obj2)

}// 獲取可視區的寬

function

viewwidth()

// 獲取可視區的高

function

viewheight()

<

/script

>

點選第乙個按鈕彈出中間的彈窗；

點選第二個按鈕彈出右下角的彈窗；

獨立的彈窗元件

簡單案例展示 1 彈窗js import vue from vue export default function dialogmodel components,props mount 獲取元件例項 const comp vm.children 0 在元件例項中新增刪除事件 comp.remove ...

封裝vue的彈窗元件

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

lhgDialog彈窗提示視窗元件

lhgdialog彈窗提示視窗元件 lhgdialog是乙個功能強大且相容面廣的對話方塊元件，它擁有精緻的介面與友好的介面 本元件主要以iframe方式載入單獨頁面為主的彈出視窗，由其適用於後台管理和webos類專案使用，獨立的內容頁更方便管理，頁面的也不易受其它頁面的影響，而且內容頁可以是靜態或動...