開發過程中彈窗是必不可少的,如果我們每次需要彈窗都要重新開發,既浪費了人力又影響了效能,那麼元件是不錯的選擇。
<
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類專案使用,獨立的內容頁更方便管理,頁面的也不易受其它頁面的影響,而且內容頁可以是靜態或動...