序文
この記事では、Vue と ElementUI ポップアップ コンポーネントをカプセル化する方法を紹介します。ポップアップ ウィンドウ コンポーネントは、Web 開発で一般的に使用される対話型コンポーネントであり、重要な情報、警告を表示したり、ユーザー入力に使用したりできます。
1.ElementUIをインストールする
まず、ElementUI をインストールする必要があります。これは npm を使用してインストールできます。コマンドは次のとおりです。
npm install element-ui --save
2. ポップアップウィンドウコンポーネントを作成する
Vue プロジェクトでポップアップ ウィンドウ コンポーネントを作成するには、ElementUI が提供する Dialog コンポーネントを使用できます。Dialog コンポーネントは、別の Vue コンポーネントを作成することでラップできます。このコンポーネントでは、ポップアップのタイトル、コンテンツ、ボタンなどを定義できます。
<template>
<el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false">
<span>{
{
content}}</span>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">{
{
cancelText}}</el-button>
<el-button type="primary" @click="ok">{
{
okText}}</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: 'MyDialog',
props: {
title: String,
content: String,
cancelText: {
type: String,
default: '取消'
},
okText: {
type: String,
default: '确定'
}
},
data() {
return {
visible: true
}
},
methods: {
ok() {
this.$emit('ok')
this.visible = false
}
}
}
</script>
このコンポーネントでは、title、content、cancelText、okText の 4 つのプロパティを定義します。また、ポップアップ ウィンドウの表示と非表示を制御するために使用されるデータも定義します。ボタンのクリック イベントでは、$emit メソッドを通じてイベントを親コンポーネントに送信し、ポップアップを閉じます。
3. 親コンポーネントでポップアップコンポーネントを使用する
親コンポーネントでは、ポップアップ コンポーネントを導入することでこのコンポーネントを使用できます。親コンポーネントでは、ポップアップのタイトル、コンテンツ、ボタンのテキストなどを定義できます。
<template>
<div>
<el-button @click="showDialog">点击打开弹窗</el-button>
<my-dialog :title="title" :content="content" :cancel-text="cancelText" :ok-text="okText" @ok="onOk"></my-dialog>
</div>
</template>
<script>
import MyDialog from '@/components/MyDialog'
export default {
name: 'ParentComponent',
components: {
MyDialog
},
data() {
return {
title: '弹窗标题',
content: '弹窗内容',
cancelText: '取消',
okText: '确定'
}
},
methods: {
showDialog() {
this.$refs.dialog.visible = true
},
onOk() {
console.log('点击了确定按钮')
}
}
}
</script>
親コンポーネントでは、ポップアップ ウィンドウ コンポーネントを導入し、ポップアップ ウィンドウの表示とコンテンツを制御する 4 つのプロップを定義します。ボタンのクリック イベントでは、$refs を使用してポップアップ ウィンドウ コンポーネントのインスタンスを取得し、visible プロパティを true に設定してポップアップ ウィンドウを開きます。
4. 結論
この記事では、Vue および ElementUI ポップアップ コンポーネントをカプセル化する方法について説明します。Dialog コンポーネントを別の Vue コンポーネントにカプセル化し、このコンポーネントを親コンポーネントに導入することで、ポップアップ ウィンドウ コンポーネントを簡単に使用していくつかのインタラクティブな機能を実現できます。この記事があなたのお役に立てば幸いです。