前端记录-公共方法（二）

林清玉

已于 2024-03-11 11:59:10 修改

阅读量305

点赞数 7

分类专栏：前端记录文章标签：前端 javascript vue.js

于 2024-03-11 11:49:51 首次发布

本文链接：https://blog.csdn.net/weixin_66143279/article/details/136619590

版权

前端记录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了Vue开发中遇到的一些常见问题，如数组操作与数据绑定、组件样式修改、自定义事件命名规则、阻止默认行为、复制到剪贴板、Blob导出文件以及Bootstrap表格筛选和浏览器特定事件处理。

摘要由CSDN通过智能技术生成

1. vue 数组赋值

问题：使用数组直接赋值不会触发数据的双向绑定？

使用filter()，concat()，slice()方法操作数组，不会更新视图；
使用push()，pop()，shift()，unshift()，splice()，sort()，reverse()方法操作数组，会触发视图更新

2. 组件 element选择组件

问题：下拉框样式修改不了?

给标签添加一个属性 :popper-append-to-body=“false” popper-class Select 下拉框的类名

3. vue 自定义事件

提示：this.$emit(“自定义事件”) 不能使用驼峰

4.禁止被鼠标选中

// 绑定事件
onselectstar = “return false”;
// 设置样式
.class{
   User-select:none;
}

5.复制到剪贴板

Var obj = document.getElementById(“”);
obj .select();
Document.execCommand(‘copy’);

6.blob 导出文档

// 获取导出内容，设置文件格式
Let blob = new Blob([内容],{‘type’:’text/xml’})
// 通过a标签导出
If(‘download’ in document.creatElement(‘a’)){
  Const alink = document.createObjectURL(‘a’)
  Alink.href = URL.createObjectURL(blob)
  Alink.setAttribute(‘download’,文件名)
  Alink.click()
  Window.URL.revokeObjectURL(blob)
}else{
  navigator.msSaveBlob(blob,文件名)
}
This.$refs.upload.clearFiles();

7.json字符串转json方法

var obj = eval('(' + str + ')');
var obj = str.parseJSON();
var obj = JSON.parse(str);
 $.parseJSON(jsonStr);
(new Function('return' +str1 ))();

8. switch case break default

switch (表达式)
{
    case 常量表达式1：    语句1
    case 常量表达式2：    语句2
       ┇
    case 常量表达式n：    语句n
    default:        语句n+1
}

9. bootstrap tabble 表格方法查询

$.bootstrap(‘filterBy’,{});

10.浏览器事件

 // 页面刷新
Window.onbeforeunload = function(e){
  e.returnValue = false
  e.preventDefault();
}

// 页面后退
History.pushState('参数对象','名称','url 可选');

// popstate事件
Window.addEventListener(‘popstate’,
  function(){
    History.pushState(null,null,document.URL);
}

// 右键点击事件
Document.oncontextmenu = function(){
  return false;
}