vue按钮弹框

于 2024-08-29 10:04:34 发布
阅读量144 收藏
点赞数 3
分类专栏： vue案例 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78133614/article/details/141671286
版权

 在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>

软件技术NINI
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端Vue自定义弹框、自定义弹框内容 alertView showModel popup 组件
chenchuang0128的博客
07-19 2159
随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。今天给大家介绍的一款组件:快速实现前端Vue自定义弹框、自定义设置弹框内容alertView popup组件， 附完整源码下载地址：https://ext.dcloud.net.cn/plugin?id=12491。
vue之弹框
ramsey17的博客
06-27 2717
弹框的“新增/修改角色”标题根据states的值来控制，编辑时，“人员名称”处于禁用状态；由于弹框的参数满足不了（少）接口的参数，通过@change="pickDepartment2"事件来操作数据；列表中的操作栏：通过slot-scope="scope"来接收作用域插槽的数据（添加属性slot-scope，并且定义对象scope），scope.row拿到对应行的数据；实现如下需求，点击新增或者行中的编辑按钮，弹出弹框编辑数据。methods：接口的字段定义不规范，作了个兼容😔。省略其它代码......
vue2 点击按钮弹框
weixin_65201086的博客
07-25 562
el-dialog title="个人信息修改" class="diglog" :close-on-click-modal="false" :visible.sync="open" width="30%"<el-input v-model="input" placeholder="请输入姓名" class="input"></el-input><el-form-item class="span" label="输入姓名" prop="name"><el-button>取消</el-button>
vue输入框弹框使用
qq_37570710的博客
05-07 3346
this.$prompt 带有输入框的弹框。$confirm 不带输入框弹框。
VUE 弹框的实现
CC酱写前端的博客
04-22 477
AnBanDialog.vue（项目上封装好的弹框，主要是样式问题）项目中常用且比较基础的功能。
Vue实现侧边弹框
StevenYanghahha的博客
06-14 1168
【代码】Vue实现侧边弹框。
Vue 可自定义弹框组件实现
PorkCanteen的博客
12-21 2983
组件特点 1. 可自定义弹框内容、大小、按钮类型、主题颜色、过渡效果等 2. 可通过插槽自定义弹框主体内容
vue 每次弹框都初始化
zhangsir的博客
11-03 9118
之前弹框都是下图这种： 通过detailOpen变量控制是否显示弹框 但这种最近在整合tinymce富文本编辑器的时候，发现第二次弹框数据没有回填 原因是因为第一次弹框关闭后，没有初始化，从而影响了后面的弹框功能。 修改成下图就好了： ...
vue实现按钮弹框【弹出图片、视频、表格、表单等】
热门推荐
在写作的路上持续输出。
04-14 1万+
vue实现弹框【弹视频、图片、表单、表格等】总之，你想弹啥就弹啥。一💫
vue移动端弹框组件的实例
10-17
本文将深入讲解一个基于 Vue 的移动端弹框组件——vue-layer-mobile，帮助开发者更好地理解和使用这个组件。 vue-layer-mobile 是一个模仿 layer-mobile 的 Vue 组件，提供了丰富的弹框样式和功能，简化了移动端...
vue多种弹框的弹出形式的示例代码
12-08
在Vue中，实现弹框效果通常借助于第三方库，如Element UI。Element UI 提供了一个叫做`el-dialog`的组件，用于创建对话框或弹框，它提供了丰富的配置和交互方式。 在标题提到的示例中，我们看到Vue应用中有多种弹框...
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
12-29
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展。 v-if 是直接删除dom节点, 就是这个div就不存在了 v-show 是控制dom的...
基于uniapp/vue的弹框组件
11-26
在本文中，我们将深入探讨一个基于uni-app和vue的弹框组件，这正是利用了这两种技术的组件化特性。uni-app是一个多端开发框架，它可以将同一份代码编译到iOS、Android、H5、小程序等多个平台，而vue则是一种轻量级的...
vue export的用法
weixin_41203765的博客
08-23 577
在Vue.js中，export关键字主要用于模块化编程，它允许你将一个文件（模块）中的代码、组件、函数、变量等导出，以便在其他文件中通过import语句来使用。这在Vue项目中非常常见，特别是当你需要重用组件、工具函数或配置时。
vue3插件原理
m0_46281382的博客
08-26 725
简述vue3中use方法加载第三方插件原理
knowLedge-无关系组件间方法的调用(创建新的 Vue 实例来作为事件总线（Event Bus）方法实现)
2301_76671906的博客
08-23 555
无关系组件间方法的调用(创建新的 Vue 实例来作为事件总线（Event Bus）方法实现)
如何使用Vue 3和Type Script进行组件化设计
最新发布
yang295242361的博客
08-27 563
在Vue 3中，Composition API 是一种全新的逻辑复用和代码组织方式，它允许你将组件的逻辑（如响应式状态、计算属性、方法、生命周期钩子等）封装到单独的函数中，从而提高了代码的可复用性和可维护性。以下是如何在Vue 3中使用Composition API的基本步骤。
移动端签名
notagoodwriter的博客
08-23 635
【代码】移动端签名。
vue全局弹框js控制
09-09
### 回答1： 要在Vue应用程序中实现全局弹框的控制，你可以使用Vue.js提供的全局事件总线（Event Bus）机制。 以下是一个简单的实现： 1.在Vue实例中创建一个事件总线： ``` // main.js import Vue from 'vue' export const EventBus = new Vue() ``` 2.在需要弹出框的组件中，通过事件总线触发一个事件： ``` // MyComponent.vue import { EventBus } from '@/main' methods: { showModal () { EventBus.$emit('show-modal') } } ``` 3.在包含弹出框的组件中，监听事件并控制弹出框的显示与隐藏： ``` // ModalComponent.vue import { EventBus } from '@/main' data () { return { showModal: false } }, created () { EventBus.$on('show-modal', () => { this.showModal = true }) }, methods: { closeModal () { this.showModal = false } } ``` 通过这种方式，你可以在任何组件中触发事件并控制全局弹出框的显示与隐藏。当然，你也可以通过传递参数来实现更复杂的逻辑。 ### 回答2： Vue全局弹框JS控制主要包括以下几个步骤： 第一步，导入Vue和第三方弹框插件，可以使用import语句导入。 第二步，创建一个Vue实例，用于管理全局弹框相关的数据和方法。 第三步，定义全局弹框的属性和方法，如弹框的显示状态、标题、内容、确认按钮、取消按钮等。 第四步，将全局弹框挂载到Vue实例上，并使用Vue的插件机制将该实例注册为全局组件。 第五步，使用组件的方式来调用全局弹框，可以直接在Vue实例中使用该组件，或者通过事件触发、计算属性、方法等方式来控制弹框的显示和隐藏。 第六步，根据实际需求，可以在全局弹框中添加一些自定义配置项，如弹框的宽度、高度、位置等。 第七步，封装全局弹框的方法，使其支持链式调用，方便在代码中使用。 第八步，对全局弹框的样式进行自定义，可以通过CSS样式文件或者内联样式灵活地修改弹框的样式。 总而言之，通过上述步骤，我们可以在Vue中实现全局弹框的JS控制，方便在整个项目中管理和调用弹框组件，提高开发效率和代码复用性。 ### 回答3： Vue全局弹框JS控制是通过Vue.js的全局对象$emit和$on来实现的。为了实现统一的弹框控制，可以借助Vue的事件总线机制。 首先，在main.js中创建一个Vue实例，作为事件总线： ``` import Vue from 'vue' export const EventBus = new Vue() Vue.prototype.$bus = EventBus ``` 然后，在需要弹框的组件中，可以通过以下方式触发一个全局事件： ``` this.$bus.$emit('show-dialog', dialogData) ``` 其中，'show-dialog'是自定义的事件名称，dialogData是传递给弹框的数据。 接着，在根组件或全局组件中监听该事件，并根据需求进行处理。可以通过以下方式在组件中监听事件： ``` this.$bus.$on('show-dialog', (dialogData) => { // 处理弹框逻辑，比如弹出一个全局弹框组件，并将dialogData传递给它 }) ``` 在监听到事件后，在组件中进行相应的处理，比如将dialogData传递给全局弹框组件，并弹出。 通过以上步骤，就可以实现Vue全局弹框的控制了。无论在哪个组件中需要弹框，只需要触发全局事件，然后在根组件或全局组件中进行监听和处理，实现了弹框的统一控制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值