doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
name
="viewport"
content
="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
>
<
meta
charset
="utf-8"
>
<
title
>title
title
>
<
style
>
.modal
.dialog
.dialog-header
.dialog-header h3,.dialog-header span
.dialog-header span
.in.in .dialog
style
>
head
>
<
body
>
<
input
type
="button"
value
="click"
id="btn"
>
<
div
style
="height: 200px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 200px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 200px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 200px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 200px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 20px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 20px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 20px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 20px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 20px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 20px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 20px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 20px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 20px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 20px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 20px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 20px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 20px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 20px;width: 100%;"
> dddddddd
div>
<
div
style
="height: 20px;width: 100%;"
> dddddddd
div>
<
div
class
="modal"
id="modal"
>
<
div
class
="dialog"
style
="width: 300px;"
>
<
header
class
="dialog-header"
>
<
h3>this is dialog title
h3>
<
span
id="close"
>
×span
>
header
>
<
div
class
="dialog-content"
>
this is dialog content
div>
div>
div>
<
script
>
varobtn
=document.getelementbyid(
"btn");
varomodal
=document.getelementbyid(
"modal");
varoclose
=document.getelementbyid(
"close");
varbodyel
=document.body
obtn.addeventlistener(
"click",
function
())
vartimer
=settimeout(
function
(),0
); });
oclose.addeventlistener(
"click",
function
(),200
);
= 'relative'
});
//封裝=>說明一點，這裡用了jquery選擇器，也可以替換掉。
/** 封裝之後可以建立dialog物件，並且可以配置其位置和大小，在專案中可以在任何地方建立使用，不必每個彈窗都寫一遍。
* *///
預設配置
vardefaultconfig
=
function
dialog(config);
$($('#
'+config.id).children()[
0]).css();
}dialog.prototype =);
},hide:
function
(),
200);}}
script
>
body
>
html
>
登入彈框階段總結（總結封裝思想）
經過這幾天寫登入彈框碰到各種問題，總結了一下老是出錯誤的地方，很大一部分原因是沒有成熟的程式設計思想，一遇頁面顯示的小bug後，就很難找出原因，很難進行下一步 感覺要做出改變的就是培養封住思想，先是要把資料的邏輯步驟用流程圖寫出來，把每個過車封裝成特定功能的元件或者函式 忽略內部的執行過程 把每個元...
vue封裝乙個彈框元件
這是乙個提示框和對話方塊，例 取消 div div class kz btn click took 確定 div div div div template script export default took function script style scoped kz cont kz cont ...
toast彈框元件的封裝 外掛程式方式
我們這裡打算做乙個彈框功能 當我們點選加入購物車的時候 就會彈出這個彈框，把它做成外掛程式方式的好處，我們引用的時候就很簡單，只需要用this.toast就可以了，首先我們要寫乙個外掛程式 123 45627 然後我們需要根據這個元件構建元件物件，並把這個物件上傳到vue.prototype上去 方...