Vue项目中常用的两种页面转换方法

也是在做这个项目其中呢涉及到页面的转换,一共有两种方式其实,第一种就是完成一个el-dialog还有一种就是转换一个页面,原理差不多但是里面还有一些东西值得我们去考虑。

el-dialog的方式

就是通过弹窗的方式,其实就是完成一个弹窗,首先呢,我们需要先引入这个el-dialog组件

import AddOrUpdate from './defect-rectification-notice-addorupdate'

根据具体的路径完成一个组件页面的引入,并且取名叫做AddOrUpdate,然后根据规则定义一个组件,按照驼峰的形式AddOrUpdate 转换成组件的名字

<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

template标签里面添加一个组件
为了是这个页面的组件能够成功显示我们需要使用v-if,如果是v-if的结果是false的话,这个组件就不会显示,当然为了实现这个功能,我们需要先给定一个默认值,

addOrUpdateVisible: false,

然后我们完成触发的方法,

<el-button type="primary" @click="addOrUpdateHandle()" size="small">新建</el-button>

完成新建的按钮

addOrUpdateHandle(id) {
				this.addOrUpdateVisible = true
				this.$nextTick(() => {
					this.$refs.addOrUpdate.init(id)
				})
			},

因为是dialog所以可以直接在原有的页面进行操作,显示dialog的时候直接将dialog的v-if设置为true即可。
this.$nextTick(()这是Vue生命周期中的钩子函数的其中之一,在显示的时候加以操作,然后就是this.$refs.addOrUpdate.init(id)使用this.$refs.组件名.组件方法(参数),组件名称是在设定的时候通过ref="addOrUpdate"设定组件的名称变成refs的直接使用。

然后我们在组件里面,组件中的主体是在<el-dialog :visible.sync="dialogFormVisible" :title="title">里面的,通过:visible.sync="dialogFormVisible"绑定一个boolean值来完成对于dialog的显示,然后:title="title"完成对于弹窗的题目的设定,在我的设计中新增和修改是一个页面所有这里的题目并没有写死,通过是否能够获得显示的实体类的id是否为空来进行判定。
然后展示init方法

init(ids) {
				this.dialogFormVisible = true;
				this.getProductionPlanList()
				this.getSysDeptList()
				this.getConstructionUnitList()
				this.getSysRoleList()
				this.$nextTick(() => {
					 this.$refs['dataForm'].resetFields()
					if (ids == undefined || ids === undefined || ids == null) {
							this.title='新增'
					} else {
						this.getInfo(ids)
						this.title='修改'
					}
				})
			},

所有的v-if想要产生效果都需要设定默认值才能够使用
在这里具体逻辑就是this.dialogFormVisible = true;显示dialog,然后就是this.getProductionPlanList()完成下拉菜单的信息,下面的那些List也是一样的,然后就是判断是否有主键被传回来,有的话就去使用getinfo方法将对象显示出来,如果没有就直接显示表单。
如果想要是dialog消失,可以写一个按钮是dialogFormVisible=false,

<el-button size="mini" @click="dialogFormVisible = false">取消</el-button>

然后我们来看一个小细节

  • 我们完成数据的新增如何返回原来页面,也就是在dialog里面完成了数据的新增或者其他操作,如何使页面返回并且显示我们新增或者的其他的数据。
this.dialogFormVisible = false;
this.$emit('refreshDataList')

这就是我们完成数据库的新增以后的操作,将dialog显示为false,使用this.$emit('refreshDataList')返回之前的页面,我们之前在父组件中也定义了这个@refreshDataList="getDataList",返回以后再去执行查询操作,这样就完成了一个父页面点击新增实现跳转到子页面,子页面完成数据提交之后,在跳转回父页面并且完成父页面的刷新的方法。

页面转换的方式

 <div class="mod-demo__correction}"v-show="!addOrUpdateVisible">

首先完成一个v-show的显示操作,设定上一个属性
注意一定要有默认值在data里面

<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

这就是组件,具体的如何引入组件在文章的上面有我就不粘贴重复的代码了

addOrUpdateHandle(id) {
				this.addOrUpdateVisible = true
				this.$nextTick(() => {
					this.$refs.addOrUpdate.init(id)
				})
			},

以上都是在父页面里面的代码几乎都出现过
然后在子组件中完成取消的方法

			cancel() {
				this.$nextTick(() => {
					this.$emit("refreshDataList", false);
				})
			},

主要是this.$emit("refreshDataList", false);通过传递false来完成一个子组件中的属性的转换成false
这就是两种页面跳转的两种方式。

  • 19
    点赞
  • 44
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
实现页面转换成 PDF 并导出的最好方案,主要有两种方法:前端实现和后端实现。 前端实现: 在前端实现页面转换成 PDF 并导出,可以使用 jsPDF 和 html2canvas 库。jsPDF 是一个用于生成 PDF 文件的 JavaScript 库,而 html2canvas 是一个用于将 HTML 元素转换为 Canvas 的 JavaScript 库。 以下是一个简单的例子,展示如何在 Vue 使用 jsPDF 和 html2canvas 实现页面转换成 PDF 并导出: 1. 安装 jsPDF 和 html2canvas 库: ```bash npm install jspdf html2canvas --save ``` 2. 在 Vue 组件引入 jsPDF 和 html2canvas 库: ```javascript import jsPDF from 'jspdf' import html2canvas from 'html2canvas' ``` 3. 在 Vue 组件定义导出 PDF 的方法: ```javascript export default { methods: { exportPDF() { // 获取需要导出的元素 let element = document.getElementById('pdf-content') // 将元素转换为 Canvas html2canvas(element).then(canvas => { // 获取 Canvas 图片数据 let imgData = canvas.toDataURL('image/png') // 计算 PDF 页面大小 let pageWidth = 210 let pageHeight = canvas.height * pageWidth / canvas.width // 创建 PDF 对象 let pdf = new jsPDF('p', 'mm', 'a4') // 添加 PDF 页面 pdf.addImage(imgData, 'PNG', 0, 0, pageWidth, pageHeight) // 导出 PDF 文件 pdf.save('export.pdf') }) } } } ``` 在以上代码,`exportPDF` 方法用于导出 PDF 文件。首先,通过 `document.getElementById` 获取需要导出的元素,这里假设元素的 ID 为 `pdf-content`。然后,使用 `html2canvas` 将元素转换为 Canvas,再通过 Canvas 的 `toDataURL` 方法获取图片数据。接着,计算 PDF 页面大小,创建 jsPDF 对象,并将图片添加到 PDF 。最后,使用 `pdf.save` 方法导出 PDF 文件。 后端实现: 在后端实现页面转换成 PDF 并导出,可以使用一些开源的 PDF 库,比如 wkhtmltopdf、WeasyPrint、PDFKit 等。 其,wkhtmltopdf 是一个开源的 HTML 到 PDF 转换器,可以在 Linux、Windows 和 macOS 等操作系统上使用。WeasyPrint 是一个开源的 HTML 和 CSS 到 PDF 转换器,支持 Linux、macOS 和 Windows 等操作系统。PDFKit 是一个 Node.js 库,可以用于生成 PDF 文件。 以下是一个简单的例子,展示如何在 Vue 使用 wkhtmltopdf 实现页面转换成 PDF 并导出: 1. 安装 wkhtmltopdf: ```bash sudo apt-get install wkhtmltopdf ``` 2. 在 Vue 组件定义导出 PDF 的方法: ```javascript export default { methods: { exportPDF() { // 计算 PDF 文件名 let filename = 'export.pdf' // 获取当前页面 URL let url = window.location.href // 发送 GET 请求,生成 PDF 文件 axios.get(`/api/pdf?url=${encodeURIComponent(url)}&filename=${encodeURIComponent(filename)}`, { responseType: 'blob' }).then(response => { // 创建 blob 对象 let blob = new Blob([response.data], { type: 'application/pdf' }) // 创建下载链接 let link = document.createElement('a') link.href = URL.createObjectURL(blob) link.download = filename // 触发下载 link.click() }) } } } ``` 在以上代码,`exportPDF` 方法用于导出 PDF 文件。首先,计算 PDF 文件名,这里假设文件名为 `export.pdf`。然后,获取当前页面 URL,将 URL 和文件名作为参数,发送 GET 请求到后端 API,生成 PDF 文件。最后,将返回的二进制数据转换为 blob 对象,创建下载链接,并触发下载。 你可以根据需要选择前端实现或后端实现,以满足你的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

又是重名了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值