Gauss

Appearance

指令 ​

ts
import { directives } from '@gauss/core'

app.use(directives)
import { directives } from '@gauss/core'

app.use(directives)

在入口文件全局注册后，您可以使用以下指令。

v-debounce ​

按钮防抖指令

  • 期望的绑定值类型：function

  • 详细信息

    v-debounce 创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒（默认 100ms）后调用 func 方法。

vue
<template>
    <!-- 从上一次被调用后，延迟 100ms 毫秒后调用 debouncedClick 方法。 -->
    <el-button v-debounce="debouncedClick">点击</el-button>
    <!-- 从上一次被调用后，延迟 500ms 毫秒后调用 debouncedClick2 方法。 -->
    <el-button v-debounce:500="debouncedClick2">点击</el-button>
</template>

<script setup>
const debouncedClick = () => {
    // TODO
}
const debouncedClick2 = () => {
    // TODO
}
</script>
<template>
    <!-- 从上一次被调用后，延迟 100ms 毫秒后调用 debouncedClick 方法。 -->
    <el-button v-debounce="debouncedClick">点击</el-button>
    <!-- 从上一次被调用后，延迟 500ms 毫秒后调用 debouncedClick2 方法。 -->
    <el-button v-debounce:500="debouncedClick2">点击</el-button>
</template>

<script setup>
const debouncedClick = () => {
    // TODO
}
const debouncedClick2 = () => {
    // TODO
}
</script>

v-throttle ​

按钮节流指令

  • 期望的绑定值类型：function

  • 详细信息

    v-throttle 创建一个节流函数，在 wait 毫秒内最多执行 func 一次的函数。

vue
<template>
    <!-- 在 500 毫秒内最多执行 throttledClick 一次。 -->
    <el-button v-throttle="throttledClick">点击</el-button>
    <!-- 在 1000 毫秒内最多执行 throttledClick2 一次 -->
    <el-button v-throttle:1000="throttledClick2">点击</el-button>
</template>

<script setup>
const throttledClick = () => {
    // TODO
}
const throttledClick2 = () => {
    // TODO
}
</script>
<template>
    <!-- 在 500 毫秒内最多执行 throttledClick 一次。 -->
    <el-button v-throttle="throttledClick">点击</el-button>
    <!-- 在 1000 毫秒内最多执行 throttledClick2 一次 -->
    <el-button v-throttle:1000="throttledClick2">点击</el-button>
</template>

<script setup>
const throttledClick = () => {
    // TODO
}
const throttledClick2 = () => {
    // TODO
}
</script>

v-time ​

时间格式化指令

  • 期望的绑定值类型：string | number | Date | object

  • 详细信息

    v-time 接受一个需要格式化的日期或时间戳，在绑定节点内插入（innerText）格式化后的日期，默认格式化占位符 YYYY-MM-DD HH:mm:ss。

vue
<template>
    <!-- 字符串 -->
    <div v-time="'2023-05-20 00:00:00'"></div>
    <!-- 等同于上方的写法 -->
    <div v-time="{ date: '2023-05-20 00:00:00' }"></div>
    <!-- 时间格式 -->
    <div v-time="new Date()"></div>
    <!-- 时间戳 -->
    <div v-time="1685059411568"></div>
    <!-- 自定义格式化占位符 -->
    <div v-time="{ date: '2023-05-20 10:10:10', format: 'HH:mm' }"></div>
</template>
<template>
    <!-- 字符串 -->
    <div v-time="'2023-05-20 00:00:00'"></div>
    <!-- 等同于上方的写法 -->
    <div v-time="{ date: '2023-05-20 00:00:00' }"></div>
    <!-- 时间格式 -->
    <div v-time="new Date()"></div>
    <!-- 时间戳 -->
    <div v-time="1685059411568"></div>
    <!-- 自定义格式化占位符 -->
    <div v-time="{ date: '2023-05-20 10:10:10', format: 'HH:mm' }"></div>
</template>

html 内容

vue
<div v-time="{ date: '2023-05-20 10:10:10', format: 'HH:mm' }"></div>
<div v-time="{ date: '2023-05-20 10:10:10', format: 'HH:mm' }"></div>

页面显示

10:10

Copyright © 2023-present Gauss