uview的折叠面板和u-tabs的扩展

 第一个：首先要安装uview UI框架 （已发布如何安装）

 第二个：使用uview 中的折叠面板（Collapse 折叠面板 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架）

  第三点：明白一个插槽使用方式（代码如下）

  
    标题内容
    
  

修改的内容是根据原型图来的 

注意点：如果title 上有 点击效果 一定要使用 click.stop  可以阻止change 原本事件的发生-----吃过亏一定 要注意的

下方是 我修改的一部分的内容 可以参考一下

先看效果图、

上代码

u-tabs 的扩展 一般都是一个标题和一个徽章  现在修改为 标题（剩余条数）

先看效果

下方是代码（技术要点：利用了计算属性 ）

data() {
		return {
			notFollowUpCount: 40,
			followedUpCount: 0,
			 
		};
	},
	computed: {
		tabList() {
			return [{ name: `未跟进（${this.notFollowUpCount}）` }, { name: `已跟进（${this.followedUpCount}）` }];
		}
	},

折叠面板的整体

.custom-collapse-item {
	border-radius: 10px; /* 设置圆角大小 */
	border: 1px solid #ccc; /* 设置边框样式 */
	margin: 5px;
}

样式修改成 圆角