来访~180541 文章~121 评论~26
2023年10月18日 作者 张临志

uniapp自定义弹窗内容

<button type="default" @tap="tapPopup">我是弹窗</button>
<view class="popup" v-show="show">
  <view class="popup-info">
    <view>----我是内容----</view>
    <view class="popup-btn">
      <view><button type="default" @tap="cancel">取消</button></view>
      <view><button type="default" class="affirm" @tap="affirm">确认</button></view>
    </view>
  </view>
</view>

export default {
  data() {
    return {
      show:false,
    },
    methods:{
      // 弹窗
      tapPopup() {
	this.show = true;
      },
      // 点击弹窗取消
      cancel() {
	this.show = false;
      },
      // 点击弹窗确认
      affirm() { 
	this.show = false;
      }
  }
},
.popup-info{
	position: fixed;
	width: 550upx;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 30upx;
	padding: 40upx;
	border-radius: 20upx;
	background-color: #fff;
	z-index: 9999;
}