快速实现前端自定义弹框、自定义弹框内容alertView popup组件, 请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12491

效果图如下:

 

代码如下:

# 自定义弹框使用方法

#### HTML代码部分

```html

<template>

<view class="content">

<image class="logo" src="/static/logo.png"></image>

<view class="logo" style="line-height: 100px;text-align: center;" @click="popupClick">点击弹框</view>

<!-- 使用组件 -->

<ccPopup :ishide='isshow' width="calc(100vw - 70px)" height="346px" radius="16rpx">

<!-- 自定义展示内容 -->

<view class="modelContent">

<view style="margin-top: 6px;">

弹框标题

</view>

<view style="margin-top: 20px; color: #666666; margin: 6px 12px;">

这是弹框内容 这是弹框内容 这是弹框内容 这是弹框内容

</view>

<image class="imageV" :src="mySrc" ></image>

</view>

<!-- 自定义关闭按钮 -->

<view class="close" @click="isshow=false">✕</view>

</ccPopup>

</view>

</template>

```

#### JS代码 (引入组件 填充数据)

```javascript

<script>

import ccPopup from '@/components/cc-popup.vue';

export default {

components: {

ccPopup

},

data() {

return {

title: 'Hello',

companyList:[{},{},{}],

isshow:false,

mySrc:'../../static/logo.png'

}

},

onLoad() {

},

methods: {

popupClick(){

this.isshow = !this.isshow;

}

}

}

</script>

```

#### CSS

```CSS

<style>

.content {

display: flex;

flex-direction: column;

}

.logo {

height: 200rpx;

width: 200rpx;

margin-top: 200rpx;

margin-left: auto;

margin-right: auto;

margin-bottom: 50rpx;

}

.text-area {

display: flex;

justify-content: center;

}

.title {

font-size: 36rpx;

color: #8f8f94;

}

.modelContent {

width: 100%;

height: 100%;

display: flex;

align-items: center;

flex-direction: column;

justify-content: center;

}

.imageV {

margin-top: 0px;

width: calc(100vw - 100px);

height: calc((100vw - 100px) * 1.027) ;

}

.close {

width: 60rpx;

height: 60rpx;

color: #FFFFFF;

line-height: 60rpx;

text-align: center;

border-radius: 50%;

border: 1px solid #FFFFFF;

position: relative;

bottom: -10%;

left: 50%;

transform: translate(-50%, -50%);

}

</style>

```

前端自定义弹框组件、自定义弹框内容alertView popup组件的更多相关文章

  1. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  2. svelte组件:Svelte自定义弹窗Popup组件|svelte移动端弹框组件

    基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式) 前几天有分享一个svelte自定义tabbar+navbar组件,今天继续带来svelte自定义弹窗组件. svPopup ...

  3. vue3系列:vue3.0自定义全局弹层V3Layer|vue3.x pc桌面端弹窗组件

    基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0 ...

  4. Vue父组件如何调用子组件(弹出框)中的方法的问题

    如果子组件是一个弹出框,只有在触发某个点击事件时弹出框才能出现(也就是说在父组件中的子组件使用上用了v-if),那在父组件上如果不点击弹出框是不能获取到$ref的. 原因就是:引用指向的是子组件创建的 ...

  5. 微信小程序自定义组件-下拉框

    这个是网址https://www.cnblogs.com/zjjDaily/p/9548433.html 微信小程序之自定义select下拉选项框组件 知识点:组件,animation,获取当前点击元 ...

  6. 自定义iOS 中推送消息 提示框

    看到标题你可能会觉得奇怪 推送消息提示框不是系统自己弹出来的吗? 为什么还要自己自定义呢? 因为项目需求是这样的:最近需要做 远程推送通知 和一个客服系统 包括店铺客服和官方客服两个模块 如果有新的消 ...

  7. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  8. Asp.net点击按钮弹出文件夹选择框的实现(网页)

    本文地址:http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html 在Asp.net网站实际的开发中,比如:需要实现点击一个类似于FileUpload的 ...

  9. 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

  10. vue中超简单的方法实现点击一个按钮出现弹框,点击弹框外关闭弹框

    效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" ...

随机推荐

  1. 计网学习笔记五 wireless && mobile networks

    老师把无线网络用一节课一遍过了-感觉没能学透,便课后自己总结,看书,找资料补充,把无线网络大概摸了个七七八八.虽然不算精细,但还能看!内容包括WLAN总概,WiFi-WLAN的实现,802.11规定的 ...

  2. [Java]变量及其初始化 与 类对象的初始化

    1 变量 1.1 变量的[定义] 1.2 变量的[作用域] 1.3 变量的[初始值] 1.4 补充:缓存变量 1.5 变量的[分类]与[未初始化情况] 2 类对象 2.1 类对象的初始化/构造过程 1 ...

  3. 多表查询和python操作mysql

    目录 多表查询的两种方法 方法1:连表操作 方法2:子查询 小知识点补充说明 可视化软件NaviCat 多表查询练习题 1.查询所有的课程的名称以及对应的任课老师姓名 2.查询平均成绩大于八十分的同学 ...

  4. Thread面试题

    面试题目录https://www.cnblogs.com/Kaelthas/p/15005844.html 1.一个Thread对象代表一个线程,同一个线程能否多次启动? 不能,在Thread类中变量 ...

  5. java项目 学生成绩管理系统 (源码+数据库文件)

    ​ 需要的私信我 备注来意:项目名称 来了就点个赞再走呗,即将毕业的兄弟有福了 文章底部获取源码 java项目  学生成绩管理 (源码+数据库文件)技术框架:java+springboot+vue+m ...

  6. python:冒泡排序(Bubble Sort)超详细教程!

    关于排序,真的非常的重要.数据可以从小到大排序,也可以从大到小排序.这样对于一个有序的数据,我们处理起来就很方便,这对于我们的工作帮助是很大的. 那么你拿到一组无序的数据,你将要如何去处理它呢? 冒泡 ...

  7. 因果推断-Caual Inference

    两种形式 Reduced Form:Let data speak itself,主要采用regression等方法 Structure Approach:Data only can never rev ...

  8. Laf Assistant:云开发从未如此爽快!

    原文链接:https://forum.laf.run/d/67 工欲善其事,必先利其器.在编写代码时,IDE 也是我们不可或缺的.它可以让我们更高效地完成代码编写,提高开发效率.因此,IDE 是我们编 ...

  9. C#自行实现安装卸载程序(不使用官方组件)

    正规软件建议还是使用官方的标准安装程序组件,因为官方的标准安装/卸载组件能更好的与操作系统衔接,安装和卸载流程更加规范. 今天提供一种野路子,全用代码实现安装卸载器. 需要写一个程序,包含安装器.卸载 ...

  10. 【Redis】数据类型介绍

    一.字符 string Redis常用基本类型之一,存入Redis的所有key都是字符类型,常用于保存Session信息 字符类型 命令 含义 复杂度 set <key> <valu ...