uniApp弹窗确认、emit、component

前言

版本三集成度会高一些，降低了使用复杂度。

第一步，git下载组件

仓库下载完成后，把名为show-modal-vue-v3文件夹复制到uniApp的components文件夹中引用即可。切记不可在项目中直接下载！需要在一个空的文件夹中下载，这个指令是克隆一个仓库对应的分支，所以不能再一次克隆一个仓库到自己的项目中。

git clone -b show-modal-vue https://gitee.com/mssj200224/open-resources.git

第二步，全局引入

import showModal from './components/show-modal' Vue.component('showModal', showModal) 

第三步@使用

html

<show-modal ref="refShowModal" @handleResult="handleResult"> data() { return {} }, methods: { /**
        * 处理结果
        * @param {*} i 1确认 0取消
        */ handleResult(res) { res.showModal({ confirm() { console.log('用户点击了确认'); }, cancel() { console.log('用户点击了取消'); } }); }, /**
        * 打开面板
        */ openPanel() { let refShowModal = this.$refs.refShowModal; refShowModal.openPanel({ content: '确认删除吗？', textAlignContent: 'center', flexDirection: 'row-reverse', confirmText: '确认', cancelText: '取消' }); } } } 

版本一(普通版) 组件

html

<template> <view> <view class="conBox_content"> <view>{{ title }} // 接收父组件传递过来的值 props: { title: { type: String, }, }, data() { return {}; }, methods: { yesOn(isYO) { this.$emit("ifYesOn", isYO); }, }, }; 

css

view { font-size: 28rpx; color: #505050; font-weight: 600; } .conBox_content { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 999; background-color: #efeff4; border-radius: 20rpx; box-sizing: border-box; padding: 36rpx 30rpx; } .conBox_content > view:first-child { margin-bottom: 46rpx; text-align: center; } .whether { display: flex; justify-content: space-around; align-items: center; margin-top: 30rpx; } .whether > text { width: 200rpx; height: 80rpx; line-height: 80rpx; border-radius: 20rpx; text-align: center; } .whether > text:first-child { background-color: #007aff; color: #ffffff; margin-right: 40rpx; } .whether > text:last-child { background-color: #ffffff; } .mask_layer { position: fixed; left: 0; top: 0; z-index: 777; /* content: ''; */ width: 100%; height: 100%; background-color: rgba(10, 10, 10, 0.7); } 

组件的引用

html部分

<conf-box v-if="isConfBox" :title="titleVal"> confBox }, data() { return () { titleVal: '是否确认删除', isConfBox: false } }, methods: { // 打开弹窗函数 btnf() { this.isConfBox = !this.isConfBox; }, // 接收子组件返回的值 ifYesOn() { if(e == 1) { console.log('用户点击确定'); this.isConfBox = false; } else { console.log('用户点击取消'); this.isConfBox = false; } } } 

全局注册组件

在main.js文件中注册

// 引入组件 import confBox from './components/***/confirmation-box'; // 挂载组件 Vue.component('confBox', confBox); 

版本二(ref版) 组件

html

<template> <view class="show_modal_box" v-if="isConfBox"> <view class="panel_box"> <view class="title_box" v-if="title" :style="{ textAlign: textAlignTitle }">{{ title }}{ content }}{ confirmText }}{ cancelText }} name: 'showModal', data() { return { // 控制面板的显示与隐藏 isConfBox: false, // 标题，空值不显示 title: '', // 内容，空值不显示 content: '', // 标题位置，左中右 textAlignTitle: 'left', // 内容位置，左中右 textAlignContent: 'left', // 按钮顺序 row/row-reverse flexDirection: 'row', // 确认按钮文字 confirmText: '确认', // 确认按钮文字颜色 confirmTextColor: '#007aff', // 取消按钮文字 cancelText: '取消', // 取消按钮文字颜色 cancelTextColor: '#505050' } }, methods: { openPanel(obj) { let self = this; for (const key in obj) { if (Object.hasOwnProperty.call(obj, key)) { const val = obj[key]; if (val) self[key] = val; } } self.isConfBox = true; }, handleResult(i) { this.$emit("handleResult", i); this.isConfBox = false; }, }, } 

css

.show_modal_box { font-size: 38rpx; } .panel_box { width: 68%; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 999; background-color: #ffffff; border-radius: 20rpx; box-sizing: border-box; padding: 28rpx; } .title_box { font-weight: 700; } .content_box { font-size: 36rpx; } .btn_box { margin-top: 32rpx; display: flex; justify-content: space-around; align-items: center; } .mask_layer { position: fixed; left: 0; top: 0; z-index: 777; width: 100%; height: 100%; background-color: rgba(10, 10, 10, 0.5); } 

使用组件

html

<show-modal ref="refShowModal" @handleResult="handleResult"> if (i === 1) { console.log('用户点击确认'); } else { console.log('用户点击取消'); } }, /**
 * 打开面板
 */ openPanel() { let refShowModal = this.$refs.refShowModal; refShowModal.openPanel({ content: '是否全部标记为已读', textAlignContent: 'center', flexDirection: 'row-reverse', confirmText: '是', cancelText: '否' }); } 

全局注册组件

在main.js文件中注册

import showModal from './components/show-modal' Vue.component('showModal', showModal) 

版本三(ref和控制反转版) 组件

html

<template> <view class="show_modal_box" v-if="isConfBox"> <view class="panel_box"> <view class="title_box" v-if="title" :style="{ textAlign: textAlignTitle }">{{ title }}{ content }}{ confirmText }}{ cancelText }} name: 'showModal', data() { return { // 控制面板的显示与隐藏 isConfBox: false, // 标题，空值不显示 title: '', // 内容，空值不显示 content: '', // 标题位置，左中右 textAlignTitle: 'left', // 内容位置，左中右 textAlignContent: 'left', // 按钮顺序 row/row-reverse flexDirection: 'row', // 确认按钮文字 confirmText: '确认', // 确认按钮文字颜色 confirmTextColor: '#007aff', // 取消按钮文字 cancelText: '取消', // 取消按钮文字颜色 cancelTextColor: '#505050' } }, methods: { openPanel(obj) { let self = this; for (const key in obj) { if (Object.hasOwnProperty.call(obj, key)) { const val = obj[key]; if (val) self[key] = val; } } self.isConfBox = true; }, handleResult(i) { let self = this; self.$emit("handleResult", { showModal({ confirm, cancel }) { i === 1 ? confirm() : cancel(); self.isConfBox = false; } }); }, }, } 

css

.show_modal_box { font-size: 38rpx; } .panel_box { width: 68%; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 999; background-color: #ffffff; border-radius: 20rpx; box-sizing: border-box; padding: 28rpx; } .title_box { font-weight: 700; } .content_box { font-size: 36rpx; } .btn_box { margin-top: 32rpx; display: flex; justify-content: space-around; align-items: center; } .mask_layer { position: fixed; left: 0; top: 0; z-index: 777; width: 100%; height: 100%; background-color: rgba(10, 10, 10, 0.5); } 

使用组件

html

<show-modal ref="refShowModal" @handleResult="handleResult"> res.showModal({ confirm() { console.log('用户点击了确认'); }, cancel() { console.log('用户点击了取消'); } }); }, /**
 * 打开面板
 */ openPanel() { let refShowModal = this.$refs.refShowModal; refShowModal.openPanel({ content: '确认删除吗？', textAlignContent: 'center', flexDirection: 'row-reverse', confirmText: '确认', cancelText: '取消' }); } 

全局注册组件

在main.js文件中注册

import showModal from './components/show-modal' Vue.component('showModal', showModal)