????????一般提示框的樣式，一般由設計稿而定，如果用uniapp的showmodel，那個并不能滿足我們需要的自定義樣式，所以最好的方式是我們自己封裝一個?。ㄏ胧裁礃泳褪裁礃樱?/p>

一、頁面效果

二、使用uni-popup

直接看代碼吧！

<template>
  <view>
    <uni-popup ref="tipPopup" type="center" :is-mask-click="true">
      <view class="pop">
        <view class="title">
          溫馨提示
        </view>
        <!-- 提示icon -->
        <view class="tip-img">
          <image src="../../static/image/tip/tip-icon.png" mode=""></image>
        </view>
        <view class="tip-info">
          {{title}}
        </view>
        <view class="sure" @click="sure">
          確定
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    name:"showTip",
    props:["title"],
    data() {
      return {
        
      };
    },
    methods: {
      open() {
        this.$refs.tipPopup.open()
      },
      sure() {
        this.$refs.tipPopup.close()
      }
    }
  }
</script>

<style scoped>
.pop {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    border-radius: 16rpx;
    height: 576rpx;
    z-index: 99;
    width: 640rpx;
    padding: 30rpx 0;
  }
  .title {
    text-align: center;
    font-size: 34rpx;
    font-weight: 500;
    margin-top: 38rpx;
  }
  .tip-img {
    margin: 0 auto;
    width: 296rpx;
    height: 204rpx;
    margin-top: 64rpx;
  }
  .tip-img image {
    width: 100%;
    height: 100%;
  }
  .tip-info {
    padding: 0 30rpx;
    font-size: 34rpx;
    color: #666;
    margin-top: 32rpx;
    margin-bottom: 64rpx;
    text-align: center;
  }
  .sure {
    width: 100%;
    border-top: 1rpx solid #d1d1d1;
    height: 112rpx;
    text-align: center;
    line-height: 112rpx;
    color: #02A53C;
    font-size: 34rpx;
    font-weight: 500;
  }
</style>

我這里是把他封裝成組件，一般這種交互性的，用得到的地方比較多，也建議封裝成組件進行使用。

三、在頁面中使用

主要是這倆個方法控制關和開。

導入和使用：

<!-- 錯誤提示彈窗 -->
    <showTip ref="showtip" :title="tiptitle"></showTip>

import showTip from "/components/showTip/showTip.vue";

?聲明：

在data中聲明數據：

privacyVisible: false,
tiptitle: "錯誤",

聲明組件：?

components: {
      showTip
    },

然后就可以使用了：

比如：

?順便把錯誤的提示文字傳進去組件，組件通過props接收直接使用。

根據這個規(guī)則，就可以在此基礎上封裝成自己需要的樣式就可以了！文章來源地址http://www.zghlxwxcb.cn/news/detail-841324.html

到了這里，關于uni-popup（實現自定義彈窗提示、交互）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！