1.0.8 • Published 3 years ago
hks-function v1.0.8
hks-function
一个基于 vue
的封装函数, 兼容vue2 和vue3
| ⚠️ 在 vue3
的 setup
方法中你可以这样获取实例属性
import { onMounted, getCurrentInstance } from "vue";
export default {
name: 'App',
setup() {
onMounted(() => {
const { appContext : { config: { globalProperties } } } = getCurrentInstance()
console.log(globalProperties.$hks)
})
},
安装
使用 npm:
$ num install hks-function
$ npm i hks-function
使用 yarn:
$ num add hks-function
用法
在 vue2
使用
import Vue from 'vue'
import App from './App'
import hks from 'hks-function'
Vue.use(hks)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
在 vue3
使用
import { createApp } from 'vue'
import App from './App.vue'
import hks from '../lib/hks-function.umd.min'
createApp(App)
.use(hks)
.mount('#app')
使用示例
- 节流
规定时间内,只触发一次,可以通过设置immediate来决定触发的时机在这个时间的开始,还是结束的时候执行。
throttle(func, wait = 500, immediate = true)
@param func <Function> 触发回调执行的函数
@param wait <Number> 时间间隔,单位ms
@parms immediate <Bool> 在开始还是结束处触发
<template>
<div class="">
<!-- 此处用法为在模板中使用,无需写this,直接$hks.throttle()即可 -->
<div class="throttle" @click="$hks.throttle(btnAClick, 500)">
露从今夜白
</div>
<div class="throttle" @click="btnBClick">
月是故乡明
</div>
</div>
</template>
<script>
export default {
methods: {
btnAClick() {
console.log('btnClick');
},
btnBClick() {
// 此处用法为在js中调用,需要写this.$hks.throttle()
this.$hks.throttle(this.toNext, 500)
},
toNext() {
console.log('btnBClick');
}
}
}
</script>
- 防抖
在连续的操作中,无论进行了多长时间,只有某一次的操作后在指定的时间内没有再操作,这一次才被判定有效
debounce(func, wait = 500, immediate = false)
@param func <Function> 触发回调执行的函数
@param wait <Number> 时间间隔,单位ms
@parms immediate <Bool> 在开始还是结束处触发
<template>
<div class="">
<!-- 此处用法为在模板中使用,无需写this,直接$hks.debounce()即可 -->
<div class="throttle" @click="$hks.debounce(btnAClick, 500)">
露从今夜白
</div>
<div class="throttle" @click="btnBClick">
月是故乡明
</div>
</div>
</template>
<script>
export default {
methods: {
btnAClick() {
console.log('btnClick');
},
btnBClick() {
// 此处用法为在js中调用,需要写this.$hks.debounce()
this.$hks.debounce(this.toNext, 500)
},
toNext() {
console.log('btnBClick');
}
}
}
</script>
- 时间格式化
timeFormat(timestamp, format = "yyyy-mm-dd")
@parms timestamp <String> 任何合法的时间格式、秒或毫秒的时间戳
@pparm <String> 时间格式,可选。默认为yyyy-mm-dd
- 多久之前
timeFrom(time, format = String | false)
@param timestamp <String> 时间戳
@param format <String / false> 时间格式,默认为yyyy-mm-dd,年为"yyyy",月为"mm",日为"dd",时为"hh",分为"MM",秒为"ss",
<template>
<div>
<div>
时间为:{{$hks.timeFrom(new Date().getTime(), 'yyyy年mm月dd日')}}
</div>
</div>
</template>
- 数组去重
let arr1 = [1,2,3,1,23,123,1]
console.log(this.$hks.uniq(arr1)) // [1, 2, 3, 23, 123]
- 数组分组
let arr1 = [
{id: 2, group: 'admin', name: 'xxx'},
{id: 3, group: 'web', name: 'xxx'},
{id: 4, group: 'admin', name: 'xxx'},
]
console.log(this.$hks.group(arr1, 'group')) // {admin: Array(2), web: Array(1)}
- 将多维数组转化为一维
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
console.log(this.$hks.flatMap(arr)) // [0, 1, 2, 3, 4, 5, 6, 7]
8。 对象里的属性求和
let arr = [
{
subject: 'math',
score: 10
},
{
subject: 'chinese',
score: 20
},
{
subject: 'english',
score: 30
}
];
console.log(this.$hks.objSum(arr, 'score')) // 60