uni-popup组件的使用

easycom：传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

比如前述举例的uni-rate组件，它导入到uni-app项目后，存放在了目录/components/uni-rate/uni-rate.vue。

同时它的组件名称也叫uni-rate，所以这样的组件，不用在script里注册和引用。

底部弹窗效果图：

 一、引入

uni-popup 弹出层 - DCloud 插件市场

 这里直接引入到uni_modules目录

（如果是自己的组件 ，安装在项目的components目录下，目录例如：/components/uni-rate/uni-rate.vue。）

二、使用步骤

引入后的代码结构

<template>
	<view class="content">
		<button @click="open">打开弹窗</button>
		<uni-popup ref="popup" type="bottom">
			<view class="content-pop">
				我是底部弹窗
			</view>
		</uni-popup>
	</view>
</template>
 
 
<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
 
		},
		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			}
		}
	}
</script>
 
<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.content-pop{
		width: 100vw;
		height: 50vh;
		background-color: #FFFFFF;
		border-radius:25upx 25upx 0 0;
	}
</style>