テクノロジーの継続的な発展に伴い、開発の複雑さも増大しています。従来の開発手法ではシステム全体をアプリケーションとして構築するため、小さな変更や小さな機能の追加によって全体のロジックが変更され、全体に影響を及ぼすことがよくあります。この問題を解決するには、部品化開発を行うことで開発効率の向上と保守コストの削減が可能になります。
この記事では、フロントエンドの Vue カスタム ポップアップ ボックスを迅速に実装し、ポップアップ ボックスのコンテンツをカスタマイズする View ポップアップ コンポーネントを紹介します。完全なソース コードのダウンロード アドレスは https://ext.dcloud.net に添付されています。 .cn/plugin?id=12491
レンダリングは次のとおりです。
説明書
まず、HTML テンプレートにボタン要素を追加して、ポップアップの表示をトリガーする必要があります。次に、JavaScript 部分にカスタム Popup コンポーネントを導入し、v-if命令によってその表示と非表示を制御します。最後に、コンポーネントpropsでいくつかのプロパティを定義します。たとえばisShow、箇条書きボックスを表示するかどうかの制御、箇条width書きボックスのサイズや角の丸めの設定などです。heightradius
次のように：
<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コードセクション
<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>