uniApp - 弹窗确认

目录

• • 1、组件
  • • 1.1、html部分
    • 1.2、JavaScript 部分
    • 1.3、Css 部分
  • 2、使用组件
  • • 2.1、html 部分
    • 2.2、JavaScript 部分
  • 3、全局注册组件（vue）

1、组件

1.1、html部分

<template>  <view>    <view class="conBox_content">      <view>{{ title }}</view>      <view class="whether"> <text @tap="yesOn(1)">确认</text> <text @tap="yesOn(0)">取消</text>      </view>    </view>    <view class="mask_layer"></view>  </view></template>

1.2、JavaScript 部分

export default {// 接收父组件传递过来的值props: {title: {type: String,},},  data() {return {};},methods: {yesOn(isYO) {this.$emit("ifYesOn", isYO);},},};

1.3、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);}

2、使用组件

2.1、html 部分

<conf-box v-if="isConfBox" :title="titleVal"></conf-box>

2.2、JavaScript 部分

// 引入组件import confBox from '/component/***/confBox.vue'// 注册组件  components: {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;}}}

3、全局注册组件（vue）

// 引入组件import confBox from './components/***/confirmation-box'// 挂载组件Vue.component('confBox', confBox)  // 在 main.js 文件中注册