【uni-app】个人中心组件

<template>
	<view @click="lisClick">
		<uni-swipe-action v-if="isSlide">
			<uni-swipe-action-item
			    :right-options="options"
			    @change="swipeChange"
			    @click="swipeClick"
			>
				<view class="com-list" :class="isBorder?'call':''">
					<text class="content-text">{{title}}</text>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		
		<view class="" v-else>
			<view class="com-list " :class="isBorder?'call':''">
				<view class="tubiao">
					<image :src="src" mode="" class="tu-img" v-if="isLeft"></image>
				</view>
				<view class="com-left" :class="isLeft?'textop':''">
					<text class="left-a">{{title}}</text>
				</view>
				<view class="com-right">
					<view class="right-a"><slot></slot></view>
					<view>
						<image src="../../static/gengduo.png" mode="" class="com-img" v-if="isRight"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"com-list",// 控件名称
		props:{// 可配置的数据
			// 支持的数据类型
			// String     " 字符串 " 
			// Number     "  数字  " 
			// Boolean    " 布尔值 "        
			// Object     "  对象  "
			// Array      "  数组  "  Array类型默认值要以函数的形式进行返回
											
			
			
			isSlide:{ //是否启动左滑显示按钮
				type:Boolean,
				default:false
			},
			isBorder:{ // 是否显示 下边框
				type:Boolean,
				default:true
			},
			isRight:{ //是否显示 左箭头
				type:Boolean,
				default:false
			},
			isLeft:{ //是否显示 图标
				type:Boolean,
				default:false
			},
			title:{ //标题
				type:String,
				default:''
			},
			src:{ //图片
				type:String,
				default:''
			},
			// data: {   //数组
			// 	type: Array,
			// 	default: () {
			// 		return []
			// 	}
			// }
		},
		data() {
			return {
				options:[
					{text: '编辑',
					style:{
						backgroundColor: '#4570FD'
					}
					},
					{text: '删除',
					style:{
						backgroundColor: '#FF5966'
					}
					}
				],
				isClick:true
			};
		},
		methods:{
			swipeChange(e){
				this.isClick=false
				if(e =='none'){
					setTimeout(()=>{
						this.isClick=true
					},100)
				}
				this.$emit('changOpe',e)
			},
			swipeClick(e){
				this.$emit('clickOpe',e)
			},
			lisClick(){
				if(this.isClick){
					this.$emit('lisClick')
				}
			}
		}
	}
</script>

<style>
	.com-list{
		padding: 30rpx 0rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		position: relative;
	}
	.call:before{
		content: '';
		position: absolute;
		left: 36rpx;
		top: auto;
		bottom: 0;
		right: auto;
		height: 2rpx;
		width: calc(100% - 36rpx);
		background-color: #EAEAEA;
	}
	.com-left{
		margin-left: 20rpx;
	}
	.com-right{
		float: right;
		display: flex;
		justify-content:flex-end;
		max-width: 80%;
		word-break: break-word;		
	}/* 强制换行 */
	.left-a{
		float: left;
		margin-left: 20rpx;
	}
	.right-a{
		margin-right: 20rpx;
		color: #8F8F8F;
	}
	.tu-img{
		width: 64rpx;
		height: 56rpx;
	}
	.com-img{
		width: 24rpx;
		height: 24rpx;
		margin-right: 30rpx;
	}
	/* 有图标时 */
	.tubiao{
		float: left;
		margin-left: 38rpx;
	}
	/* 有图标时文字向下移动 */
	.textop{
		margin-top: 6rpx;
	}
</style>

【引用组件】com-list

<template>
	<view>
		<com-list title="左滑动" isSlide></com-list>
		<com-list title="头像" tell="" isRight class="toux">
			<image src="../../static/touxiang.png" mode="" class="touimg" @click="tapUpdateImg"></image>
		</com-list>
		<com-list title="个人档案" tell="" :src="imgt" isLeft isRight>11</com-list>
		<com-list title="姓名" tell="" isRight @lisClick="inputDialogToggle">
			{{forlist.name}}
		</com-list>
		<com-list title="年龄" tell="" isRight>
			<input type="text" v-model="forlist.age" style="text-align: right;" />
		</com-list>
		<com-list title="备注" tell="" isRight>
			<textarea type="text" value="" style="text-align: right;width: 400rpx;height: 130rpx;" />
		</com-list>
		<com-list title="头像" tell="" isRight class="toux">
			<image src="../../static/touxiang.png" mode="" class="touimg"></image>
		</com-list>
		<com-list title="性别" isRight>
			<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
				<view class="uni-input">{{forlist.sex}}</view>
			</picker>
		</com-list>
		<com-list title="生日" isRight>
			<uni-datetime-picker
				type="date"
				v-model="forlist.birthday"
				@change="change"
				:clear-icon="false"
				class="appicker"
			/>
			<input type="text" v-model="forlist.birthday" style="text-align: right;" />
		</com-list>
		<com-list title="身高" isRight>
			<view class="" @click="isheight=false" v-if="isheight">
				{{forlist.height}}cm
			</view>
			<input type="text" focus @blur="isheight=true" v-model="forlist.height" style="text-align: right;" v-else/>
		</com-list>
		<com-list title="体重" isRight :isBorder="false">
			<view class="" @click="isweight=false" v-if="isweight">
				{{forlist.weight}}kg
			</view>
			<input type="text" focus @blur="isweight=true" v-model="forlist.weight" style="text-align: right;" v-else/>
		</com-list>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose"  mode="input" title="设置姓名" v-model="forlist.name"
				placeholder="请输入姓名" :before-close="true" @close="close" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:0,
				array:[{name:'男'},{name:'女'}],
				forlist:{
					name:'',
					age:'10',
					sex:'男',
					birthday:'2020-10-11',
					height:'180',
					weight:'55'
				},
				single:{},
				isheight:true,
				isweight:true,
				imgt:'../../static/banjiguanli.png',
				refreshData:[]
			}
		},
		onReady() {},
		methods: {
			close(){
				this.$refs.inputDialog.close()
			},
			dialogInputConfirm(val) {
				this.$refs.inputDialog.close()
				this.forlist.name=val
			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				if(e.detail.value==0){
					this.forlist.sex='男'
				}else{
					this.forlist.sex='女'
				}
			},
			change(e){
				console.log(e)
			},
			tapUpdateImg() {
				const that = this;
				    uni.chooseImage({//打开手机本地相册
						count: 1,//只能选取一张照片
						sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
						success: function(res) {           
						uni.$once('updateHeadimg', that.refreshData);//监听裁剪界面返回事件
							uni.navigateTo({
								url: "../userInfo/updateHeadimg?imgUrl=" + res.tempFilePaths[0]
							})
						}
					})
			}
		}
	}
</script>

<style>
	.appicker{
		position: absolute;
		top: 10rpx;
		z-index: 1;
	}
	.appicker>>>.uni-date-editor{
		opacity: 0;
	}
	.toux>>>.com-list{
		padding: 50rpx 0;
	}
	.touimg{
		width: 110rpx;
		height: 110rpx;
		position: absolute;
		right: 70rpx;
		top: 15rpx;
	}
</style>