uniapp 输入框弹窗样式效果

uniapp yekong

uniapp 输入框弹窗样式效果

<template>
	<view>
		<view @click="show=true">
			<slot></slot>
		</view>
		<u-popup :show="show" @close="show=false" mode="bottom" bgColor="transparent">
			<view class="popupwin">
				<div class="popTitle">
					出库备注
				</div>
				<div class="close" @click="getHide">
					<u-icon name="close"></u-icon>
				</div>
				<div class="popbody">
					<u--textarea border="none" maxlength="-1" height="200" v-model="value" placeholder="请填写">
					</u--textarea>
				</div>
				<div class="operation">
					<div class="confirm" @click="confirm">确定</div>
				</div>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				active: 0,
				value: ''
			}
		},
		computed: {

		},
		props: {
			datastr: {
				type: String,
				default () {
					return '';
				}
			}
		},
		mounted() {

		},
		methods: {
			getHide() {
				this.show = false
			},
			getShow() {
				this.show = true
			},
			confirm() {
				var that = this;
				that.$emit('getdata', that.list[that.active])
				that.getHide()
			},
		}
	}
</script>

<style scoped lang="scss">
	.popupwin {
		width: 750rpx;
		// height: 750rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0px 0px;
		opacity: 1;
		position: relative;
		z-index: 1000;
	}
	.searchbody {
		height: 550rpx;
	}

	.close {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		z-index: 10;
	}

	.popTitle {
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		font-size: 32rpx;
		color: #000;
		margin-left: 28rpx;
	}

	.operation {
		width: 694rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		margin: 0 auto;
		padding-bottom: 64rpx;

		.reset {
			width: 333rpx;
			height: 88rpx;
			background: rgba(#4087FF, 0.1);
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #4087FF;
		}

		.confirm {
			width: 694rpx;
			height: 88rpx;
			background: #4087FF;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
		}
	}

	.popTitle2 {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #3F4271;
		margin-left: 28rpx;
		margin-bottom: 20rpx;
	}

	.popbody {
		width: calc(694rpx + 18rpx + 18rpx);
		margin: 0 auto;
		margin-bottom: 120rpx;
	}
</style>
喜欢