第一次使用vue3和工作中遇到的一些小问题总结

实用的小方法

css切换 第几个相同类型元素的样式

p:nth-child(2) { color: blue; }

p:nth-of-type(2) { color: blue; }

关于删除数组指定元素

this.chooseIdList.splice(this.chooseIdList.findIndex(item => item === id),1);

[].slice.call

查找数组中最大项

Math.max.apply(
Math,
widthList.map((item: any) => {
return item.uploadData?.frame?.width;
})
);

Computed 虽然是一个 function，但是它可以通过 get 和 set 修改 v-model 绑定它

Props 是不是响应式的 Vue2 和 3 的区别

找出数组中相同的元素

getArrEqual(arr1, arr2) {
let newArr = [];
for (let i = 0; i < arr2.length; i++) {
for (let j = 0; j < arr1.length; j++) {
if(arr1[j] === arr2[i]){
newArr.push(arr1[j]);
}
}
}
return newArr;
},

把对象转为数组

valArr22 = Object.keys(obj).map(function(i){return obj[i]});//[“I am 1”, “I am 2”]

关于配置环境变量

cli3 就是.env.dev .env.prod 在 package.json 中加入–mode -dev 或者 -prod 来识别 用 process.env.名字来取值，全局变量名称 以 VUEAPP开头

Cli4 及以上用 .env.development 和.env.production 选 text 格式的
package.json 中不需要配置 baseURL 直接取值就行

computed 可以有入参

computed:{
getFirstName(){
return firstName => {
console.log(firstName)
return firstName
}
},
getAllName(){
return (firstName, lastName)=> {
console.log(firstName, lastName)
return ${firstName}${lastName}
}
}
}

obj 取值

obj.val val 是 key 名称
obj[val] val 可以是字符串

?? 空值合并运算符

https://www.jianshu.com/p/f522f0969956

vue3 的 computed 和 watch

原来值:{{ count }}

计算属性更改的值:{{ twoNumber }}

//引用ref函数 可以实时更新数据 import { defineComponent, reactive , computed,toRefs,watch} from "vue"; export default defineComponent({ name: "HelloWorld", setup() { const state: any = reactive({ count: 1, twoNumber: computed(() => state.count*2) });

//暴露出去给外界使用
//使用toRefs解构响应式对象数据，实现实时更新
return {
  ...toRefs(state),
};

},

关于 KeepAlive

关于 elemnent ui plus 按需引入样式的写法

import ‘element-plus/es/components/switch/style/css’

修改 element 的默认 class

.el-switch {
:deep(.el-switchcore) {
width: 25px !important;
height: 15px;
.el-switchaction {
width: 13px;
height: 13px;
left: 10px;
top: -0.5px;
}
}
}
.is-checked {
:deep(.el-switchcore) {
.el-switchaction {
left: 17px;
}
}
}
}

关于 vue3 的 input 聚焦

用ref 找到标签
<input
type=“text”
class=“changeValInput”
ref=“input”
v-show=“showChangeValInput === index”
v-model=“classname”
@blur=“cancelInput”
/>
input.value.focus();

关于原生事件

// document.getElementsByClassName(‘matchBox’)[0].addEventListener(
// ‘mouseover’,
// function (e) {
// console.log(‘ydeyrue’);
// state.mouseoverBox = true;
// const aaa = document.getElementById(‘app’)?.style.cursor;
// console.log(aaa, ‘aaa’);
// },
// false
// );

vue3 的 watch

// let isdragEnd = computed(() => {
// return store.state.physicsChooseList;
// });
// watch(isdragEnd, (newVal) => {
// state.isDrag = true;
// });

      <div
        class="col5"
        v-show="hoverSelectIndex === index"
        @mouseleave="hoverSelectIndex = -1"
      >

fill()用法 注意，必须初始数组长度大于你要添加的长度

// 当传入三个参数的时候，第一个参数为填充的元素，第二个参数和第三个参数分别指填充元素的起始和终止位置，不修改终止位置元素
var arr4 = [0, 1, 2, 3, 4, 5]
console.log(arr4.fill(1, 3, 5)); //[0,1,2,1,1,5]
var width = docEl.getBoundingClientRect().width;

禁止浏览器选中事件

onselectstart=“return false”

关于做一个四个按钮切换激活非激活状态

function chooseDir(val: string) {
let newVal = ‘’;
if (val.slice(-6) === ‘Active’) {
newVal = val.slice(0, -6);
} else {
newVal = val + ‘Active’;
}
directionList.value.splice(
directionList.value.findIndex((item) => item === val),
1,
newVal
);

用循环也可以动态控制 class 名

方案一：使用 数组的 push 方法：


let list = reactive([])
let arr = [1, 2, 3]
arr.forEach((item) => {
list.push(item)
})

或

let list = reactive([])
let arr = [1, 2, 3]
list.push(…arr)


方案二：创建一个响应式对象，对象的属性是数组

let state = reactive({
list: [],
})
let arr = [1,2,3]
state.list = arr
推荐使用该方法。
方案三：使用 ref 函数
const arr = ref([])
arr.value = [1, 2, 3]

下载 zip 包

import axios from ‘axios’
export default{
methods: {
downloadZip (downloadName， downloadPath) {
axios.get(‘/downloadZip’, { downloadPath: downloadPath }).then((res) => {
if (res.status === 200){
const blob = new Blob([res.data], { type: ‘application/zip’})
if (‘download’ in document.createElement(‘a’)){
const url = window.URL.createObjectURL(blob)
const link = document.createElement(‘a’)
link.href = url
link.download = downloadName
link.click()
// 释放内存
URL.revokeObjectURL(url)
} else {
// ie10下载
navigator.msSaveOrOpenBlob(blob, downloadName)
}
}
})
},
}
}