uniapp之pop弹窗

本文主要介绍通过点击button实现pop弹窗，弹窗可输入内容。

<template>
	<view>
		<view class="button-sp-area">
			<button type="default" size="mini" @click="confirmDialog">弹窗</button>
		</view>
		<uni-popup id="dialogInput" ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" title="处理方案" placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import uniCombox from "@/components/uni-combox/uni-combox"
	import xflSelect from '@/components/xfl-select/xfl-select.vue'
	
	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			uniSearchBar,
			uniCombox,
			xflSelect
		},
		data() {
			return {
				   
					inputValue: '',
					resolution: [],
				
					swiperHeight: 0,
				
				
			}
		},
		methods: {
			confirmDialog() {
				this.$refs.dialogInput.open()
			},
			dialogInputConfirm(done, val) {
				console.log('输入的内容为:'+val)
				done()
		}
		
		},
		}
</script>

<style>

</style>

效果展示：