String Format

String Format Plugin

Simple string format plugin for vue-formily.

Install

yarn add @vue-formily/string-format

npm install @vue-formily/string-format --save

CDN

You can use string-format plugin with a script tag and a CDN, import the library like this:

<script src="https://unpkg.com/@vue-formily/string-format@latest"></script>

This will inject a StringFormatPlugin global object, which you will use to access the various methods exposed by the plugin or register to vue-formily.

If you are using native ES Modules, there is also an ES Modules compatible build:

<script type="module">
  import stringFormat from 'https://unpkg.com/@vue-formily/string-format@latest/dist/string-format-plugin.esm.js'
</script>

Set Up

Vue 3.x

import { createApp } from 'vue'
import { createFormily } from '@vue-formily/formily';
import stringFormat from '@vue-formily/string-format';

const formily = createFormily();

formily.plug(stringFormat);

const app = createApp(App)

app.use(formily);

Vue 2.x

import Vue from 'vue';
import { createFormily } from '@vue-formily/formily';
import stringFormat from '@vue-formily/string-format';

const formily = createFormily();

formily.plug(stringFormat);

Vue.use(formily);

Basic Usage

Stand Along

import stringFormat from '@vue-formily/string-format';

stringFormat.format('Hello, {name}!', {
  name: 'Bob'
}); // Hello, Bob!

stringFormat.format('Today is {dates[6]}.', {
  dates: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
}); // Today is Sunday.

stringFormat.format('Welcome, {user.name}!', {
  user: {
    name: 'Bob'
  }
}); // Welcome, Bob!

In Vue Formily's Field

After installing String Format Plugin, we can use the format option in the FieldSchema. Note that the schema's type has to be string.

// Sample schema
{
  formId: 'name',
  // Type has to be string
  type: 'string',
  // `value` is the Field's value
  format: 'Welcome, {value}!'
}

Methods

format

Format the input string.

Signatures

format(format: string, data: Record<string, any> | Record<string, any>[]): string;

Parameters

format - The format string.
data - The data used for the formatting.