1.用数组的方法遍历对象
使用Object.keys(obj)方式获取由对象属性名组成的数组,然后在用数组的方法遍历
2.下拉框select和option
3.elementui中table组件使用Sortable插件排序
给每一项添加:data-id="person.idCard",
const setSortableList = () => {
const sortableDom = document.querySelector('.sortableList') as HTMLElement | null
if (sortableDom) {
const sortable = new Sortable(sortableDom, {
handle: '.handleSort', // handle's class
animation: 150,
onEnd: (/**Event*/ evt) => {
if (evt.oldIndex !== evt.newIndex) {
let currRow = props.column.find(ele => {
if (ele.type == 'selectPerson' && ele.multiple) {
return ele
}
})
const items = sortable.toArray() // *******获取排序后的data-id的数组列表******
const newArr = items.map(item => {
const sortedObj = currRow?.otherPeople.find(obj => obj.idCard === item)
return sortedObj || null
})
nextTick(() => {
console.log('newArr', newArr)
currRow.otherPeople = newArr // 将数组修改为排序后的顺序
})
}
console.log('evt', evt, 'evt', props.formPara, 'evt', props.column)
}
})
}
}
4.dom元素删除自身所有子节点
1
function deleteChild() {
var e = document.querySelector("ul");
var child = e.lastElementChild;
while (child) {
e.removeChild(child);
child = e.lastElementChild;
}
}
2
function deleteChild() {
var e = document.querySelector("ul");
e.innerHTML = "";
}
5.vue中input框限制输入数字
<el-input v-model="numVal" placeholder="请输入数字(限数字)"
oninput="numVal=numVal.replace(/[^0-9.]/g,'')" />
6.通过css修改.png图片的颜色
1.通过mask属性
box.style.backgroundSize = '100% 100%'
box.style.webkitMaskImage = `url(${ele.compDetail.iconUrl})`
box.style.webkitMaskSize = '100% 100%'
box.style.backgroundColor = 'red'
2.通过filter属性
outerImgBox.left = -width
outerImgBox.style.filter = `drop-shadow(color, opacity, width, 0)`
7.echarts容器大小放生改变时,图表适应容器的变化
mychart.dispose() // 调用echarts实例的dispose方法销毁实例
obj = echarts.init(item) // 调用echarts的init方法,重新初始化
obj.setOption(params, true) // 通过echarts实例的setOption方法设置图表参数
// 通过echarts实例的resize方法改变图标大小
// 这里用定时器的原因是setOption是异步的,需要等到setOption执行完毕后在执行resize方法
setTimeout(() => {
obj.resize({
animation: {
duration: 300 }})
}, 200)
8.以鼠标为中心对元素进行缩放
<div class="container">
<img id="image" alt="">
</div>
<div class="log"></div>
设置图片宽高且居中展示
// 获取dom
const container = document.querySelector('.container');
const image = document.getElementById('image');
const log = document.querySelector('.log');
// 全局变量
let result,
x,
y,
scale = 1,
minScale = 0.5,
maxScale = 4,
isPointerdown = false, // 按下标识
point = { x: 0, y: 0 }, // 第一个点坐标
diff = { x: 0, y: 0 }, // 相对于上一次pointermove移动差值
lastPointermove = { x: 0, y: 0 }; // 用于计算diff
// 图片加载完成后再绑定事件
image.addEventListener('load', function () {
result = getImgSize(image.naturalWidth, image.naturalHeight, window.innerWidth, window.innerHeight);
image.style.width = result.width + 'px';
image.style.height = result.height + 'px';
x = (window.innerWidth - result.width) * 0.5;
y = (window.innerHeight - result.height) * 0.5;
image.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(1)';
// 拖拽查看
drag();
// 滚轮缩放
wheelZoom();
});
image.src = '../images/liya.jpg';
/**
* 获取图片缩放尺寸
* @param {number} naturalWidth
* @param {number} naturalHeight
* @param {number} maxWidth
* @param {number} maxHeight
* @returns
*/
function getImgSize(naturalWidth, naturalHeight, maxWidth, maxHeight) {
const imgRatio = naturalWidth / naturalHeight;
const maxRatio = maxWidth / maxHeight;
let width, height;
// 如果图片实际宽高比例 >= 显示宽高比例
if (imgRatio >= maxRatio) {
if (naturalWidth > maxWidth) {
width = maxWidth;
height = maxWidth / naturalWidth * naturalHeight;
} else {
width = naturalWidth;
height = naturalHeight;
}
} else {
if (naturalHeight > maxHeight) {
width = maxHeight / naturalHeight * naturalWidth;
height = maxHeight;
} else {
width = naturalWidth;
height = naturalHeight;
}
}
return { width: width, height: height }
}
拖拽查看图片逻辑
// 拖拽查看
function drag() {
// 绑定 pointerdown
image.addEventListener('pointerdown', function (e) {
isPointerdown = true;
image.setPointerCapture(e.pointerId);
point = { x: e.clientX, y: e.clientY };
lastPointermove = { x: e.clientX, y: e.clientY };
});
// 绑定 pointermove
image.addEventListener('pointermove', function (e) {
if (isPointerdown) {
const current1 = { x: e.clientX, y: e.clientY };
diff.x = current1.x - lastPointermove.x;
diff.y = current1.y - lastPointermove.y;
lastPointermove = { x: current1.x, y: current1.y };
x += diff.x;
y += diff.y;
image.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(' + scale + ')';
log.innerHTML = `x = ${x.toFixed(0)}<br>y = ${y.toFixed(0)}<br>scale = ${scale.toFixed(5)}`;
}
e.preventDefault();
});
// 绑定 pointerup
image.addEventListener('pointerup', function (e) {
if (isPointerdown) {
isPointerdown = false;
}
});
// 绑定 pointercancel
image.addEventListener('pointercancel', function (e) {
if (isPointerdown) {
isPointerdown = false;
}
});
}
滚轮缩放逻辑
// 滚轮缩放
function wheelZoom() {
container.addEventListener('wheel', function (e) {
let ratio = 1.1;
// 缩小
if (e.deltaY > 0) {
ratio = 1 / 1.1;
}
// 限制缩放倍数
const _scale = scale * ratio;
if (_scale > maxScale) {
ratio = maxScale / scale;
scale = maxScale;
} else if (_scale < minScale) {
ratio = minScale / scale;
scale = minScale;
} else {
scale = _scale;
}
// 目标元素是img说明鼠标在img上，以鼠标位置为缩放中心，否则默认以图片中心点为缩放中心
if (e.target.tagName === 'IMG') {
const origin = {
x: (ratio - 1) * result.width * 0.5,
y: (ratio - 1) * result.height * 0.5
};
// 计算偏移量
x -= (ratio - 1) * (e.clientX - x) - origin.x;
y -= (ratio - 1) * (e.clientY - y) - origin.y;
}
image.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(' + scale + ')';
log.innerHTML = `x = ${x.toFixed(0)}<br>y = ${y.toFixed(0)}<br>scale = ${scale.toFixed(5)}`;
e.preventDefault();
});
}
Demo：jsdemo.codeman.top/html/wheelZ…
如果是容器
9.取消浏览器键盘默认事件
document.body.onkeydown = function (event) {
var e = window.event || event;
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue = false;
}
}
鼠标左击和右击判断
onclick事件无法用e.button判断鼠标左右键。
使用mousedown和mouseup
document.onmouseup = function(e){
if(e.button == 2){
console.log('右键点击了');
}
if(e.button == 1){
console.log('滑轮键点击了');
}
if(e.button == 0){
console.log('左键点击了');
}
}
10.Vue中的静态资源管理（src下的assets和public下的static文件夹的区别）
src下的assets中的静态资源会被webpack解析为模块依赖,会被替换为基于你Webpack输出配置自动生成的 URL.在.vue文件中的template和style中可以通过../xxx这样的相对路径的方式引入,在script中必须通过@import(require)的方式引入
public下的static中的静态资源是不会被webpack处理的,任何在 static/ 中的文件都需要被使用绝对路径 /static/[filename]来引用.通过window.location.orgin的方式可以直接访问到public下的资源,但是会发送请求
11.vue定义全局方法
方法一:使用Vue.prototype
// 在main.js中
Vue.prototype.getToken = function (){
...
}
// 在所有组件中调用
this.getToken();
方法二:使用exports.install+Vue.prototype
// 创建全局方法的js文件
export default {
install(Vue) {
Vue.prototype.getToken = {
...
}
}
}
// 在main.js中引用
import fun from './fun'
Vue.use(fun);
