With the continuous development of technology, the complexity of development is also increasing. The traditional development method makes a system into a whole application. It often happens that a small change or an addition of a small function may cause the modification of the overall logic, causing the whole body to be affected. In order to solve this problem, we can improve development efficiency and reduce maintenance costs through componentized development.
This article will introduce a View popup component that quickly implements the front-end Vue custom pop-up box and customizes the content of the pop-up box. The complete source code download address is attached: https://ext.dcloud.net.cn/plugin?id=12491
The renderings are as follows:
Instructions
First, we need to add a button element to the HTML template to trigger the display of the popup. Then, introduce our custom Popup component in the JavaScript part, and v-ifcontrol its display and hiding through instructions. propsFinally, define some properties in the component , such as isShowcontrolling whether the bullet box is displayed, width, height, radiussetting the size and rounded corners of the bullet box, etc.
As follows:
<template>
<div>
<button @click="showPopup">点击显示弹框</button>
<cc-popup v-if="isShow" :ishide="isHide" width="calc(100vw - 70px)" height="346px" radius="16rpx">
<!-- 自定义展示内容 -->
<view class="modelContent">
<view style="margin-top: 6px;">{
{ title }}</view>
<view style="margin-top: 20px; color: #666666; margin: 6px 12px;">{
{ content }}</view>
<image class="imageV"></image>
<button style="width: 80%; height: 48px;margin-top: 20px; background-color: seagreen;color: white;">确定</button>
</view>
<!-- 自定义关闭按钮 -->
<view class="close" @click="hidePopup">✕</view>
</cc-popup>
</div>
</template>
export default {
data() {
return {
title: '弹框标题',
content: '这是弹框的内容',
isShow: false,
isHide: false, // 点击其他区域时隐藏弹框
};
},
methods: {
showPopup() {
this.isShow = true;
},
hidePopup() {
this.isHide = true;
},
},
};
HTML code section
<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 code (introduce components to fill data)
<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>