写一个vue代码,用element 构建一个弹出式面板,点击链接,将弹出面板,面板里有两个输入框。弹框靠右,限制宽度
时间: 2024-03-14 22:46:47 浏览: 78
以下是一个使用Element UI构建弹出式面板的Vue代码示例,它包含两个输入框,并且弹框靠右,限制宽度:
```
<template>
<div>
<el-button @click="showPanel">点击弹出面板</el-button>
<el-dialog
title="弹出式面板"
:visible.sync="dialogVisible"
:close-on-click-modal="false"
:modal-append-to-body="false"
:custom-class="'popup'"
width="300px"
>
<el-form>
<el-form-item label="输入框1">
<el-input v-model="input1"></el-input>
</el-form-item>
<el-form-item label="输入框2">
<el-input v-model="input2"></el-input>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
input1: '',
input2: ''
}
},
methods: {
showPanel() {
this.dialogVisible = true;
}
}
}
</script>
<style>
.popup {
position: absolute;
top: 0;
right: 0;
}
</style>
```
在这个代码示例中,我们使用了`el-dialog`组件来创建弹出式面板。我们将`visible`属性绑定到`dialogVisible`变量,以便根据需要显示或隐藏面板。我们使用`el-input`组件创建了两个输入框,并将它们的值绑定到`input1`和`input2`变量。我们将面板的宽度设置为300像素,并使用自定义class `popup`来将其靠右限制宽度。
阅读全文