uniapp底部弹出层(uni-popup)使用技巧_uniapp从底部弹出一个盒子

官网：uni-popup 弹出层 | uni-app官网 (dcloud.net.cn)

底部弹出的使用技巧工作中常用

1.一般app和小程序的弹窗都是在底部弹出，例如：

2.如何实现（简单实用）？

•    uni-popup组件，我用vue3的时候是不用引入的，vue2需要先引入到项目中

• 
• 
• 

• 怎么使用？记得先import导入和 components注册一下， 如何从底部弹出，圆弧怎么搞？

• 注意： import的文件位置正确，ref绑定的名称和this.$ref.后面的名称一致

<template>
	<view>
		<button @click="open">打开弹窗</button>
		<uni-popup ref="popup" type="bottom">
            <view class="test-popup">你好,底部弹出</view>
        </uni-popup>
	</view>
</template>
<script>
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
    export default {
        components: {
			uniPopup
		},
       methods:{
          open(){
            // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持         
            //['top','left','bottom','right','center']
            this.$refs.popup.open('bottom')//底部弹出
          }
     }
}
</script>
<style lang="scss">
    .test-popup{
        background: white;//默认全屏时灰色，只需要把你需要的部分改成白色
        border-radius: 20px;//设置弧度的大小
        height: 200px;
    }
</style>