随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。
通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。
今天给大家介绍的一款组件:快速实现前端Vue自定义弹框、自定义设置弹框内容alertView popup组件，
效果图如下：
代码如下：
使用方法
<view class="popUpBtn" @click="popupClick">
点击显示弹框</view>
<!-- 使用组件 isShow：设置弹框是否显示 width：宽度 height：高度 radius：圆角 -->
<cc-popup :isShow='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>
<button style="width: 80%; height: 48px;margin-top: 20px; background-color: seagreen;color: white;"> 确定
</button>
</view>
<!-- 自定义关闭按钮 -->
<view class="close" @click="isshow=false">✕</view>
</cc-popup>
HTML代码部分
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="logo" style="background-color: aquamarine;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代码 （引入组件 填充数据）
<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
<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>
阅读全文下载完整组件代码请关注微信公众号： 前端组件开发
