jingrow-ui/docs/other/Utilities.story.md
jingrow c7bac1a7a0
Some checks failed
Publish on NPM / publish (push) Has been cancelled
Build and Deploy Storybook / build (push) Has been cancelled
Tests / test (push) Has been cancelled
initial commit
2025-10-24 00:40:30 +08:00

1.5 KiB

Utilities

Some common utilities that are useful in building frontend apps.

debounce

Creates a function that will run only once in the specified number of wait time (milliseconds). In the following example, if you run debouncedInput function every time the user presses a key, it will run only once in every 500ms.

import { debounce } from 'jingrow-ui'

function onInput(e) {
  // do something with input event
}

let debouncedInput = debounce(onInput, 500)

fileToBase64

This function will return the base64 string of a File object.

import { fileToBase64 } from 'jingrow-ui'

let base64 = fileToBase64(file) // file must be an instance of File

pageMeta

This is a plugin that can be used to update the document.title reactively as the page changes.

Register the plugin in your main.js file.

import { pageMetaPlugin } from 'jingrow-ui'
// ...
app.use(pageMetaPlugin)

Now, in your page component, declare the pageMeta function. It must return an object with title and (icon or emoji) properties. The pageMeta function behaves like a computed property, if there are reactive dependences that change, document.title will also change accordingly.

Page.vue

<template>...</template>
<script>
export default {
    ...
    pageMeta() {
        return {
            title: 'Page Title',
            icon: '<link to .png, .ico file>',
            emoji: '🌈'
        }
    }
}
</script>