2023年6月6日：
- 图片预览插件，快速时间图片预览功能
viewerjs - 自定义右键菜单
vue-contextmenujs
2023年6月4日：
一个卡了一段时间的问题，antd 的select 组件 option 显示label的问题
// select 组件的option默认显示的是value属性，而非设置的label值，但是一般给后端的数据是value值，如果value值
// 放的是对应的label，就要自定义change事件，不是很方便，而文档上也没有明确写个例子，这个问题在工作的时候卡了一段时间，烦死人记录一下，按照文档写写法，但是实现不出来想不通……
// template 写法
<Select
class="flex-1"
placeholder="请输入按钮类型"
v-model:value="i.type"
:options="TypeMap"
>
<template #option="{ value: val, label }">
<span :aria-label="val">{{ label }}</span>
</template>
</Select>
2023年6月3日：
记录5月29日至6月3日学习到的内容：
js 数组分组hooks
// 根据参数二将一维数组分组成二维数组，返回一个二维数组，也可以返回分组对象
// 0 对象 1 数组
const useArrayGrouping = (arr: {[key: string]: string|number| boolean}[], field, result: 0 | 1)=>{
let groups = arr.reduce((acc, cur) => {
const key = cur[field];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(cur);
return acc;
}, {});
return result === 1 ? Object.values(groups) : groups
}
css 也可以写做 #cfe 简写
文字后面需要加 ： 时 可以利用css 的:after 伪元素的方式给指定元素后面添加 需要的内容
// attr() CSS 函数用于检索所选元素的属性值并在样式表中使用它。它也可以用在伪元素上，在这种情况下，返回伪元素的原始元素的属性值
css 中的attr()函数 可以获取到元素某个属性
<div class="box" data-unit="（holle）">xxxx</div>
<style lang="less">
.box{
&::after{
content: ' (世界: ' attr(cite) ') ';
}
}
</style>
// xxxx (世界：holle)
重新认识watcheffect函数
简短描述：watcheffect会监听函数体中使用到的变量，并在变量改变时触发，有点像计算属性
特征：返回一个停止该监听器的函数，dom加载前调用
参数一 ： effect函数， 参数二：配置项（ 定义effect刷新和调用时机）
配置项：flush 、 onTrack、 onTriggerflush: post \ sync \pre
post 侦听器延迟到组件渲染之后再执行 可使用watchPostEffect() 代替
sync 在某些特殊情况下 (例如要使缓存失效)，可能有必要在响应式依赖发生改变时立即触发侦听器 可使用watchSyncEffect()代替
vben框架中table组件会自动限制table显示数据量最大是1000条，修改以下代码
// src\components\Table\src\hooks
// 原句
configRef.value.total = Math.min((pageTotal ? pageTotal : configRef.value.total) ?? 0, 1000);
// 修改为
configRef.value.total = (pageTotal ? pageTotal : configRef.value.total) ?? 0;
vue3给组件的props定义类型
// 写法一 类型声明
interface List{
id:number
}
const props = defineProps<{
name?:string,
list?:List
}>()
// 写法二 使用widthDefaults 设置默认值
const props = withDefaults(defineProps<{
name:string,
}>(),{
name:'张三'
})
2023年5月11日：
// 1、 ts 避免类型不存在的错误
const a = []
if(a?.length == 0) // 这样的写法用在不确定变量类型时，避免发生错误
2、hooks 命名需要使用use 开头 并且需要声明函数中用到的变量
3、in 关系运算符，用于判断某属性是否存在于某个对象中
a in obj // true 或 false
4、typeof null // 返回object
5、delete object[name] // 使用delete 删除对象指定属性
vue中使用ts
概念：
1、defineProps 函数默认进行类型推导不定义类型也没关系
2、可以通过泛型定义dedineProps
const props = defineProps<{
foo: string
bar?: number
}>()
3、也可以放在接口（interface）中定义defineProps的类型
interface Props {
foo: string
bar?: number
}
const props = defineProps<Props>()
4、定义默认值，如果设置类型将无法定义默认值，使用withDefaults 函数为props添加默认值
export interface Props {
msg?: string
labels?: string[]
}
const props = withDefaults(defineProps<Props>(), {
msg: 'hello',
labels: () => ['one', 'two']
})
// 参考地址：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
2023年5月10日 :
1.当函数的形参只用第二个不需要使用第一个是，第一个参数的位置可以写做 null
2.try catch 还有第三个回调 finally 表示：无论成功与否都会调起
2021年11月5日
-
git推送到远程其他仓库
1.添加远程仓库地址到本地git配置文件中 -- 1、项目根目录 -> .git文件(如果没看到百度一下如何查看隐藏文件夹) -> config -- 2、复制一个origin配置项 -- 3、修改成需要推送的远程仓库地址 如： [remote "远程仓库名称"] url = 远程长裤地址 fetch = +refs/heads/*:refs/remotes/origin/* 2.下拉远程仓库指定分支 git pull 远程仓库名称 指定分支名称 3.推送到远程仓库 git push 远程仓库名称 -
uniapp发布h5项目
发行->网站PC web 或手机H5
2021年10月31日
-
uniapp编译微信小程序，小程序过大的问题解决方案之一
1、uniapp运行时勾选：运行时是否压缩代码 2、微信开发者工具使用预发布版本 -
微信小程序接口地址设置
微信小程序接口地址不仅要在代码中配置还需要配置到微信公众号平台对应的小程序账号中 1、登录微信公众号平台 2、开发管理 3、开发设置 4、服务器域名 5、request合法域名 配置上接口域名就可以了，但是要注意必须时https的
-
h5适配方案（vue项目）
1、reset.css + less + rem单位
2021年4月25日
- vue生命周期函数---mounted：页面渲染结束后调用此钩子
// 实例
vm = new Vue({
mounted:(){
// 页面渲染完毕后调用此函数
this.init()
this.$nextTick(){
console.log('页面已全部渲染完毕')
}
},
methods:{
init(){console.log('123')}
}
})
1、页面渲染完毕后调用，但不包括子组件
2、如果需要页面全部渲染完毕再执行可以使用this.$nextTick(function () { })
-vue脚手架路由参数获取
// 获取
this.$route.params.name // 获取表单内任意名称参数 常见post请求方式
this.$route.query.name // 获取url参数 常见get请求方式
详细点的需学习：https://router.vuejs.org/zh/installation.html
