v2.1.6

Colorui-UniApp/Readme.md

@@ -14,11 +14,11 @@ ColorUI在语雀有个群友共同在维护的知识库，里面有一些群友
 ## 开始使用
 下载源码解压，复制根目录的 `/colorui` 文件夹到你的根目录
 
-`App.vue` 引入关键Css `main.css` `icon.css`
+`App.vue` 引入关键Css `main.css` `cuIcon.css`
 ```
 <style>
     @import "colorui/main.css";
-	@import "colorui/icon.css";
+	@import "colorui/cuIcon.css";
 	@import "app.css"; /* 你的项目css */
 	....
 </style>
@@ -103,6 +103,10 @@ Vue.component('cu-custom',cuCustom)
 
 ## 更新日志
 
+ * 2019年4月25日 v2.1.6
+    *  删除var变量 向下兼容安卓APP
+	*  优化单选等表单控件
+
  * 2019年4月25日 v2.1.5
     *  优化图片上传
     *  优化一些点击区域过小
@@ -136,5 +140,5 @@ Vue.component('cu-custom',cuCustom)
 
 * 2019年3月25日 v2.1.0
     *  完成元素，组件移植
-	*  icon文件更改名称，避免图标冲突
+	*  cuIcon文件更改名称，避免图标冲突
 	*  针对不同端口做了优化

Colorui-UniApp/main.js

@@ -22,7 +22,7 @@ const app = new Vue({
 })
 app.$mount()
 
-
+ 
 
 
 

Colorui-UniApp/pages.json

@@ -3,155 +3,103 @@
 		//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
 			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/basics/layout",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/basics/background",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/basics/text",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/basics/icon",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/basics/button",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/basics/design",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/basics/tag",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/basics/avatar",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/basics/progress",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/basics/shadow",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/basics/loading",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/component/bar",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/component/nav",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/component/list",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/component/card",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/component/form",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/component/timeline",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/component/chat",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/component/swiper",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/component/modal",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		},
 		{
 			"path": "pages/component/steps",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		}, {
 			"path": "pages/plugin/indexes",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		}, {
 			"path": "pages/plugin/animation",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		}, {
 			"path": "pages/plugin/drawer",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		}, {
 			"path": "pages/plugin/verticalnav",
-			"style": {
-				"navigationBarTitleText": ""
-			}
+			"style": {}
 		}
 	],
 	"globalStyle": {
@@ -165,5 +113,15 @@
 		"navigationStyle": "custom",
 		"navigationBarTextStyle": "white"
 	},
-	"usingComponts": true
+	"usingComponts": true,
+		"condition": { //模式配置，仅开发期间生效
+		"current": 0, //当前激活的模式(list 的索引项)
+		"list": [{
+				"name": "表单", //模式名称
+				"path": "pages/component/form", //启动页面
+				"query": "" //启动参数
+			}
+		]
+	}
+
 }

Colorui-UniApp/pages/basics/button.vue

@@ -15,7 +15,7 @@
 		<view class="padding flex flex-wrap justify-between align-center bg-white">
 			<button class="cu-btn">默认</button>
 			<button class="cu-btn round">圆角</button>
-			<button class="cu-btn icon">
+			<button class="cu-btn cuIcon">
 				<text class="cuIcon-emojifill"></text>
 			</button>
 		</view>
@@ -92,7 +92,7 @@
 			<button class="cu-btn block line-orange lg">
 				<text class="cuIcon-upload"></text> 图标</button>
 			<button class="cu-btn block bg-blue margin-tb-sm lg">
-				<text class="cuIcon-loading2 iconfont-spin"></text> 加载</button>
+				<text class="cuIcon-loading2 cuIconfont-spin"></text> 加载</button>
 			<button class="cu-btn block bg-black margin-tb-sm lg" loading> 原生加载</button>
 		</view>
 	</view>

Colorui-UniApp/pages/basics/home.vue

@@ -8,7 +8,7 @@
 				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
 					<view class="nav-title">{{item.title}}</view>
 					<view class="nav-name">{{item.name}}</view>
-					<text :class="'cuIcon-' + item.icon"></text>
+					<text :class="'cuIcon-' + item.cuIcon"></text>
 				</navigator>
 			</view>
 			<view class="cu-tabbar-height"></view>
@@ -25,64 +25,67 @@
 						title: '布局',
 						name: 'layout',
 						color: 'cyan',
-						icon: 'newsfill'
+						cuIcon: 'newsfill'
 					},
 					{
 						title: '背景',
 						name: 'background',
 						color: 'blue',
-						icon: 'colorlens'
+						cuIcon: 'colorlens'
 					},
 					{
 						title: '文本',
 						name: 'text',
 						color: 'purple',
-						icon: 'font'
+						cuIcon: 'font'
 					},
 					{
 						title: '图标 ',
 						name: 'icon',
 						color: 'mauve',
-						icon: 'icon'
+						cuIcon: 'cuIcon'
 					},
 					{
 						title: '按钮',
 						name: 'button',
 						color: 'pink',
-						icon: 'btn'
+						cuIcon: 'btn'
 					},
 					{
 						title: '标签',
 						name: 'tag',
 						color: 'brown',
-						icon: 'tagfill'
+						cuIcon: 'tagfill'
 					},
 					{
 						title: '头像',
 						name: 'avatar',
 						color: 'red',
-						icon: 'myfill'
+						cuIcon: 'myfill'
 					},
 					{
 						title: '进度条',
 						name: 'progress',
 						color: 'orange',
-						icon: 'icloading'
+						cuIcon: 'icloading'
 					},
 					{
 						title: '边框阴影',
 						name: 'shadow',
 						color: 'olive',
-						icon: 'copy'
+						cuIcon: 'copy'
 					},
 					{
 						title: '加载',
 						name: 'loading',
 						color: 'green',
-						icon: 'loading2'
+						cuIcon: 'loading2'
 					}
 				],
 			};
+		},
+		onShow() {
+			console.log("success")
 		}
 	}
 </script>

Colorui-UniApp/pages/basics/icon.vue

@@ -4,11 +4,11 @@
 		<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
 			<view class="search-form round">
 				<text class="cuIcon-search"></text>
-				<input type="text" placeholder="搜索icon" confirm-type="search" @input="searchIcon"></input>
+				<input type="text" placeholder="搜索cuIcon" confirm-type="search" @input="searchIcon"></input>
 			</view>
 		</view>
 		<view class="cu-list grid col-3">
-			<view class="cu-item" v-for="(item,index) in icon" :key="index" v-if="item.isShow">
+			<view class="cu-item" v-for="(item,index) in cuIcon" :key="index" v-if="item.isShow">
 				<text class="lg text-gray" :class="'cuIcon-' + item.name"></text>
 				<text>{{item.name}}</text>
 			</view>
@@ -21,7 +21,7 @@
 		data() {
 			return {
 				CustomBar: this.CustomBar,
-				icon: [{
+				cuIcon: [{
 					name: 'appreciate',
 					isShow: true
 				}, {
@@ -901,7 +901,7 @@
 					name: 'dianhua',
 					isShow: true
 				}, {
-					name: 'icon',
+					name: 'cuIcon',
 					isShow: true
 				}, {
 					name: 'loading2',
@@ -916,7 +916,7 @@
 		methods: {
 			searchIcon(e) {
 				let key = e.detail.value.toLowerCase();
-				let list = this.icon;
+				let list = this.cuIcon;
 				for (let i = 0; i < list.length; i++) {
 					let a = key;
 					let b = list[i].name.toLowerCase();
@@ -926,7 +926,7 @@
 						list[i].isShow = false
 					}
 				}
-				this.icon = list
+				this.cuIcon = list
 			}
 		}
 	}

Colorui-UniApp/pages/basics/loading.vue

@@ -3,7 +3,7 @@
 		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">加载</block>
 			<block slot="right">
 				<view class="action">
-					<view class="cu-load load-icon" :class="!isLoad?'loading':'over'"></view>
+					<view class="cu-load load-cuIcon" :class="!isLoad?'loading':'over'"></view>
 				</view>
 			</block>
 		</cu-custom>

Colorui-UniApp/pages/component/home.vue

@@ -7,7 +7,7 @@
 				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
 					<view class="nav-title">{{item.title}}</view>
 					<view class="nav-name">{{item.name}}</view>
-					<text :class="'cuIcon-' + item.icon"></text>
+					<text :class="'cuIcon-' + item.cuIcon"></text>
 				</navigator>
 			</view>
 			<view class="cu-tabbar-height"></view>
@@ -23,61 +23,61 @@
 						title: '操作条',
 						name: 'bar',
 						color: 'purple',
-						icon: 'vipcard'
+						cuIcon: 'vipcard'
 					},
 					{
 						title: '导航栏 ',
 						name: 'nav',
 						color: 'mauve',
-						icon: 'formfill'
+						cuIcon: 'formfill'
 					},
 					{
 						title: '列表',
 						name: 'list',
 						color: 'pink',
-						icon: 'list'
+						cuIcon: 'list'
 					},
 					{
 						title: '卡片',
 						name: 'card',
 						color: 'brown',
-						icon: 'newsfill'
+						cuIcon: 'newsfill'
 					},
 					{
 						title: '表单',
 						name: 'form',
 						color: 'red',
-						icon: 'formfill'
+						cuIcon: 'formfill'
 					},
 					{
 						title: '时间轴',
 						name: 'timeline',
 						color: 'orange',
-						icon: 'timefill'
+						cuIcon: 'timefill'
 					},
 					{
 						title: '聊天',
 						name: 'chat',
 						color: 'green',
-						icon: 'messagefill'
+						cuIcon: 'messagefill'
 					},
 					{
 						title: '轮播',
 						name: 'swiper',
 						color: 'olive',
-						icon: 'album'
+						cuIcon: 'album'
 					},
 					{
 						title: '模态框',
 						name: 'modal',
 						color: 'grey',
-						icon: 'squarecheckfill'
+						cuIcon: 'squarecheckfill'
 					},
 					{
 						title: '步骤条',
 						name: 'steps',
 						color: 'cyan',
-						icon: 'roundcheckfill'
+						cuIcon: 'roundcheckfill'
 					}
 				],
 			};

Colorui-UniApp/pages/component/list.vue

@@ -38,8 +38,8 @@
 				</view>
 			</view>
 			<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
-				<view class="cu-item" v-for="(item,index) in iconList" :key="index" v-if="index<gridCol*2">
-					<view :class="['cuIcon-' + item.icon,'text-' + item.color]">
+				<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*2">
+					<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
 						<view class="cu-tag badge" v-if="item.badge!=0">
 							<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
 						</view>
@@ -181,10 +181,10 @@
 					<view class="content">
 						<view class="text-grey">凯尔</view>
 						<view class="text-gray text-sm flex">
-							<text class="text-cut">
+							<view class="text-cut">
 								<text class="cuIcon-infofill text-red  margin-right-xs"></text>
 								我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
-							</text> </view>
+							</view> </view>
 					</view>
 					<view class="action">
 						<view class="text-grey text-xs">22:20</view>
@@ -197,13 +197,13 @@
 					</view>
 					<view class="content">
 						<view class="text-grey">
-							<text class="text-cut">瓦洛兰之盾-塔里克</text>
+							<view class="text-cut">瓦洛兰之盾-塔里克</view>
 							<view class="cu-tag round bg-orange sm">战士</view>
 						</view>
 						<view class="text-gray text-sm flex">
-							<text class="text-cut">
+							<view class="text-cut">
 								塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
-							</text>
+							</view>
 						</view>
 					</view>
 					<view class="action">
@@ -214,8 +214,8 @@
 				<view class="cu-item ">
 					<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
 					<view class="content">
-						<view class="text-pink"><text class="text-cut">莫甘娜</text></view>
-						<view class="text-gray text-sm flex"> <text class="text-cut">凯尔，你被自己的光芒变的盲目！</text></view>
+						<view class="text-pink"><view class="text-cut">莫甘娜</view></view>
+						<view class="text-gray text-sm flex"> <view class="text-cut">凯尔，你被自己的光芒变的盲目！</view></view>
 					</view>
 					<view class="action">
 						<view class="text-grey text-xs">22:20</view>
@@ -225,10 +225,10 @@
 				<view class="cu-item grayscale">
 					<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
 					<view class="content">
-						<view><text class="text-cut">伊泽瑞尔</text>
+						<view><view class="text-cut">伊泽瑞尔</view>
 							<view class="cu-tag round bg-orange sm">断开连接...</view>
 						</view>
-						<view class="text-gray text-sm flex"> <text class="text-cut"> 等我回来一个打十个</text></view>
+						<view class="text-gray text-sm flex"> <view class="text-cut"> 等我回来一个打十个</view></view>
 					</view>
 					<view class="action">
 						<view class="text-grey text-xs">22:20</view>
@@ -241,11 +241,11 @@
 					</view>
 					<view class="content">
 						<view>
-							<text class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</text>
+							<view class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</view>
 							<view class="cu-tag round bg-orange sm">6人</view>
 						</view>
 						<view class="text-gray text-sm flex">
-							<text class="text-cut"> 伊泽瑞尔：<text class="cuIcon-locationfill text-orange margin-right-xs"></text> 传送中...</text></view>
+							<view class="text-cut"> 伊泽瑞尔：<text class="cuIcon-locationfill text-orange margin-right-xs"></text> 传送中...</view></view>
 					</view>
 					<view class="action">
 						<view class="text-grey text-xs">22:20</view>
@@ -286,53 +286,53 @@
 	export default {
 		data() {
 			return {
-				iconList: [{
-					icon: 'cardboardfill',
+				cuIconList: [{
+					cuIcon: 'cardboardfill',
 					color: 'red',
 					badge: 120,
 					name: 'VR'
 				}, {
-					icon: 'recordfill',
+					cuIcon: 'recordfill',
 					color: 'orange',
 					badge: 1,
 					name: '录像'
 				}, {
-					icon: 'picfill',
+					cuIcon: 'picfill',
 					color: 'yellow',
 					badge: 0,
 					name: '图像'
 				}, {
-					icon: 'noticefill',
+					cuIcon: 'noticefill',
 					color: 'olive',
 					badge: 22,
 					name: '通知'
 				}, {
-					icon: 'upstagefill',
+					cuIcon: 'upstagefill',
 					color: 'cyan',
 					badge: 0,
 					name: '排行榜'
 				}, {
-					icon: 'clothesfill',
+					cuIcon: 'clothesfill',
 					color: 'blue',
 					badge: 0,
 					name: '皮肤'
 				}, {
-					icon: 'discoverfill',
+					cuIcon: 'discoverfill',
 					color: 'purple',
 					badge: 0,
 					name: '发现'
 				}, {
-					icon: 'questionfill',
+					cuIcon: 'questionfill',
 					color: 'mauve',
 					badge: 0,
 					name: '帮助'
 				}, {
-					icon: 'commandfill',
+					cuIcon: 'commandfill',
 					color: 'purple',
 					badge: 0,
 					name: '问答'
 				}, {
-					icon: 'brandfill',
+					cuIcon: 'brandfill',
 					color: 'mauve',
 					badge: 0,
 					name: '版权'

Colorui-UniApp/pages/component/steps.vue

@@ -12,7 +12,7 @@
 		<view class="bg-white padding">
 			<view class="cu-steps">
 				<view class="cu-item" :class="index>basics?'':'text-red'" v-for="(item,index) in basicsList" :key="index">
-					<text :class="'cuIcon-' + item.icon"></text> {{item.name}}
+					<text :class="'cuIcon-' + item.cuIcon"></text> {{item.name}}
 				</view>
 			</view>
 		</view>
@@ -20,7 +20,7 @@
 		<view class="bg-white padding margin-top-xs">
 			<view class="cu-steps">
 				<view class="cu-item" :class="index>basics?'':'text-orange'" v-for="(item,index) in basicsList" :key="index">
-					<text :class="index>basics?'cuIcon-title':'cuIcon-' + item.icon"></text> {{item.name}}
+					<text :class="index>basics?'cuIcon-title':'cuIcon-' + item.cuIcon"></text> {{item.name}}
 				</view>
 			</view>
 		</view>
@@ -28,7 +28,7 @@
 		<view class="bg-white padding  margin-top-xs">
 			<view class="cu-steps steps-arrow">
 				<view class="cu-item" :class="index>basics?'':'text-blue'" v-for="(item,index) in basicsList" :key="index">
-					<text :class="'cuIcon-' + item.icon"></text> {{item.name}}
+					<text :class="'cuIcon-' + item.cuIcon"></text> {{item.name}}
 				</view>
 			</view>
 		</view>
@@ -69,16 +69,16 @@
 		data() {
 			return {
 				basicsList: [{
-					icon: 'usefullfill',
+					cuIcon: 'usefullfill',
 					name: '开始'
 				}, {
-					icon: 'radioboxfill',
+					cuIcon: 'radioboxfill',
 					name: '等待'
 				}, {
-					icon: 'roundclosefill',
+					cuIcon: 'roundclosefill',
 					name: '错误'
 				}, {
-					icon: 'roundcheckfill',
+					cuIcon: 'roundcheckfill',
 					name: '完成'
 				}, ],
 				basics: 0,

Colorui-UniApp/pages/custom/custom.vue

@@ -1,49 +0,0 @@
-<template>
-	<view>
-		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
-			<view class="cu-bar fixed" :style="[{height:CustomBar + 'px',paddingTop:StatusBar + 'px'}]" :class="bgColor">
-				<!-- #ifdef MP-WEIXIN -->
-				<navigator class='action' open-type="navigateBack" :delta="1" hover-class="none">
-					<text class='icon-back'></text>
-					<slot></slot>
-				</navigator>
-				<!-- #endif -->
-				<!-- #ifdef H5 -->
-				<view class='action' @tap="BackPage">
-					<text class='icon-back'></text>
-					<slot></slot>
-				</view>
-				<!-- #endif -->
-				<slot name="right"></slot>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				StatusBar: this.StatusBar,
-				CustomBar: this.CustomBar
-			};
-		},
-		props: {
-			bgColor: {
-				type: String,
-				default: 'bg-gradual-blue'
-			},
-		},
-		methods: {
-			BackPage() {
-				uni.navigateBack({
-					delta: 1
-				});
-			}
-		}
-	}
-</script>
-
-<style>
-
-</style>

Colorui-UniApp/pages/plugin/drawer.vue

@@ -130,7 +130,7 @@
 		color: #fff;
 	}
 
-	.DrawerPage .cu-bar.tabbar .action button.icon {
+	.DrawerPage .cu-bar.tabbar .action button.cuIcon {
 		width: 64upx;
 		height: 64upx;
 		line-height: 64upx;