uni-niu-ui/uni_modules/niu-ui/components/niu-input/niu-input.vue

<template>
	<view class="niu-input" :class="[border?'border':'']" :style="{height: height,lineHeight: height}">
		<view class="niu-input__left">
			<view class="niu-input__left__wrapper" :style="{width:fixLeftWidth}">
				<slot name="left">
					<view class="niu-input__imp" v-if="leftText">
						{{leftText}}
					</view>
				</slot>
			</view>
		</view>
		<view class="niu-input__center">
			<slot>
				<input :focus="focus" :placeholder-style="placeholderStyle"
					:style="{textAlign: inputAlign,fontSize: fontSize}" :disabled="disabled?'disabled':false"
					:readonly="readonly?'readonly':false" v-model="myValue" :type="type" :placeholder="placeholder"
					class="niu-input__input" value="" />
			</slot>
			<view v-if="readonly" class="niu-input__center__holder">
			</view>
		</view>
		<view class="niu-input__right">
			<view class="niu-input__clear" v-if="closeable&&(!readonly&&!disabled)&&myValue" @click="clearText">
				X
			</view>
			<view :style="{margin: '0 10rpx'}" v-if="sendcode">
				<sendcode :color="sendColor" :fontSize="sendSize" :border='sendcodeBorder' v-model="haveSend"
					@click.native="clickSend"></sendcode>
			</view>
			<view class="niu-input__right__wrapper" :style="{width:fixRightWidth}">
				<slot name="right">
					<view class="niu-input__imp" v-if="rightText">
						{{rightText}}
					</view>
					<view v-if="arraw" class="niu-input__arraw">
						<niu-image
							src="https://shidaizhu.oss-cn-shenzhen.aliyuncs.com/app_static/images/forward_red.png"
							rect="24rpx" left="10rpx"></niu-image>
					</view>
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
	import sendcode from "../niu-sendcode/niu-sendcode.vue"
	export default {
		props: {
			disabled: {
				type: Boolean,
				default: false
			},
			placeholderStyle: {
				type: String,
				default: ''
			},
			sendColor: {
				type: String,
				default: '#FFA63C'
			},
			sendSize: {
				type: String,
				default: ''
			},
			height: {
				type: String,
				default: '89rpx'
			},
			readonly: {
				type: Boolean,
				default: false
			},
			border: {
				type: Boolean,
				default: false
			},
			focus: {
				type: Boolean,
				default: false
			},
			closeable: {
				type: Boolean,
				default: false
			},
			inputAlign: {
				type: String,
				default: 'left'
			},
			fontSize: {
				type: String,
				default: ''
			},
			sendcode: {
				type: Boolean,
				default: false
			},
			sendcodeBorder: {
				type: Boolean,
				default: false
			},
			arraw: {
				type: Boolean,
				default: false
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'text'
			},
			placeholder: {
				type: String,
				default: '请输入'
			},
			value: {
				type: String | Number,
				default: ''
			},
			fixLeftWidth: {
				type: String,
				default: ''
			},
			fixRightWidth: {
				type: String,
				default: ''
			}
		},
		components: {
			sendcode
		},
		options: {
			virtualHost: true // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现
		},
		data() {
			return {
				haveSend: false,
				myValue: ''
			}
		},
		watch: {
			value: {
				handler(newValue, oldValue) {
					this.myValue = newValue
				},
				immediate: true
			},
			myValue: {
				handler(newValue, oldValue) {
					this.$emit('input', newValue)
				},
				immediate: true
			}
		},
		methods: {
			clearText() {
				this.myValue = ''
			},
			clickSend() {
				if (!this.haveSend) {
					let that = this;
					this.$emit('send', function(done) {
						if (done) {
							that.haveSend = true;
						} else {
							that.haveSend = false;
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.niu-input {
		display: flex;
		align-items: center;

		&.border {
			border-bottom: 1px solid #E5E5E5;
		}

		&.border:last-child {
			border: 0;
		}

		.niu-input__left,
		.niu-input__center,
		.niu-input__right {
			height: 100%;
			white-space: nowrap;
		}

		.niu-input__left {
			text-align: left;

			.niu-input__imp {
				margin-right: 15rpx;
				font-weight: 500;
				display: inline-block;
			}
		}

		.niu-input__right {
			display: flex;
			align-items: center;
			text-align: right;

			.niu-input__imp {
				margin-left: 15rpx;
				display: inline-block;
			}
		}

		.niu-input__clear {
			padding: 0 10rpx;
			display: inline-block;
		}

		.niu-input__center {
			flex: 1;
			position: relative;

			.niu-input__input {
				display: block;
				width: 100%;
				height: 100%;
				background-color: transparent;
				font-size: inherit;
				margin: 0;
				padding: 0;
				outline: 0;
				border: 0;
			}

			.niu-input__center__holder {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				z-index: 99;
			}
		}
	}
</style>