uni-niu-ui/pages/Sub/Tabs/cell.vue

<template>
	<view class="cell" :class="[oneline?'oneline':'manylines', boder?'boder':'', hboder?'hboder':'']" @click.stop="click">
		<view class="cell-one">
			{{title}}
		</view>
		<view class="cell-two" :class="[noPaddingBottom?'nobottom':'']">
			<slot>
				<template v-if="cellType=='input'">
					<input class="input" style="flex: 1;height: 100%;" placeholder-style="color: #CCCCCC;font-size: 32rpx" :maxlength="maxlength" v-model="myValue" @input="input" :disabled="cellType=='input'&&!disabled?false:'disabled'" :type="inputType" :placeholder="placeholder">
					<text v-if="append" style="margin-left: 10rpx;height: 100%;display: inline-block;">{{append}}</text>
				</template>
				<template v-if="cellType=='textarea'">
						<textarea placeholder-style="color: #CCCCCC;font-size: 30rpx" @input="input" style="width: 100%;height: 140rpx;" v-model="myValue" :disabled="cellType=='textarea'&&!disabled?false:'disabled'" 
						:placeholder="placeholder" :maxlength="maxlength"/>
						<view v-if="textearaNum&&maxlength!=-1" class="textarea-num">
							{{valueStr.length}}/{{maxlength}}
						</view>
				</template>
			</slot>
			<view v-if="arrow">
				<u-icon name="arrow-right" color="#CCCCCC" size="28"></u-icon>
			</view>
		</view>
		<view class="cell-three" v-if="oneline&&$slots.three">
			<slot name="three"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		computed:{
			valueStr(){
				return this.value + ''
			}
		},
		props: {
			append: {
				type: String,
				default: ""
			},
			value: {
				type: String | Number,
				default: ""
			},
			noPaddingBottom: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ""
			},
			disabled:{
				type: Boolean,
				default: false
			},
			cellType:{
				type: String,
				default: "input"
			},
			maxlength:{
				type: Number,
				default: -1
			},
			textearaNum: {
				type: Boolean,
				default: true
			},
			inputType: {
				type: String,
				default: "text"
			},
			boder: {
				type: Boolean,
				default: true
			},
			hboder: {
				type: Boolean,
				default: false
			},
			oneline: {
				type: Boolean,
				default: false
			},
			arrow:{
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				myValue: ""
			}
		},
		watch: {
			value(newValue, oldValue) {
				this.myValue = newValue
			}
		},
		created() {
			this.myValue = this.value
		},
		methods: {
			input(e){
				// 1. 限制位数
				// 2. 只能输入数字
				// 3. 可以输入负数
				console.log(e);
				let myValue = this.myValue + ''
				console.log("before,"+myValue);
				// if(myValue.indexOf('.')!=myValue.lastIndexOf(".")){
				// 	let a = myValue.split("")
				// 	a.splice(myValue.lastIndexOf("."),1)
				// 	myValue = a.join('')
				// }
				// if(myValue.indexOf('.')!=myValue.lastIndexOf(".")){
				// 	let a = myValue.split("")
				// 	a.splice(myValue.lastIndexOf("."),1)
				// 	myValue = a.join('')
				// }
				// if(myValue.indexOf('.') == -1 && myValue){
				// 	// 去除输入的其他字符
				// 	myValue = myValue.replace(/[^(0-9 | \-)]/g,'')
				// } else if (myValue.indexOf(".") == 0) {
				// 	myValue = myValue.replace(/[^$#$]/g, "0.");
				// 	myValue = myValue.replace(/\.{2,}/g, ".");
				// } else if (myValue.indexOf(".") > 0){
				// 	myValue = myValue.replace(/[^(0-9 | \. | \-)]/g,'')
				// }
				// if (myValue.lastIndexOf("-") > 0) {
				// 	myValue = myValue.replace(/\-/g,'')
				// }
				if(isNaN(+myValue)){
					
				}else this.myValue = myValue
				// 替换非数字输入
				// if(myValue.indexOf('.') != -1){
				// 	let value = myValue.slice(0,1)
				// 	myValue = +(''+value).replace(/[^0-9]/g,'')+'.'
				// }else{
				// 	myValue = +(''+myValue).replace(/[^0-9]/g,'')
				// }
				// this.myValue = myValue
				// console.log("after,"+myValue);
				// if(isNaN(+this.myValue)){
				// 	this.myValue = 0	
				// }
				// if(this.myValue> 5){
				// 	this.myValue = 5
				// }
				console.log("after,"+myValue);
				this.$emit("input", this.myValue)
			},
			click(e) {
				this.$emit("click", e)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.cell-two .input{
		outline: 0;
		border: 0;
		background: transparent;
		text-align: inherit;
	}
	.cell{
		padding-right: 32rpx;
		margin-left: 32rpx;
		&.boder{
			border-bottom: 1px solid #EEEEEE;
		}
		&.hboder{
			padding: 0 32rpx;
			margin-left: 0;
			border-bottom: 1px solid #EEEEEE;
		}
		.cell-one{
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
		}
		.cell-two{
			font-size: 32rpx;
		}
		.cell-three{
			font-size: 32rpx;
		}
		&.oneline{
			display: flex;
			align-items: center;
			height: 104rpx;
			line-height: 104rpx;
			.cell-one{
				padding-right: 20rpx;
			}
			.cell-two{
				flex: 1;
				width: 0;
				height: 100%;
				text-align: right;
				display: flex;
				align-items: center;
			}
			.cell-three{
				display: flex;
				height: 100%;
				align-items: center;
				padding-left: 12rpx;
				&.no{
					padding-left: 0;
				}
			}
		}
		&.manylines{
			.cell-one{
				line-height: 92rpx;
			}
			.cell-two{
				padding-bottom: 32rpx;
			}
			.cell-two.nobottom{
				padding-bottom: 0;
			}
		}
		.textarea-num{
			font-size: 18rpx;
			padding-top: 6rpx;
			font-weight: 400;
			text-align: right;
			line-height: 1;
			color: #999999;
		}
	}
</style>