组件 - 弹窗确认 - uniApp

组件

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 部分

<script>
export default {
     
// 接收父组件传递过来的值
  props: {
     
    title: {
     
      type: String,
    },
  },
  
  data() {
     
    return {
     };
  },

  methods: {
     
    yesOn(isYO) {
     
      this.$emit("ifYesOn", isYO);
    },
  },
};
</script>

1.3、Css 部分

<style>
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);
}
</style>

使用组件

2.1、html 部分

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 文件下