在Vue中实现按钮点击后弹出对话框（弹框）的功能，通常可以使用一些Vue的UI组件库，如Element UI、Vuetify、BootstrapVue等，这些库提供了丰富的组件，包括对话框（Dialog）、模态框（Modal）等，可以很方便地实现这个功能。但如果你不想使用任何UI库，也可以自己手写一个简单的弹框组件。
<template>
<el-button type="primary" plain @click="dialogFormVisible = true">新建专辑
</el-button>
<el-dialog v-model="dialogFormVisible" title="新建专辑" class="el-dialog__header" style="z-index: 2065;">
<el-form :model="form">
<el-form-item label="名称" :label-width="formLabelWidth" style=" width: 460px;margin-top: 20px;" >
<el-input v-model="form.name" autocomplete="off" />
</el-form-item>
<el-form-item label="创建人" :label-width="formLabelWidth" style=" width: 460px">
<el-select v-model="form.region">
<el-option label="不限" value="不限" />
</el-select>
</el-form-item>
<el-form-item label="创建人" :label-width="formLabelWidth" style=" width: 460px">
<el-select v-model="form.region">
<el-option label="不限" value="不限" />
</el-select>
</el-form-item>
<el-form-item label="权限" :label-width="formLabelWidth">
<el-radio-button label="left">所有人可见</el-radio-button>
<el-radio-button label="right">指定人员可见</el-radio-button>
<el-radio-button label="top">项目人员可见</el-radio-button>
</el-form-item>
<div class="mt16">
<el-form-item :label-width="formLabelWidth" style=" width: 550px">
<el-input v-model="input" placeholder="请输入内容" :suffix-icon="Search"></el-input>
</el-form-item>
<div class="cascader-container left" style="margin-left: 140px;">
<div class="cascader-title">
<div class="tab-label " :class="!showUser ?'action':''">部门</div>
<div class="tab-label " :class="showUser ?'action':''">人员</div>
<!-- <el-tabs v-model="activeName" @tab-click="handleClick">-->
<!-- <el-tab-pane label="部门" name="first" class="tab-label ">-->
<!-- 1-->
<!-- </el-tab-pane>-->
<!-- <el-tab-pane label="人员" name="second" class="tab-label ">人员</el-tab-pane>-->
<!-- </el-tabs>-->
</div>
<div class="cascader-list">
<div class="cascader-list member-parent">
<div class="member-left" >
<el-tree
style="width: 100%;"
:props="props"
:load="loadNode"
lazy
show-checkbox
@check-change="handleCheckChange"
/>
</div>
<div class="member-right" >
<el-checkbox v-model="checked1" label="公司" size="large" class="member-right-text"/>
</div>
</div>
</div>
</div>
<div class="cascader-container right">
<div class="cascader-title">
<span>已选可见人员(0)</span>
</div>
<div class="cascader-list"></div>
</div>
</div>
<!-- <el-form-item :label-width="formLabelWidth">-->
<!-- <el-transfer-->
<!-- filterable-->
<!-- :filter-method="filterMethod"-->
<!-- filter-placeholder="请输入城市拼音"-->
<!-- v-model="value"-->
<!-- :data="data">-->
<!-- </el-transfer>-->
<!-- </el-form-item>-->
<el-form-item label="备注（非必填）" :label-width="formLabelWidth" style="margin-top: 20px;">
<el-input
v-model="textarea"
style="width: 360px; height: 64px;"
type="textarea"
placeholder="请输入一个备注"
/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog__footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">
保存
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import type Node from 'element-plus/es/components/tree/src/model/node'
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const textarea = ref("");
const form = reactive({
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: "",
desc: ""
});
const showUser = ref(false)
let count = 1
interface Tree {
name: string
}
const props = {
label: 'name',
children: 'zones',
}
const handleCheckChange = (
data: Tree,
checked: boolean,
indeterminate: boolean
) => {
console.log(data, checked, indeterminate)
}
const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
if (node.level === 0) {
return resolve([{ name: '全选' }, { name: '全选' }])
}
if (node.level > 3) return resolve([])
let hasChild = false
if (node.data.name === 'region1') {
hasChild = true
} else if (node.data.name === 'region2') {
hasChild = false
} else {
hasChild = Math.random() > 0.5
}
setTimeout(() => {
let data: Tree[] = []
if (hasChild) {
data = [
{
name: `zone${count++}`,
},
{
name: `zone${count++}`,
},
]
} else {
data = []
}
resolve(data)
}, 500)
}
</script>
<style>
.cl-dialog--large.el-dialog .el-dialog__header {
padding: 16px 32px;
border-bottom: 1px solid #e8eaec;
}
.el-dialog .el-dialog__header {
box-sizing: content-box;
height: 18px;
padding: 24px 32px 14px;
font-size: 18px;
font-weight: 700;
line-height: 18px;
border-bottom: 1px solid #e8eaec;
}
.el-dialog__header {
padding: 20px 20px 10px;
}
.cl-dialog--large.el-dialog .el-dialog__header {
padding: 16px 32px;
border-bottom: 1px solid #e8eaec;
}
.el-dialog .el-dialog__header {
box-sizing: content-box;
height: 18px;
padding: 24px 32px 14px;
font-size: 18px;
font-weight: 700;
line-height: 18px;
border-bottom: 1px solid #e8eaec;
}
.el-dialog__header {
padding: 20px 20px 10px;
}
.mt16 {
margin-top: 16px;
}
.cascader-container.right {
width: 200px;
}
.cascader-container.left {
width: 400px;
margin-right: 16px;
}
.cascader-container {
display: inline-block;
vertical-align: top;
background-color: #fff;
border: 1px solid #dee4f5;
}
.cascader-title {
height: 40px;
padding: 0 12px;
font-size: 14px;
line-height: 40px;
color: #333;
background-color: #fafafa;
border-bottom: 1px solid #dee4f5;
}
.cascader-list {
width: 100%;
height: 236px;
overflow: auto;
font-size: 14px;
}
.tab-label{
display: inline-block;
margin: 10px;
height: 40px;
line-height: 20px;
}
.action{
color:blue;
height: 20px;
border-bottom:1px solid blue
}
.member-parent .member-left {
box-sizing: border-box;
width: 200px;
height: 100%;
padding-top: 8px;
padding-right: 10px;
padding-left: 10px;
overflow: auto;
}
.member-parent .member-right {
flex: 1;
height: 100%;
width: 200px;
padding-top: 8px;
padding-right: 10px;
padding-left: 10px;
overflow: auto;
border-left: 1px solid #dee4f5;
}
.member-parent{
overflow:hidden;
height: 100%;
width: 100%;
}
.member-right-text{
margin-left: 25px;
width: 100px;
float:left;
padding: 15px;
box-sizing: border-box;
overflow: auto;
height: 100%;
}
.cascader-list {
display: flex;
overflow: hidden; /* 隐藏溢出内容 */
}
.member-parent {
display: flex;
width: 100%;
}
.member-left {
flex: 1;
overflow-y: hidden; /* 隐藏左侧元素的垂直滚动条 */
}
.member-right {
margin-left: 10px; /* 调整右侧元素与左侧元素之间的间距 */
}
</style>
