レンダリング
コード
ラベル
<template>
<view>
<!-- 按钮用于触发模态框的显示 -->
<button @click="showModal = true">显示模态框</button>
<!-- 模态框组件 -->
<view class="modal" v-if="showModal">
<view class="modal-content">
<view>{
{ modalTitle }}</view>
<view>{
{ modalContent }}</view>
<view class="modal-buttons">
<button @click="handleConfirm">确认</button>
<button @click="handleCancel">取消</button>
</view>
</view>
</view>
</view>
</template>ノート：
@click="showModal = true"
showModalこのコードの意味は、ボタンがクリックされたときにの値を設定してモーダルtrueボックスを表示することです。上記のコード例では、Vue.js イベント バインディング構文を使用して
@click、ボタンのクリック イベントをリッスンしました。showModal = trueはボタンをクリックしたときに実行されるアクションで、モーダル ボックスの表示をトリガーするshowModal値を設定します。trueこうすることで、ユーザーがボタンをクリックするとモーダル ボックスが表示されます。
スタイル
<style scoped lang="scss">
/* 遮罩层 */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
/* 窗口 */
.modal-content {
background-color: white;
/* padding: 20px; */
width: 600rpx;
height: 800rpx;
border-radius: 8rpx;
position: relative;
//modal-content下的第一个view
view:first-child{
padding:30rpx;
font-size:60rpx;
font-weight:bold;
font-family:'宋体';
}
//modal-content下的第二个view
view:nth-child(2){
padding:40rpx;
font-size:40rpx;
color:red
}
}
/* 按钮 */
.modal-buttons {
width: 100%;
display: flex;
bottom: 0;
position: absolute;
}
.modal-buttons button {
width: 100%;
border: none;
}
.modal-buttons button:first-child {
background-color: #74bfe7;
color: #fff;
border-radius: 0;
}
.modal-buttons button:last-child {
width: 100%;
border: 2rpx solid #74bfe7;
border-radius: 0px;
background-color: #fff;
color: #74bfe7;
}
</style>
js
<script>
export default {
data() {
return {
showModal: false,
modalTitle: '模态框',
modalContent: '内容'
};
},
methods: {
//确认
handleConfirm() {
// 处理模态框确认按钮点击事件
// 可以在这个方法中执行你需要的操作
this.showModal = false; // 关闭模态框
},
//取消
handleCancel() {
// 处理模态框取消按钮点击事件
// 可以在这个方法中执行你需要的操作
this.showModal = false; // 关闭模态框
}
}
};
</script>分析する
HTML セクション:
buttonモーダルの表示をトリガーするボタンとして要素を使用します 。- ディレクティブを使用して、
v-ifモーダルを表示するかどうかを決定します。 - モーダルコンポーネントは
view要素でラップされ、それに応じてスタイル設定されます。
JavaScript セクション:
dataこの関数は、コンポーネントの初期状態を返します。これには、モーダル ボックスを表示するかどうかを制御する変数showModal、およびモーダル ボックスのタイトルとコンテンツが含まれます。handleConfirm確認ボタン、キャンセルボタンのクリックイベントをそれぞれメソッドhandleCancel、 メソッド、メソッドで処理しており、これらのメソッドで必要な操作を行うことができます。- この例では、確認またはキャンセルボタンをクリックした後、
showModalに設定し てfalseモーダルを閉じます。
スタイルセクション:
- キーワードを使用して
scoped、スタイルの範囲をコンポーネントに限定します。 .modalこのクラスは、ページ全体をカバーするようにオーバーレイのスタイルを設定し、フレックス レイアウトを使用してコンテンツを垂直方向の中央に配置します。.modal-content背景色、幅、高さなどを含むモーダルボックスのスタイルを設定するクラス。.modal-buttonsボタンをスタイル設定するためのクラス。これには、ボタンをモーダル ボックスの下部に配置したり、フレックス レイアウトを使用してボタンを全幅に引き伸ばしたりすることが含まれます。- 最初のボタンは
#74bfe7背景色と白のテキストを使用してアクションを確認します。 - 2 番目のボタンは、
#74bfe7境界線と白い背景色を使用してキャンセル操作を示します。
完全なコード
<template>
<view>
<!-- 按钮用于触发模态框的显示 -->
<button @click="showModal = true">显示模态框</button>
<!-- 模态框组件 -->
<view class="modal" v-if="showModal">
<view class="modal-content">
<view>{
{ modalTitle }}</view>
<view>{
{ modalContent }}</view>
<view class="modal-buttons">
<button @click="handleConfirm">确认</button>
<button @click="handleCancel">取消</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
showModal: false,
modalTitle: '模态框',
modalContent: '内容'
};
},
methods: {
//确认
handleConfirm() {
// 处理模态框确认按钮点击事件
// 可以在这个方法中执行你需要的操作
this.showModal = false; // 关闭模态框
},
//取消
handleCancel() {
// 处理模态框取消按钮点击事件
// 可以在这个方法中执行你需要的操作
this.showModal = false; // 关闭模态框
}
}
};
</script>
<style scoped lang="scss">
/* 遮罩层 */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
/* 窗口 */
.modal-content {
background-color: white;
/* padding: 20px; */
width: 600rpx;
height: 800rpx;
border-radius: 8rpx;
position: relative;
//modal-content下的第一个view
view:first-child{
padding:30rpx;
font-size:60rpx;
font-weight:bold;
font-family:'宋体';
}
//modal-content下的第二个view
view:nth-child(2){
padding:40rpx;
font-size:40rpx;
color:red
}
}
/* 按钮 */
.modal-buttons {
width: 100%;
display: flex;
bottom: 0;
position: absolute;
}
.modal-buttons button {
width: 100%;
border: none;
}
.modal-buttons button:first-child {
background-color: #74bfe7;
color: #fff;
border-radius: 0;
}
.modal-buttons button:last-child {
width: 100%;
border: 2rpx solid #74bfe7;
border-radius: 0px;
background-color: #fff;
color: #74bfe7;
}
</style>