ElementUI+Vue
ElementUI+Vue中常用的一些代码
这个需求做不了
这个作者很懒,什么都没留下…
展开
-
ElementUI自定义el-dialog标题样式
<el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible"> <div slot="title" class="header-title"> <span v-html="dialogFormTitle" style=""></span> </div> </el-dialog>原创 2023-02-24 09:53:14 · 1250 阅读 · 0 评论 -
ElementUI自定义el-dialog关闭按钮
<el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" custom-class="close_class"> </el-dialog> <style lang="less" scoped> /deep/ .close_class { .el-dialog__headerbtn { background: url('图片路径'); background-siz原创 2023-02-24 09:53:59 · 1429 阅读 · 0 评论 -
el-select实现change
HTML代码<el-select v-model="selectType" placeholder="请选择类型" @change="selectChanged"> <el-option v-for="(item, index) in selectTypeList" :key="index" :value="item.value" :label="item.label"></el-option></el-select>JS代码data(){ re原创 2022-12-12 17:05:49 · 7292 阅读 · 0 评论 -
Vue的页面初始化
在使用Vue的过程中,经常需要对一些数据进行初始化,一般是在 created 和 mounted 中进行处理。 created:在html加载完成之前执行,一般用于初始化数据 mounted:在html加载完成之后执行,一般用于向后端发起请求获取到数据以后,对数据进行处理export default { data(){ return { data: [] } }, methods: {原创 2022-11-21 09:10:03 · 5215 阅读 · 0 评论 -
Vue中@click不生效的解决办法
问题产生的原因: 如果是普通的HTML,@click可以触发。 如果是使用ElementUI组件和路由,@click会失效。因为Vue使用的是一套自己的事件传递机制,@click等事件是经过Vue封装的,需要为 @click 添加标识符 .native<el-button type="primary" @click.native="clickFunction()">点击按钮</el-bu原创 2022-11-21 09:09:44 · 5582 阅读 · 0 评论 -
Vue中this.$confirm确定和取消执行不同的逻辑
this.$confirm('请选择处理方式', '提示', { distinguishCancelAndClose: true, //区分取消和关闭 confirmButtonText: '确定', cancelButtonText: '取消', type: 'info'}).then(() => { this.$message({ type: 'info', message: '点击确定执行的代码' });}).catch(action => { this.$mes原创 2022-11-11 17:00:51 · 1689 阅读 · 0 评论 -
Vue中this.$confirm只显示一个按钮,且不能点击空白处关闭
this.$confirm('弹窗文本内容', '提示', { confirmButtonText: '确定', //确认按钮的文字 showCancelButton: false, //是否显示取消按钮 showClose: false, //是否显示关闭按钮 closeOnClickModal: false, //是否可以通过点击空白处关闭弹窗 type: 'info'});原创 2022-11-11 16:58:19 · 4655 阅读 · 0 评论 -
iframe打开base64格式的PDF显示空白
使用iframe打开Base64格式的PDF文件显示空白,src的数据也加载出来了,但就是不显示转换一下思路,如果Base64格式不行的话,把Base64转换成Blob对象,创建一个URL的Blob对象,再将URL赋值给src属性同样可以实现预览previewPdf(fileBase64){ let fileBlob = this.base64ToBlob(fileBase64,'application/pdf'); let href = window.URL.createObjectURL(f原创 2022-11-02 10:15:38 · 4625 阅读 · 1 评论 -
Base64与Blob相互转换
Base64转为Blobbase64ToBlob(fileBase64,fileType){ let raw = window.atob(fileBase64); let rawLength = raw.length; let uint8Array = new Uint8Array(rawLength); while (rawLength--){ uint8Array[rawLength] = raw.charCodeAt(rawLength); } return new Blob([ui原创 2022-11-02 10:15:03 · 620 阅读 · 0 评论 -
预览Base64文件
预览Base64格式的图片previewPicture(fileBase64){ let newWindow = window.open(""); newWindow.document.write("<img src= 'data:image/png;base64, " + fileBase64 + "' />");}预览Base64格式的pdfpreviewPdf(fileBase64){ let newWindow = window.open(""); newWindow.原创 2022-11-02 10:14:40 · 387 阅读 · 0 评论 -
Vue下载文件流
在实现下载功能时,如果后端返回的是文件流的数据,需要前端先转换成Blob对象,再进行下载const requestConfig = { headers: { "responseType": "blob" //将二进制流转换成blob对象 }};const params = new URLSearchParams();params.append("fileName","文件名称");axios.post("/download",params,requestConfig).then(res原创 2022-10-24 17:06:09 · 1601 阅读 · 0 评论