foreword
This article will introduce how to encapsulate a Vue and ElementUI popup component. The pop-up window component is a commonly used interactive component in web development, which can be used to display some important information, warnings, or for user input.
1. Install ElementUI
First, we need to install ElementUI, which can be installed using npm, the command is as follows:
npm install element-ui --save
2. Create a popup window component
To create a pop-up window component in a Vue project, you can use the Dialog component provided by ElementUI. The Dialog component can be wrapped by creating a separate Vue component. In this component, we can define the title, content, buttons, etc. of the popup.
<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>
In this component, we define four props: title, content, cancelText, okText. We also define a data, which is used to control the display and hiding of the pop-up window. In the button click event, we send the event to the parent component through the $emit method and close the popup.
3. Use the popup component in the parent component
In the parent component, we can use this component by introducing the popup component. In the parent component, we can define the title, content, button text, etc. of the popup.
<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>
In the parent component, we introduce the pop-up window component and define four props to control the display and content of the pop-up window. In the button click event, we use $refs to get the instance of the popup window component, and set the visible property to true to open the popup window.
4. Conclusion
This article describes how to encapsulate a Vue and ElementUI popup component. By encapsulating the Dialog component into a separate Vue component and introducing this component in the parent component, we can easily use the pop-up window component to achieve some interactive functions. Hope this article can help you.