文章目录
- 前言
- 知识点
-
- 1.修改百度地图覆盖物层级
- 2.修改vue-seamless-scroll的点击事件加不上
- 3.Vue根文件(html)的title取值
- 4.Vue组件封装经常用的.sync
- 5.vue中跳转新页面
- 6.监听$route
- 7.Input上传文本(兼容）
- 8.表单内input上传，校验不自己变化
- 9.input光标自动聚焦
- 10.input框clear后，自动聚焦
- 11.表单内input的规则
- 12.input内容去除前后中间空格
- 13.ui组件的form表单进入退出验证和内容置空
- 14.滚轮事件
- 15.table中保存空格
- 16.年月日-时间补零
- 17.运算符
- 18.图片src成功失败加载
- 19.图片src懒加载
- 20.下载文件
- 21.销毁事件(不用钩子函数）
- 22.class和style的书写方式
- 23.render
- 24.初始化、清空、重置input和table等
- 25.双滚动条（一个滚动到底，继续滚动，大的不滚动）
前言
- 由于本人用Vue开发，所以js和vue就不细化了，本文主要是工作中或平时遇到的一些JS相关问题&&VUE相关问题。
- 末尾会贴前端业内有交流氛围好的微信群的二维码，互相进步。
知识点
1.修改百度地图覆盖物层级
修改百度地图的标点的层级
// 修改小黄点的默认z-index
window.map.getPanes().labelPane.style["z-index"] = 350;
2.修改vue-seamless-scroll的点击事件加不上
- 用插件vue-seamless-scroll
- 解决：冒泡点击
- 父亲ul加点击事件 儿子绑定个 li :index=“idx” ， li里面的儿子给css的不可选中
let index=Number(event.target.getAttribute("index"))
let item = this.boxListData[index];
.item-container {
display: flex;
padding: 8px 16px 8px 0;
height: 50px;
box-sizing: border-box;
div,
img {
pointer-events: none; // 让鼠标事件失效（链接、点击等事件）
CSS 属性指定在什么情况下 ， 某个特定的图形元素是否可以成为鼠标事件的 target。
}
}
_______________________________________________
bubblingClick(event) {
let index = Number(event.target.getAttribute("index"));
let item = this.boxListData[index];
// console.log(item,"冒泡点击");
if (this.type === "person") {
if (!item.per_id)
return this.$message({
type: "warning",
message: "暂无人员数据"
});
sessionStorage.setItem("from", "一r一d");
sessionStorage.setItem("type", "1");
this.$router.push({
name: "person-detail",
query: { id: item.per_id, len: 1 }
});
} else {
this.$router.push({
name: "car-info",
params: { id: item.per_id }
});
sessionStorage.setItem("from", "一r一d");
sessionStorage.setItem("type", "1");
}
},
3.Vue根文件(html)的title取值
<%= VUE_APP_PROJECT_TITLE%>
4.Vue组件封装经常用的.sync
5.vue中跳转新页面
// let newpage = this.$router.resolve({
// path: "/group-chat",
// query: {
// idMessage: JSON.stringify(val)
// }
// });
// window.open(newpage.href, "_blank");
6.监听$route
- 有时候，我们需要根据路由的跳转来做一些事情，比如：封装面包屑，又或者导航菜单的刷新状态不变
watch: {
$route(a) {
console.log(a);
}
}
7.Input上传文本(兼容）
- Input.files[0].text IE没有text方法
//上传
upload() {
let Input = document.createElement("input");
Input.type = "file";
Input.accept = ".txt";
Input.addEventListener("change", async e => {
if(Input.files[0]?.text){
// 1 谷歌
const text = await Input.files[0].text();
this.params.paramValue = text;
this.fileType = 1;
Input = null;
}else{
// 兼容IE
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = event=>{
// 文件里的文本会在这里被打印出来
// console.log(event.target.result);
// console.log(reader.result);
this.params.paramValue =event.target.result;
this.fileType = 1;
Input = null;
};
reader.readAsText(file,'UTF-8');
}
});
Input.click();
},
8.表单内input上传，校验不自己变化
//上传
upload() {
let Input = document.createElement("input");
Input.type = "file";
Input.accept = ".xls";
Input.addEventListener("change", e => {
this.formValidate.file = Input.files[0];
const extension = this.formValidate.file.name.substring(this.formValidate.file.name.lastIndexOf('.')+1);
if ("xls" !== extension && "xlsx" !== extension) {
this.$Message.error("选择Excel格式的文件导入！");
this.formValidate.file = "";
}
Input = null;
});
Input.click();
},
自定义校验 -> 手动执行校验就好了-》事件
9.input光标自动聚焦
- 当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
如果想注册局部指令，组件中也接受一个 directives 的选项：
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
然后你可以在模板中任何元素上使用新的 v-focus property，如下：
<input v-focus>
- 弹窗类里的 input 也可以 这样 ， 一般采用指令
<Input
ref="inputOne"
v-model.trim="formValidate.name"
v-mark-input-clear-focus
placeholder="请输入任务名"
:maxlength="30"
clearable
/>
watch: {
show(){
this.$nextTick(()=>{
this.$refs.inputOne.focus();
});
}
},
10.input框clear后，自动聚焦
- input必须有 @on-clear 方法
<Input v-mark-input-clear-focus clearable />
export const MarkInputClearFocus = {
bind(el, binding, vnode) { // 1-被绑定
vnode.componentInstance.$on('on-clear', () => {
vnode.componentInstance.focus();
});
}
};
11.表单内input的规则
ruleValidate: {
file: [
{
required: true,
validator: (rule, value, callback) => {
if (!value) {
callback(new Error("请导入文件"));
} else {
callback();
}
},
trigger: "change"
}
],
12.input内容去除前后中间空格
// 去除input的空格
this.params.paramValue=this.params.paramValue.replace(/\s*/g,"");
13.ui组件的form表单进入退出验证和内容置空
resetFields 对整个表单进行重置，将所有字段值重置为空并移除校验结果
this.$refs.formValidate.resetFields();
<Form ref="formValidate"
:model="formValidate"
14.滚轮事件
// 滚轮
scrollFunc(e) {
e = e || window.event;
console.dir(e);
if (e.wheelDelta) {
//判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) {
//当滑轮向上滚动时
// alert("上滚");
}
if (e.wheelDelta < 0) {
//当滑轮向下滚动时
// alert("下滚");
}
} else if (e.detail) {
//Firefox滑轮事件
if (e.detail > 0) {
//当滑轮向下滚动时
// alert("下滚");
}
if (e.detail < 0) {
//当滑轮向上滚动时
// alert("上滚");
}
}
},
/*注册事件*/
/*IE、Opera注册事件*/
if (document.attachEvent) {
outer1.attachEvent("onmousewheel", self.scrollFunc);
}
//Firefox使用addEventListener添加滚轮事件
if (document.addEventListener) {
//firefox
outer1.addEventListener(
"DOMMouseScroll",
self.scrollFunc,
false
);
}
//Safari与Chrome属于同一类型
outer1.onmousewheel = self.scrollFunc;
console.dir(outer1);
15.table中保存空格
// table 空格
// /deep/ .ivu-table-row {
// & > td:nth-child(4) {
// span {
// white-space: pre-wrap;//保留空白符序列，但是正常地进行换行。
// }
// }
// }
16.年月日-时间补零
- 大多数公司，都会有自己封装的utils，也可以采用moment.js或者day.js，处理日期
// 现在现在年月日时间补零
const dateTransform = date => {
const tmp = date.split('\/');
if(tmp.length === 1){
return date;
}
if (tmp[1].length !== 2) {
tmp[1] = '0' + tmp[1];
}
if (tmp[2].length !== 2) {
tmp[2] = '0' + tmp[2];
}
return tmp.join('-');
};
let taskStartTimeStr= dateTransform(new Date().toLocaleDateString())||[];
17.运算符
从ES7开始，我们可以使用幂运算符 ** 作为求幂的简写，相对之前的Math.pow(2, 3) 更加快捷。
- ?. 和 ?? 都可以了解下 > > JS中常用的运算符
18.图片src成功失败加载
- 我代码截取的部分，所处环境没有介绍，下面会讲懒加载
// 取得img标签中的src对应的链接 let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; const img=new Image(); img.src=res?.obj.match(srcReg)[1]; return new Promise((resolve)=>{ img.onload=()=>{ return resolve(res?.obj.match(srcReg)[1]); }; img.onerror=()=>{ return resolve(require('@/assets/images/data-query/icon_defeated.png')); }; });
19.图片src懒加载
- 指令版
图片预加载，src配置
<img v-mark-img-pre-load="historyItem.imgUrl" src="../../icon-default.png" alt="">
//historyItem.imgUrl 真实路径的src地址
//src="../../icon-default.png" 根据需求赋值对应的加载失败的图片
export const MarkImgPreLoad = {
bind: function (el, binding, vnode) {
if (binding.value) {
const img = new Image();
img.src = binding.value || '';
// 图片成功加载后，改变src值
img.onload = () => {
el.src = binding.value;
};
}
}
};
- 非指令版
自己改改，或者去百度吧，Hhhh,或者参考上面-> 18.图片src成功失败加载
20.下载文件
- 一般项目都会有下载excel等需求
- 下载存放在后台的文件
import { baseURL } from 'mn-common/lib/config' export const downloadCleanModelFile = `${baseURL}/${prefix}/downloadCleanModelFile.do?fileType=` // window.open(ApiCleaningModelManagement.downloadCleanModelFile + tag, '_blank') let elLink = document.createElement('a') elLink.href = ApiCleaningModelManagement.downloadCleanModelFile + tag elLink.download = '' elLink.click() elLink = null - 下载存放在前端的文件
- 把需要下载的excel，放到vue项目的public文件夹下新创建的文件夹，记得excel文件名要英文
- 把需要下载的excel，放到vue项目的public文件夹下新创建的文件夹，记得excel文件名要英文
download(tag) {
let url = null
if (tag === '1') {
url = '/data/gdpysgx.xlsx'
} else if (tag === '2') {
url = '/data/gpzywys.xlsx'
}
let elLink = document.createElement('a')
elLink.href = url
//可以把下载时文件的名字，改成中文
if (tag === '1') {
elLink.download = 'xxxx关系.xlsx'
} else if (tag === '2') {
elLink.download = 'xxxx映射.xlsx'
}
elLink.click()
elLink = null
},
21.销毁事件(不用钩子函数）
// 销毁前执行
this.$on("hook:beforeDestroy",()=>{
boxOffset.removeEventListener("scroll", this.handleScroll);
});
22.class和style的书写方式
class
数组语法：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
在数组语法中也可以使用对象语法：
<div v-bind:class="[{ activeClass: isActive }, errorClass]"></div>
style
对象语法：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
数组语法：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
23.render
- 字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
- 如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。
- 渲染函数 & JSX
//params.row, params.index
{
title: "操作",
align: "center",
render: (h, params) => {
return h(
"span",
{
style: {
cursor: !params.row.opId
? "no-drop"
: "pointer"
}
},
[
h(
"span",
{
style: {
"white-space": "nowrap",
color: "rgb(45, 140, 240)",
"pointer-events": !params.row.opId
? "none"
: "",
"text-decoration": "underline"
},
on: {
click: e => {
this.operation(params.row);
}
}
},
"提取"
)
]
);
}
}
JSX
{
title: "操作",
width: 100,
type: true,
align: "center",
render: (h, {
row }) => {
let number;
let value;
if (row.submitStatus) {
number = +row.submitStatus;
value =
number === 0
? "未提交"
: number === 1
? "已提交"
: number === -1
? "提交失败"
: "-";
} else {
number = 0;
value = "提交";
}
console.log(number);
return (
<div style="white-space: nowrap;">
{
this.tabType === 1 && (
<span
class={
{
"ly-btn-group-inline__item ly-color-link-fff": true,
historical: number !== 0
}}
style="margin-right:16px"
>
<span
class={
{
disabled: number !== 0 }}
onClick={
() =>
this.submit(row, number)
}
>
{
value}
</span>
</span>
)}
<Poptip
confirm
width="200"
popper-class="keyword-mgt-poptip"
placement="bottom"
title="确定删除该数据吗？"
on-on-ok={
() => this.del(row)}
>
<span class="ly-btn-group-inline__item ly-color-link-gray">
删除
</span>
</Poptip>
</div>
);
}
}
24.初始化、清空、重置input和table等
- 把上面参数放在一个对象里
- vm.$options 用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处：
params: {
bgwjStart: '',
bgjEnd: '',
brId: '',
cyjlx: '',
bjxx: '',
pageNum: 1,
pageSize: 30,
},
//清空,重置
handleClear() {
this.params = this.$options.data().params
},
25.双滚动条（一个滚动到底，继续滚动，大的不滚动）
- 在这个框中滚动到底，继续滚动。页面的滚动条也不会继续滚动
- 利用滚动到底，禁止滚动事件滚动
- 长dom的高 - 有滚动条dom的高 - 滚动条上偏移量 <=0 证明到底
- 利用滚动到头，禁止滚动事件滚动
- 有滚动条的dom的滚动条上偏移量< =0 证明到头
let boxUl = document.querySelector(".ul");//有滚动条的dom
let box = document.querySelector("ul");//有滚动条里面的长dom
box.onmousewheel = (e) => {
const offsetHeight = box.offsetHeight;
const scrollTopUl = boxUl.scrollTop;
const offsetHeightUl = boxUl.offsetHeight;
const number = offsetHeight - offsetHeightUl - scrollTopUl;
e = e || window.event;
if (e.wheelDelta) {
//判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0 && scrollTopUl > 0) {
//当滑轮向上滚动时
console.log("上滚");
// alert("上滚");
return true
}
if (e.wheelDelta < 0 && number > 0) {
//当滑轮向下滚动时
// alert("下滚");
return true
}
} else if (e.detail) {
//Firefox滑轮事件
if (e.detail > 0 && number > 0) {
//当滑轮向下滚动时
// alert("下滚");
return true
}
if (e.detail < 0 && scrollTopUl > 0) {
//当滑轮向上滚动时
// alert("上滚");
return true
}
}
return false
}