vue+element

weixin_53607765

已于 2023-03-31 17:16:07 修改

阅读量824

点赞数

文章标签： vue.js javascript 前端

于 2023-03-28 09:53:43 首次发布

本文链接：https://blog.csdn.net/weixin_53607765/article/details/129809797

版权

for 循环生成 checkbox

<el-checkbox v-model="checked3" label="备选项1" border size="medium"></el-checkbox>

vue中的数据是异步更新的到dom的，也就是说我们在改变之后数据后，还没有立即更新，使用this.$nextTick 这个方法在下次 DOM 更新后再进行数据的处理

在初始化改变数据checked3

点击无效

改mounted(){ checked3=true }

在一个案例中，data添加新数据可页面没有渲染，不知道为啥错，但将v-for移动到他第一个子元素<el-col>处，就解决了问题

<el-row v-for="item in data">  data添加新数据 可页面没有渲染，不知道为啥错
 <el-col>

  <el-row>
  </el-row>

  <el-row>
  </el-row>

</el-col>
<el-col>

之后改了改监听

change

当绑定值变化时触发的事件

更新后的值

强制刷新 this.$forceUpdate()

2el-form调用resetFields报错Cannot read property ‘indexOf‘ of undefined

原因是 form下面的foritem 必须要加prop 可以为prop=''但不能没有

3.jszip

如何使用JSZip (stuk.github.io)

参考 JS实现单个或多个文件批量下载的方法详解_javascript技巧_脚本之家

<a href={url} download={fileName}>download</a>

function downloadFile(url, fileName) {

const a = document.createElement('a');

a.style.display = 'none';

a.href = url;

a.download = fileName;

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

}

const zip = new JSZip();

zip.file("Hello.txt", file); // 支持纯文本等

zip.file("img1.jpg", file); // 支持Promise类型，需要返回数据类型是 String, Blob, ArrayBuffer, etc

zip.generateAsync({ type: "blob" }).then(blob => {

const url = window.URL.createObjectURL(blob);

downloadFile(url, "test.zip");

});

参考 element-ui 中 table 鼠标悬停背景色修改

.el-table__body tr:hover>td{
    background-color: #c6cfdf!important;
  }
 
.el-table__body tr.current-row>td{
    background-color: #c6cfdf!important;
  }

4 指定容器全屏

 //控制全屏
    enterfullscreen () { //进入全屏
      var docElm = document.getElementById('homeid')  // 指定容器id
      //W3C
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen()
      }
      //FireFox
      else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen()
      }
      //Chrome等
      else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen()
      }
      //IE11
      else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen()
      }
    },
    //退出全屏
    exitfullscreen () {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
    }

全屏后黑屏，可能没有父元素的css,全屏的元素没有背景颜色，指定背景颜色就ok

5 contenteditable 富文本编辑器

参考HTML5 - contenteditable 富文本编辑器_html5富文本编辑器_尘旭员的博客-CSDN博客

vue @blur 事件

<div contenteditable="true" spellcheck="false" class="scriptEditor" @blur="editnameSet(index, $event)"

>
<div class="lineText"><span style="color: green;">;我是注释123456789</span></div>
</div>

// 禁用鼠标右击、F12 来禁止打印和打开调试工具

prohibit () {
        document.oncontextmenu=function(ev){
          return false;    //屏蔽右键菜单
        }
        document.onkeydown = function (e) {
          if (e.ctrlKey && (e.keyCode === 65 || e.keyCode === 67 || e.keyCode === 73 || e.keyCode === 74 || e.keyCode === 80 || e.keyCode === 83 || e.keyCode === 85 || e.keyCode === 86 || e.keyCode === 117)) {
            return false
          }
          if (e.keyCode === 18 || e.keyCode === 123) {
            return false
          }
        }
      }

9 docx-preview

渲染docx报错 docx renderAsync can esModule:false,can`t find end of cantral directory Lis

格式错吧

upload组件 before-upload 自定义传参

:before-upload=" (file) => { return handleBefore(file, '你的参数')}"

handleBefore(file, params) {}

const reader=new FileReader()

文件读取器new FileReader() 对象提供了以下方法来加载文件：

readAsArrayBuffer()：读取指定 Blob 中的内容，完成之后，result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象；
FileReader.readAsBinaryString()：读取指定 Blob 中的内容，完成之后，result 属性中将包含所读取文件的原始二进制数据；
FileReader.readAsDataURL()：读取指定 Blob 中的内容，完成之后，result 属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。
FileReader.readAsText()：读取指定 Blob 中的内容，完成之后，result 属性中将包含一个字符串以表示所读取的文件内容。

可以看到，上面这些方法都接受一个要读取的 blob 对象作为参数，读取完之后会将读取的结果放入对象的 result 属性中。

11 XLSX

// npm install xlsx

import * as XLSX from 'xlsx/xlsx.mjs'

导入

 getXLSX() {
      const xlsx_data = res.data.arrayBuffer() //await
      let tem_workbook = XLSX.read(xlsx_data, { type: "array" }); // 解析数据
      workbook.value = tem_workbook
      this.getTable(tem_workbook.SheetNames[0]); // 读取第一张表数据

    },
    // 解析xlsx数据为table
    getTable(sheetName) {
      let worksheet = workbook.value.Sheets[sheetName];
//XLSX.utils.sheet_to_html(worksheet)
      excelData.value = XLSX.utils.sheet_to_json(worksheet);
    },

XLSX 导出

12 docx

import { renderAsync } from 'docx-preview';

  //解析docx文件https://blog.csdn.net/huangzhixin1996/article/details/126196456
    renderAsyncMe() {
      renderAsync(res.data, document.getElementById("preload_box"), null, {
        className: "docx", // 默认和文档样式类的类名/前缀
        inWrapper: true, // 启用围绕文档内容渲染包装器
        ignoreWidth: false, // 禁止页面渲染宽度
        ignoreHeight: false, // 禁止页面渲染高度
        ignoreFonts: false, // 禁止字体渲染
        breakPages: true, // 在分页符上启用分页
        ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
        experimental: false, //启用实验性功能（制表符停止计算）
        trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
        debug: false, // 启用额外的日志记录
      })

    },