67 lines
1.5 KiB
Markdown
67 lines
1.5 KiB
Markdown
# 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`.
|
|
|
|
```js
|
|
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](https://developer.mozilla.org/en-US/docs/Web/API/File_API).
|
|
|
|
```js
|
|
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.
|
|
|
|
```js
|
|
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**
|
|
|
|
```vue
|
|
<template>...</template>
|
|
<script>
|
|
export default {
|
|
...
|
|
pageMeta() {
|
|
return {
|
|
title: 'Page Title',
|
|
icon: '<link to .png, .ico file>',
|
|
emoji: '🌈'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
```
|