uniapp中uni-popup的用法——实例讲解

uni-pop弹出层组件,在应用中弹出一个消息提示窗口、提示框等,可以设置弹出层的位置,是中间、底部、还是顶部。

如下图效果所示:白色区域则为弹出的pop层。

uniapp中uni-popup的用法——实例讲解_第1张图片

一、 创建一个自定义组件

1.项目中安装下载uni-pop插件。

2.把pop内容单独写个组件。这里放到 components下。 type="bottom"指的pop展示所在屏幕的位置。


在methods里面定义,用到的js方法:

	methods: {
			closeInfoPop() {
				this.$refs.cityPhonePop.close()
			},
			//拨打电话
			callPhone(item) {
				var that = this;
				uni.makePhoneCall({
					phoneNumber: item.phone,
					// phoneNumber: '025-83582006',
					success: (res) => {
						console.log('调用成功!')
						that.closeInfoPop();
					},
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			open() {
                //cityPhonePop是上面布局定义的uni-pop 的ref后面的名称, this.$refs.cityPhonePop.open()则打开pop展示。
				this.$refs.cityPhonePop.open()
			},
			close() {
				this.$refs.cityPhonePop.close()
			}
		}

此组件则定义完成。

二、页面中使用上面创建的自定义组件:

1.先引入组件,并在components中声明,则可以用cityPhone此组件了。

import cityPhone from "@/components/cityPhone.vue"
    export default {
        components: {
            cityPhone
        },
   


                    
                    

你可能感兴趣的:(uniapp,uni-app)