uni-popup(实现自定义弹窗提示、交互)

一般提示框的样式,一般由设计稿而定,如果用uniapp的showmodel,那个并不能满足我们需要的自定义样式,所以最好的方式是我们自己封装一个!(想什么样就什么样)!

一、页面效果

二、使用uni-popup

直接看代码吧!

html 复制代码
<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>

我这里是把他封装成组件,一般这种交互性的,用得到的地方比较多,也建议封装成组件进行使用。

三、在页面中使用

主要是这俩个方法控制关和开。

导入和使用:

html 复制代码
<!-- 错误提示弹窗 -->
    <showTip ref="showtip" :title="tiptitle"></showTip>
html 复制代码
import showTip from "/components/showTip/showTip.vue";

声明:

在data中声明数据:

html 复制代码
privacyVisible: false,
tiptitle: "错误",

声明组件:

html 复制代码
components: {
      showTip
    },

然后就可以使用了:

比如:

顺便把错误的提示文字传进去组件,组件通过props接收直接使用。

根据这个规则,就可以在此基础上封装成自己需要的样式就可以了!

相关推荐
abigale03几秒前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者20 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile24 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
HERR_QQ26 分钟前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
weixin_4166399726 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊32 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火32 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月4 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化