元件封裝：
1、屬性：props
2、樣式：computed
3、事件：
（1）若多次呼叫元件事件**一致，且沒有對父元件傳遞過來的資料進行修改的情況。將事件統一書寫在元件內部。
（2）若多次呼叫元件事件**不一致，或對父元件傳遞過來的資料需要修改。使用自定義事件： $emit(「事件名」，引數);
例：電子**商品詳情頁中單擊不同的購買選項彈出不同的彈窗
pages頁面中的**
<
!-- 購買選項 --
>
"popupshow('car')"
>
<
/view>
"popupshow('address')"
>
<
/view>
"popupshow('service')"
>
<
/view>
<
/view>
<
!-- 底部彈窗 | 加入購物車 --
>
"popupclassname.car"
btntext=
"加入購物車"
@popuphide=
"popuphide('car')"
@btntap=
"joincar"
>
<
/popup>
<
!-- 底部彈窗 | 收穫位址 --
>
"popupclassname.address"
btntext=
"選擇新位址"
@popuphide=
"popuphide('address')"
@btntap=
"selectnewaddress"
>
<
/popup>
<
!-- 底部彈窗 | 服務說明 --
>
"popupclassname.service"
btntext=
"確定"
@popuphide=
"popuphide('service')"
@btntap=
"servicebtntap"
>
<
/popup>
<
/template>
import popup from
'@/components/popup.vue'
;export
default
,data()
}}, methods:
,// 彈窗隱藏
popuphide
(key)
,300)}
,// 彈窗中加入購物車按鈕事件
joincar()
,// 彈窗中選擇新位址按鈕事件
selectnewaddress()
,// 彈窗中服務說明確定按鈕
servicebtntap()
},// 生命週期函式---監聽頁面返回
onbackpress()
}}}<
/script>
="_popup"
:class
="classname"
>
="mask" @tap.self=
"$emit('popuphide')"
>
="content"
>
>
"$emit('btntap')"
class
="bottombutton"
>
}<
/view>
<
/view>
<
/view>
<
/view>
<
/template>
// 底部彈窗元件
export
default
,data()
}}<
/script>
._popup
.mask
.content
.bottombutton
.none
@keyframes maskhide
to} @keyframes maskcontenthide
to} @keyframes maskshow
to} @keyframes maskcontentshow
to}._popup.hide .mask
._popup.hide .content
._popup.show
._popup.show .mask
._popup.show .content
<
/style>
uni app封裝元件以及元件的使用方法
第二步 在子元件中寫入自己想要封裝的 tabbars tab的標題內容 tabindex標題內容的索引值 scrollstyle父級樣式設定 scrollitemstyle每乙個tab內容樣式設定 第三步 父元件頁面引入需要使用的子元件import pagetab from components p...
Axios封裝與父 子元件
全域性設定網路超時 axios.defaults.timeout 10000 設定請求頭資訊 axios.defaults.headers.post content type axios.defaults.headers.put content type axios.interceptors.req...
uni app元件封裝與傳值
在產品的介紹,分類等模組上,這些頁面的布局,樣式等都是類似的,所以,在這裡將它們封裝成乙個元件,然後在頁面當中,直接呼叫。在當前專案當中,新建乙個component資料夾,這個資料夾專門用來存放我們要使用的元件,然後在component資料夾下右擊,新建資料夾introduce,這裡就是我們要用的元...