uni-app 添加prompt组件--能输入文本的提示框

uni-app全平台编译理念还是很不错的，可惜还在采坑中…

苦于uni-app官方样例不多，easyui的$.messager.prompt又用得太方便了，uni-app正好缺一个prompt组件。

样式就是这样:

到网上找到一个给微信小程序写的界面copy过来修改一下使用。
原文链接:https://blog.csdn.net/zhy13087344578/article/details/80648048
首先新建一个prompt.vue文件，内容如下

<template>
	<view class="prompt-box" :hidden="isHidden">
		<view class="prompt-content contentFontColor">
			<view class="prompt-title">{{title}}view>
			<view class="prompt-text">{{text}}view>
			<input class="prompt-input" type="text" @input="_input" :value="cost"/>
			<view class="prompt-btn-group">
				<button class="btn-item prompt-cancel-btn contentFontColor" @tap="_cancel">{{btn_cancel}}button>
				<button class="btn-item prompt-certain-btn" @tap="_confirm">{{btn_certain}}button>
			view>
		view>
	view>
template>
<script>
	export default {
		data() {
			return {
				multipleSlots: true,// 在组件定义时的选项中启用多slot支持
				isHidden: true,
				cost:''
			};
		},
		props:{
			title: {            
			  type: String,    
			  default: '提示'    
			},
			btn_cancel: {
			  type: String,
			  default: '取消'
			},
			btn_certain: {
			  type: String,
			  default: '确定'
			},
			text:{
				type: String,
				default: '',
			}
		},
		watch:{
			
		},
		methods: {
			hide: function () {
			  this.isHidden=true;
			},
			show(e) {
			  this.isHidden=false;
				if(e!=null&&e!=undefined&&e!=""){
					this.text = e;
				}
			},
			/*
			 * 内部私有方法建议以下划线开头
	 		 * triggerEvent 用于触发事件
			 */
			_cancel () {
				//触发cancel事件，即在外部，在组件上绑定cancel事件即可，bind:cancel，像绑定tap一样
			  this.cost = '';
			  this.hide();
			  this.$emit('onCancel');
			},
			_confirm () {
			  //this.triggerEvent("confirm");
			  console.log(this.cost);
			  this.$emit('onConfirm', this.cost);
			  this.cost = '';
			},
			_input(e){
				//将参数传出去，这样在getInput函数中可以通过e去获得必要的参数
				//this.triggerEvent("getInput",e.detail);
				this.cost = e.detail.value;
			}
		}
	}
script>

<style>
/* components/vas-prompt/vas-prompt.wxss */
.prompt-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  background: rgba(0, 0, 0, 0.5);
}

.prompt-content {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 80%;
  max-width: 600rpx;
  border: 2rpx solid #ccc;
  border-radius: 10rpx;
  box-sizing: bordre-box;
  transform: translate(-50%, -50%); 
  overflow: hidden;
  background: #fff;
}

.prompt-title {
  width: 100%;
  padding: 20rpx;
  text-align: center;
  font-size: 40rpx;
  border-bottom: 2rpx solid gray;
}
.prompt-input{
  margin: 8%;
  padding: 10rpx 15rpx;
  width: 80%;
  height:85rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
}
.prompt-btn-group{
  display: flex;
}

.btn-item {
  width: 35%;
  margin-bottom: 20rpx;
  height: 100rpx;
  line-height: 100rpx;
  background-color: white;
  justify-content: space-around;
}
.prompt-certain-btn{
  color: white;
  background-color: #4FEBDE;
}
.prompt-cancel-btn{
  border: 1px solid #4FEBDE;
}
.contentFontColor {
  color: #868686;
}
.prompt-text{
	margin-top:15rpx;
	font-size:38rpx;
}
style>

这就是我们的prompt组件了，如果要在对应的页面上引用的话，添加如下代码:

<template>
<prompt ref="prompt" @onConfirm="onConfirm" @onCancel="onCancel" title="提示" :text="promptText">prompt>
template>
<script>
	import prompt from '../../components/prompt.vue';
	export default {
		data() {
			return {
			}
		},
		onLoad(e){
			
		},
		components: {
			prompt,
		},
		methods: {
			prompt:function(){
				this.$refs.prompt.show();
			},
			onConfirm:function(e){
				console.log(e);
				let _cost = e;
				if (_cost == '') {
				 console.log('你还未输入');
				 return;
				}
				else{
				  this.$refs.prompt.hide();
				  uni.showModal({
				  	title: '提示',
				  	content: '你输入的是:'+_cost,
				  	showCancel: false,
				  	confirmText: "确定"
				  })
				}
			},
			onCancel:function(){
				this.$refs.prompt.hide();
				this.$refs.prompt.cost = '';
			}
		}
	}
script>
<style>
	
style>

最后，希望uni-app官方能整合这个功能啊… 非官方的风格还是不统一…