在vue 專案中 會有很多類似的內容 因公司 經常做支付這一塊 像下面的類似的功能還有很多地方要用 因此嘗試 乙個很簡單的小封裝
//子元件
="sub-pay"
>
="pay-left"
>
="total"
>
￥<
/span>
}<
/div>
="pay-amount"
>實付金額<
/div>
<
/div>
="pay-right" @click=
"onpaybtn"
>
}<
/div>
<
/slot>
//插槽
<
/div>
//子元件
export
default
, btnname:},
methods:
}}
//父元件使用
"立即支付"
:payamt = form.payamt @clickbtn=
"onpay"
>
//特殊情況下需要在子元件加內容 因在子元件已經加入slot 所以可以在子元件中加入內容
="pay-detail"
>
明細<
/p>
"/static/imgs/ico-up-arrow.png" alt=
"">
<
/div>
<
/subpay>如果在父元件中想更改 子元件的樣式 需要 使用深度作用選擇器 用到 /deep/ 下面是使用方法
因為直接.sub-pay .pay-right{} 解析不到類名
.sub-pay/deep/.pay-right
vue封裝svgIcon公共元件
1 在components新建common svgicon.vue 2 在src下新建assets image icons svg用於存放.svg檔案 3 在src下新建assets image icons index.js import vue from vue import svgicon fr...
vue 封裝元件
一 通過install 封裝 1 建立元件資料夾包含 vue檔案和對應的.js檔案 如圖 2 完成元件模板 這是乙個公共元件內容 3 在相應的js內註冊元件 list.js檔案 import mylist from list.vue const list export default list 匯入...
Vue封裝分頁元件
使用vue做雙向繫結的時候，可能經常會用到分頁功能 接下來我們來封裝乙個分頁元件 先定義樣式檔案 pagination.css ul,li page bar page button disabled page bar li page bar li first child a page bar a p...