這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個超集，而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。 一、! 非空斷言操作符 在上下文中當類型檢查器無法斷定類型時，一個新的尾碼表 ...
隨著技術的發展，開發的複雜度也越來越高，傳統開發方式將一個系統做成了整塊應用，經常出現的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發而動全身。
通過組件化開發，可以有效實現單獨開發，單獨維護，而且他們之間可以隨意的進行組合。大大提升開發效率低，降低維護成本。
今天給大家介紹的一款組件前端Vue仿微信我的菜單欄組件按鈕組件；附源碼下載地址 ： https://ext.dcloud.net.cn/plugin?id=13610
效果圖如下：
實現代碼如下
cc-wxBtn
使用方法
<!-- mySrc:圖片地址 title：標題 @menuClick：按鈕點擊 -->
<cc-wxBtn mySrc="../../static/image/member-menu4.png" title="我的餘額" @menuClick="menuClick" ></cc-wxBtn>
// 按鈕點擊事件
menuClick(name) {
uni.showModal({
title:'點擊菜單',
content:'點擊菜單名稱 = ' + name
})
},
HTML代碼實現部分
<template>
<view class="content">
<!-- mySrc:圖片地址 title：標題 @menuClick：按鈕點擊 -->
<cc-wxBtn mySrc="../../static/image/member-menu4.png" title="我的餘額" @menuClick="menuClick" ></cc-wxBtn>
<!-- mySrc:圖片地址 title：標題 @menuClick：按鈕點擊 -->
<cc-wxBtn mySrc="../../static/image/member-menu2.png" title="線上客服" @menuClick="menuClick" ></cc-wxBtn>
<!-- mySrc:圖片地址 title：標題 @menuClick：按鈕點擊 -->
<cc-wxBtn mySrc="../../static/image/member-menu3.png" title="邀請有禮" @menuClick="menuClick" ></cc-wxBtn>
<!-- mySrc:圖片地址 title：標題 @menuClick：按鈕點擊 -->
<cc-wxBtn mySrc="../../static/image/member-menu5.png" title="關於我們" @menuClick="menuClick" ></cc-wxBtn>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
menuClick(name) {
uni.showModal({
title:'點擊菜單',
content:'點擊菜單名稱 = ' + name
})
},
}
}
</script>
<style>
page {
background-color: white;
margin-bottom: 50px;
}
</style>
