重构cell组件

.npmignore

+common/
+components/
+node_modules/
+pages/
+static/
+store/
+unpackage/
+.gitignore
+App.vue
+LICENSE.txt
+main.js
+manifext.json
+pages.json
+vue.config.js
+package-lock.json
+.editorconfig
+uni.scss
+template.h5.html

pages.json

@@ -2,14 +2,14 @@
 	"easycom": {
 		"^u-(.*)": "@/uview/components/u-$1/u-$1.vue"
 	},
-	// "condition": { //模式配置，仅开发期间生效
-	// 	"current": 0, //当前激活的模式(list 的索引项)
-	// 	"list": [{
-	// 		"name": "test", //模式名称
-	// 		"path": "pages/componentsA/slider/index", //启动页面，必选
-	// 		"query": "id=1&name=2" //启动参数，在页面的-+onLoad函数里面得到
-	// 	}]
-	// },
+	"condition": { //模式配置，仅开发期间生效
+		"current": 0, //当前激活的模式(list 的索引项)
+		"list": [{
+			"name": "test", //模式名称
+			"path": "pages/componentsC/cell/index", //启动页面，必选
+			"query": "id=1&name=2" //启动参数，在页面的-+onLoad函数里面得到
+		}]
+	},
 	"pages": [
 		// 演示-组件
 		{

pages/componentsB/form/index.vue

+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/componentsB/upload/index.vue

@@ -22,7 +22,7 @@
 				</u-upload>
 				<u-button :custom-style="{marginTop: '20rpx'}" @click="upload">上传</u-button>
 				<u-button :custom-style="{marginTop: '40rpx'}" @click="clear">清空列表</u-button>
-				<u-button :custom-style="{marginTop: '40rpx'}" @click="reUpload">重新上传</u-button>
+				<!-- <u-button :custom-style="{marginTop: '40rpx'}" @click="reUpload">重新上传</u-button> -->
 			</view>
 		</view>
 		<view class="u-config-wrap">

pages/componentsC/cell/index.vue

@@ -4,13 +4,18 @@
 			<view class="u-demo-title">演示效果</view>
 			<view class="u-demo-area">
 				<u-cell-group title="读万卷书">
-					<u-cell-item index="index" @click="click" :hover="hover" :label="label" :arrow="arrow" :value="rightSlot == 'text' ? '蒹葭苍苍' : ''" :title="title">
-						<u-icon slot="icon" size="34" :name="icon"></u-icon>
-						<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right"></u-badge>
-						<u-switch v-if="rightSlot == 'switch'" slot="right" v-model="checked"></u-switch>
+					<u-cell-item center :is-link="true" :label="label" value="铁马冰河入梦来" i
+						ndex="index" @click="click" :hover-class="hoverClass" 
+						:arrow="arrow" :title="title"
+						:icon="icon"
+					>
+						<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right-icon"></u-badge>
+						<u-switch v-if="rightSlot == 'switch'" slot="right-icon" v-model="checked"></u-switch>
 					</u-cell-item>
-					<u-cell-item title="铁马冰河入梦来" value="行万里路">
-						<u-icon slot="icon" size="34" name="calendar"></u-icon>
+					<u-cell-item value="" title="铁马冰河入梦来" value="行万里路" :arrow="false">
+						<u-icon slot="icon" size="34" name="calendar" style="margin-right: 5px;"></u-icon>
+						<u-icon slot="right-icon" size="34" name="calendar"></u-icon>
+						<u-field slot="value"></u-field>
 					</u-cell-item>
 				</u-cell-group>
 			</view>
@@ -56,9 +61,9 @@ export default {
 		}
 	},
 	computed: {
-		hover() {
+		hoverClass() {
 			// 如果右侧是switch步进器组件的话，去掉cell的点击反馈，因为这个时候点击的反馈应该在switch上
-			return this.rightSlot != 'switch';
+			return this.rightSlot == 'switch' ? 'none' : 'u-cell-hover';
 		}
 	},
 	methods: {
@@ -76,6 +81,8 @@ export default {
 		},
 		rightSlotChange(index) {
 			this.rightSlot = index == 0 ? 'text' : index == 1 ? 'switch' : 'badge'
+			if(index == 0) this.arrow = true;
+			else this.arrow = false;
 		},
 		click(index) {
 			// console.log(index);

uview/components/u-cell-item/u-cell-item.vue

 <template>
-	<view @tap="click" class="u-cell-item-box" :class="{'u-cell-border': itemIndex > 0 }" hover-stay-time="150"
-	 :hover-class="hover ? 'u-hover-class' : ''" :style="{
+	<view
+		@tap="click"
+		class="u-cell"
+		:class="{ 'u-cell-border': itemIndex > 0 && borderBottom, 'u-col-center': center, 'u-border-gap': borderGap, 'u-cell--required': required }"
+		hover-stay-time="150"
+		:hover-class="hoverClass"
+		:style="{
 			backgroundColor: bgColor
-	}">
-		<view class="u-cell-content">
-			<view class="u-icon-wrap" v-if="icon">
-				<u-icon size="32" :name="icon" class="u-icon"></u-icon>
-			</view>
-			<view class="u-icon-wrap">
+		}"
+	>
+		<u-icon :size="iconSize" :name="icon" v-if="icon" class="u-cell__left-icon-wrap"></u-icon>
+		<view class="u-flex" v-else>
 			<slot name="icon"></slot>
 		</view>
-			<view class="u-cell-title" :style="[titleStyle]">
-				<text class="u-title-text" v-if="title">{{title}}</text>
-				<slot name="left"></slot>
-			</view>
-			<view class="u-cell-value" v-if="value">
-				<text class="u-value-text" :style="[valueStyle]" v-if="value">{{value}}</text>
-			</view>
-			<view v-else class="u-slot-wrap">
-				<slot name="right"></slot>
+		<view
+			class="u-cell_title"
+			:style="[
+				{
+					width: titleWidth ? titleWidth + 'rpx' : 'auto'
+				},
+				titleStyle
+			]"
+		>
+			<block v-if="title">{{ title }}</block>
+			<slot name="title" v-else></slot>
+
+			<view class="u-cell__label" v-if="label || $slots.label" :style="[labelStyle]">
+				<block v-if="label">{{ label }}</block>
+				<slot name="label" v-else></slot>
 			</view>
-			<view :style="[arrowStyle]" class="u-icon-wrap">
-				<u-icon v-if="arrow" size="26" class="u-arror-right" color="#969799" name="arrow-right"></u-icon>
 		</view>
+
+		<view class="u-cell__value" :style="[valueStyle]">
+			<block class="u-cell__value" v-if="value">{{ value }}</block>
+			<slot v-else></slot>
 		</view>
-		<view class="u-cell-label" v-if="label" :style="[labelStyle]">
-			{{label}}
+		<u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
+		<view class="u-flex" v-else>
+			<slot name="right-icon"></slot>
 		</view>
 	</view>
 </template>
 
 <script>
-	/**
+/**
  * cellItem 单元格Item
  * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-group使用
  * @tutorial https://www.uviewui.com/components/cell.html
@@ -39,19 +51,22 @@
  * @property {String} icon 左侧图标名，只支持uView内置图标，见Icon 图标
  * @property {String} value 右侧内容
  * @property {String} label 标题下方的描述信息
-	 * @property {Boolean} border 是否显示每个cell的下边框（默认true）
-	 * @property {Boolean} hover 是否开启点击反馈，hover-class形式，如果右侧通过slot传递switch进去的话，可以将此值设置为false（默认true）
+ * @property {Boolean} border-bottom 是否显示每个cell的下边框（默认true）
+ * @property {String} hover-class 是否开启点击反馈，none为无效果（默认true）
+ * @property {Boolean} border-gap border-bottom为true时，Cell列表中间的条目的下边框是否与左边有一个间隔（默认true）
  * @property {Boolean} arrow 是否显示右侧箭头（默认true）
-	 * @property {Boolean} arrow-direction 箭头方向，可选值（默认right）
+ * @property {Boolean} required 箭头方向，可选值（默认right）
+ * @property {Boolean} arrow-direction 是否显示左边表示必填的星号（默认false）
  * @property {Object} title-style 标题样式，对象形式
  * @property {Object} value-style 右侧内容样式，对象形式
  * @property {Object} label-style 标题下方描述信息的样式，对象形式
-	 * @property {String} bg-color 背景颜色（默认#ffffff）
+ * @property {String} bg-color 背景颜色（默认transparent）
  * @property {String Number} index 用于在click事件回调中返回，标识当前是第几个Item
+ * @property {String Number} title-width 标题的宽度，单位rpx
  * @example <u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item>
  */
-	export default {
-		name: "u-cell-item",
+export default {
+	name: 'u-cell-item',
 	props: {
 		// 左侧图标名称(只能uView内置图标)，或者图标src
 		icon: {
@@ -74,20 +89,40 @@
 			default: ''
 		},
 		// 是否显示内边框
-			border: {
+		borderBottom: {
 			type: Boolean,
 			default: true
 		},
-			// 是否开启点击反馈，即点击是cell背景为灰色
-			hover: {
+		// 多个cell中，中间的cell显示下划线时，下划线是否给一个到左边的距离
+		borderGap: {
 			type: Boolean,
 			default: true
 		},
+		// 是否开启点击反馈，即点击时cell背景为灰色，none为无效果
+		hoverClass: {
+			type: String,
+			default: 'u-cell-hover'
+		},
 		// 是否显示右侧箭头
 		arrow: {
 			type: Boolean,
 			default: true
 		},
+		// 内容是否垂直居中
+		center: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示左边表示必填的星号
+		required: {
+			type: Boolean,
+			default: false
+		},
+		// 标题的宽度，单位rpx
+		titleWidth: {
+			type: [Number, String],
+			default: ''
+		},
 		// 右侧箭头方向，可选值：right|up|down，默认为right
 		arrowDirection: {
 			type: String,
@@ -96,40 +131,50 @@
 		// 控制标题的样式
 		titleStyle: {
 			type: Object,
-				default () {
+			default() {
 				return {};
 			}
 		},
 		// 右侧显示内容的样式
 		valueStyle: {
 			type: Object,
-				default () {
+			default() {
 				return {};
 			}
 		},
 		// 描述信息的样式
 		labelStyle: {
 			type: Object,
-				default () {
+			default() {
 				return {};
 			}
 		},
 		// 背景颜色
 		bgColor: {
 			type: String,
-				default: '#ffffff'
+			default: 'transparent'
 		},
 		// 用于识别被点击的是第几个cell
 		index: {
 			type: [String, Number],
 			default: ''
+		},
+		// 是否使用lable插槽
+		useLabelSlot: {
+			type: Boolean,
+			default: false
+		},
+		// 左边图标的大小，单位rpx，只对传入icon字段时有效
+		iconSize: {
+			type: [Number, String],
+			default: 34
 		}
 	},
 	inject: ['uCellGroup'],
 	data() {
 		return {
-				itemIndex: 0,
-			}
+			itemIndex: 0
+		};
 	},
 	created() {
 		this.itemIndex = this.uCellGroup.index++;
@@ -137,8 +182,8 @@
 	computed: {
 		arrowStyle() {
 			let style = {};
-				if (this.arrowDirection == 'top') style.transform = 'rotate(-90deg)';
-				else if (this.arrowDirection == 'bottom') style.transform = 'rotate(90deg)';
+			if (this.arrowDirection == 'up') style.transform = 'rotate(-90deg)';
+			else if (this.arrowDirection == 'down') style.transform = 'rotate(90deg)';
 			else style.transform = 'rotate(0deg)';
 			return style;
 		}
@@ -148,80 +193,98 @@
 			this.$emit('click', this.index);
 		}
 	}
-	}
+};
 </script>
 
 <style lang="scss" scoped>
-	.u-cell-item-box {
-		padding: 28rpx 32rpx;
+.u-cell {
 	position: relative;
-	}
+	display: flex;
+	box-sizing: border-box;
+	width: 100%;
+	padding: 20rpx 32rpx;
+	font-size: 28rpx;
+	line-height: 48rpx;
+	color: $u-content-color;
+	background-color: #fff;
+	text-align: left;
+}
 
-	.u-cell-border:after {
-		left: 32rpx !important;
+.u-cell_title {
+	font-size: 28rpx;
+}
+
+.u-cell__left-icon-wrap {
+	margin-right: 10rpx;
+	font-size: 32rpx;
+}
+
+.u-cell__right-icon-wrap {
+	margin-left: 10rpx;
+	color: #969799;
+	font-size: 28rpx;
+}
+
+.u-cell__left-icon-wrap,
+.u-cell__right-icon-wrap {
+	display: flex;
+	align-items: center;
+	height: 48rpx;
+}
+
+.u-cell-border:after {
 	position: absolute;
 	box-sizing: border-box;
 	content: ' ';
 	pointer-events: none;
 	right: 0;
+	left: 0;
 	top: 0;
 	border-bottom: 1px solid $u-border-color;
 	-webkit-transform: scaleY(0.5);
 	transform: scaleY(0.5);
-	}
+}
 
-	.u-cell-content {
-		display: flex;
-		align-items: center;
-	}
+.u-cell-border {
+	position: relative;
+}
 
-	.u-cell-title {
-		color: #323233;
-		font-size: 30rpx;
-		flex: 1;
-		margin-left: 6rpx;
-		text-align: left;
-	}
+.u-border-gap:after {
+	left: 32rpx !important;
+}
 
-	.u-cell-value {
-		flex: 1;
+.u-cell__label {
+	margin-top: 6rpx;
 	font-size: 26rpx;
-		color: #969799;
-		text-align: right;
-	}
+	line-height: 36rpx;
+	color: $u-tips-color;
+}
 
-	.u-cell-label {
-		color: #969799;
+.u-cell__value {
+	overflow: hidden;
+	text-align: right;
+	vertical-align: middle;
+	color: $u-tips-color;
 	font-size: 26rpx;
-		margin-top: 10rpx;
-		text-align: left;
-	}
+}
 
-	.u-slot-wrap {
-		display: flex;
-		align-items: center;
-	}
+.u-cell__title,
+.u-cell__value {
+	flex: 1;
+}
 
-	// 微信小程序需要额外处理可能通过slot传入badge和switch的问题
-	// 否则无法垂直居中
-	/* #ifdef MP-WEIXIN */
-	.u-slot-wrap /deep/ u-badge,
-	.u-slot-wrap /deep/ u-switch {
+.u-cell--required {
+	overflow: visible;
 	display: flex;
 	align-items: center;
-	}
+}
 
-	/* #endif */
-
-	.u-icon {
-		margin-right: 6rpx;
-	}
-
-	.u-value-text {
-		margin-right: 10rpx;
-	}
-
-	.u-title-text {
-		margin-right: 10rpx;
-	}
+.u-cell--required:before {
+	position: absolute;
+	content: '*';
+	left: 8px;
+	margin-top: 4rpx;
+	font-size: 14px;
+	color: $u-type-error;
+}
 </style>

uview/components/u-form-item/u-form-item.vue

+<template>
+	<view class="u-form-item">
+		<slot />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+</style>

uview/components/u-form/u-form.vue

+<template>
+	<view class="u-form">
+		<slot />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+</style>

uview/components/u-icon/u-icon.vue

 <template>
-	<text class="uicon" :class="customClass" :style="{
-		color: color,
-		fontSize: size + 'rpx',
-		fontWeight: bold ? 'bold' :　'normal',
-	}"
-	 @tap="click" :hover-class="hoverClass" @touchstart="touchstart">
-
-	</text>
+	<text class="uicon" :class="customClass" :style="[iconStyle]" @tap="click" :hover-class="hoverClass" @touchstart="touchstart"></text>
 </template>
 
 <script>
-	/**
+/**
  * icon 图标
  * @description 基于字体的图标集，包含了大多数常见场景的图标。
  * @tutorial https://www.uviewui.com/components/icon.html
@@ -22,8 +15,8 @@
  * @event {Function} click 点击图标时触发
  * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
  */
-	export default {
-		name: "u-icon",
+export default {
+	name: 'u-icon',
 	props: {
 		// 图标类名
 		name: {
@@ -33,7 +26,7 @@
 		// 图标颜色
 		color: {
 			type: String,
-				default: 'inherit'
+			default: ''
 		},
 		// 字体大小，单位rpx
 		size: {
@@ -62,9 +55,7 @@
 		}
 	},
 	data() {
-			return {
-
-			}
+		return {};
 	},
 	computed: {
 		customClass() {
@@ -74,6 +65,15 @@
 			if (this.customPrefix == 'uicon') classes.push('u-iconfont');
 			else classes.push(this.customPrefix);
 			return classes;
+		},
+		iconStyle() {
+			let style = {};
+			style = {
+				fontSize: this.size + 'rpx',
+				fontWeight: this.bold ? 'bold' : 'normal'
+			};
+			if(this.color) style.color = this.color;
+			return style;
 		}
 	},
 	methods: {
@@ -84,14 +84,14 @@
 			this.$emit('touchstart', this.index); 
 		}
 	}
-	}
+};
 </script>
 
 <style scoped lang="scss">
-	@import '../../../uview/iconfont.css';
+@import '../../../uview/iconfont.css';
 
-	.uicon {
+.uicon {
 	display: inline-flex;
 	align-items: center;
-	}
+}
 </style>

uview/components/u-upload/u-upload.vue

@@ -198,7 +198,7 @@
 						this.lists.push({url: value.url, error: false, progress: 100});
 					})
 				}
-			}
+			},
 		},
 		methods: {
 			// 清除列表
@@ -369,6 +369,14 @@
 					}
 				});
 			},
+			// 用户通过ref手动的形式，移除一张图片
+			remove(index) {
+				// 判断索引的合法范围
+				if(index >= 0 && index < this.lists.length) {
+					this.lists.splice(index, 1);
+					this.$emit('on-list-change', this.lists);
+				}
+			},
 			// 预览图片
 			doPreviewImage(url, index) {
 				if (!this.previewFullImage)

uview/index.scss

@@ -58,12 +58,16 @@ u-icon {
 } 
 /* end-iPhoneX底部安全区定义--end */
 
-/* start--hover-class-start */
+/* start--各种hover点击反馈相关的类名-start */
 .u-hover-class {
 	// background-color: #f7f8f9!important;
 	opacity: 0.6;
 }
-/* end--hover-class--end */
+
+.u-cell-hover {
+	background-color: #f7f8f9!important;
+}
+/* end--各种hover点击反馈相关的类名--end */
 
 /* start--文本行数限制--start */
 .u-line-1 {

uview/libs/request/index.js

-class Request {
-	config = {
+const Request = {
+	config: {
 		baseUrl: '', // 请求的根域名
 		// 默认的请求头
 		header: {
@@ -16,28 +16,28 @@ class Request {
 		timer: null, // 定时器
 		originalData: false, // 是否在拦截器中返回服务端的原始数据，见文档说明
 		loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透
-	}
+	},
 
 	// 判断是否http|https开头的URL
-	static isHttp(url) {
+	isHttp: (url) => {
 		return /(http|https):\/\/([\w.]+\/?)\S*/.test(url)
-	}
+	},
 
 	// 拦截器
-	interceptor = {
+	interceptor: {
 		// 请求前的拦截
 		request: null,
 		// 请求后的拦截
 		response: null
-	}
+	},
 
 	// 设置全局默认配置
-	setConfig(customConfig) {
+	setConfig: (customConfig) => {
 		this.config = Object.assign(this.config, customConfig);
-	}
+	},
 
 	// 主要请求部分
-	async request(options = {}) {
+	request: (options = {}) => {
 		// 检查请求拦截
 		if (this.interceptor.request && typeof this.interceptor.request === 'function') {
 			let tmpConfig = {};
@@ -119,41 +119,40 @@ class Request {
 			}
 			uni.request(options);
 		})
-	}
+	},
 
-	constructor() {
 		// get请求
-		this.get = (url, data = {}, header = {}) => {
+		get: (url, data = {}, header = {}) => {
 			return this.request({
 				method: 'GET',
 				url,
 				header,
 				data
 			})
-		}
+		},
 
 		// post请求
-		this.post = (url, data = {}, header = {}) => {
+		post: (url, data = {}, header = {}) => {
 			return this.request({
 				url,
 				method: 'POST',
 				header,
 				data
 			})
-		}
+		},
 		
 		// put请求，不支持支付宝小程序(HX2.6.15)
-		this.put = (url, data = {}, header = {}) => {
+		put: (url, data = {}, header = {}) => {
 			return this.request({
 				url,
 				method: 'PUT',
 				header,
 				data
 			})
-		}
+		},
 		
 		// delete请求，不支持支付宝和头条小程序(HX2.6.15)
-		this.delete = (url, data = {}, header = {}) => {
+		delete: (url, data = {}, header = {}) => {
 			return this.request({
 				url,
 				method: 'DELETE',
@@ -161,6 +160,5 @@ class Request {
 				data
 			})
 		}
-	}
 }
-export default new Request
+export default Request

uview/package.json

+{
+	"name": "uview",
+	"version": "1.1.6",
+	"description": "uView UI，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
+	"main": "uview/index.js",
+	"keyword": ["uview", "uView", "uni-app", "uniapp", "uviewui", "uview ui", "uviewUI", "uViewui", "uViewUI", "uView UI", "uni ui", "uni UI", "uniapp ui", "ui", "UI框架", "uniapp ui框架", "uniapp UI"],
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"repository": {
+		"type": "git",
+		"url": ""
+	},
+	"files": ["uview"],
+	"author": "uView",
+	"license": "MIT"
+}