Vue でポップアップ ウィンドウを実装するにはさまざまな方法があります。簡単な例を次に示します:
1. まず、Vue プロジェクトに `Modal.vue` という名前のコンポーネント ファイルを作成します:
```html
<template>
<div class= " modal-mask" v-show="visible" @click.self="close">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
デフォルトのタイトル
</slot>
</div>
<div class="modal-body">
<slot name="body">
デフォルトのコンテンツ
</slot>
</div>
<div class="modal-footer">
<slot name = "フッター">
<button @click="close">閉じる</button>
</slot>
</div>
</div>
</div>
</template>
<script>
デフォルトのエクスポート { props: { 表示可能: {
タイプ: ブール値、
デフォルト: false
}
}、
メソッド: { close() { this.$emit('update:visible', false); } } }; </script> <スタイルスコープ> .modal-mask { 位置: 固定; トップ: 0; 左: 0; 幅: 100%; 高さ: 100%; 背景色: rgba(0, 0, 0, 0.5); ディスプレイ: フレックス; コンテンツの位置揃え: 中央; 整列項目: 中央; .modal -container { 背景色: #fff; パディング: 20px; 境界半径: 5px; 幅: 50%; } </style> ```
data() { return { showModal: false }; } };
</script>
```
このようにして、「ポップアップを開く」ボタンをクリックすると、ポップアップが表示されます。ポップアップウィンドウの外側の領域または「閉じる」ボタンをクリックすると、ポップアップウィンドウが閉じます。必要に応じて、ポップアップ ウィンドウのタイトル、コンテンツ、下部のアクション ボタンをカスタマイズできます。
以下は、一般的に使用される Vue ポップアップ実装コードです。
1. Element UI コンポーネント ライブラリの Dialog コンポーネントを使用します。``html
<template>
<
el-button @click="dialogVisible = true">ポップアップ ウィンドウを開く</el-button>
<el-dialog :visible。 sync="dialogVisible " title="ポップアップ ウィンドウ タイトル">
<p>ポップアップ コンテンツ</p>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">キャンセル</p> el-button>
<el-button type="primary" @click="dialogVisible = false">OK</el-button> </span>
</el-dialog>
</template>
<script >デフォルト
をエクスポート{ data () { return { DialogVisible:false } } } </script> ``` 2. Vue カスタム コンポーネントを使用してポップアップウィンドウを実装します```html <template> <div>
<button @click="showModal">ポップアップを開く</button>
<modal :show="show" @close="closeModal">
<h2>ポップアップのタイトル</h2>
<p>ポップアップの内容</p >
<button @click="closeModal">ポップアップを閉じる</button>
</modal>
</div>
</template>
<script>
'./Modal.vue' からモーダルをインポートします
デフォルトをエクスポートします { コンポーネント: { Modal } , data () { return { show: false } }、メソッド: { showModal() { this.show = true }、closeModal() { this.show = false } } } </script> ``` 3. Vueプラグインを使用してポップアップウィンドウ```htmlを実現します
<template>
<div>
<button @click="showModal">打开弹窗</button>
</div>
</template>
<script>
'vue' から Vue をインポート
'./MyDialog.vue' から MyDialog を
インポート エクスポートデフォルト { メソッド: { showModal() { const Dialog = Vue.extend(MyDialog) const Dialog = new Dialog({ el: document.createElement('div') }) document.body.appendChild(dialog.$el) } } } </script> ```