Simple string format plugin for vue-formily.
npm install @vue-formily/string-formatSimple string format plugin for vue-formily.
sh
install with yarn
yarn add @vue-formily/string-formatinstall with npm
npm install @vue-formily/string-format --save
`$3
You can use string-format plugin with a script tag and a CDN, import the library like this:`html
`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:
`html
`$3
$3
`typescript
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);
`$3
`typescript
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
$3
`typescript
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!
`$3
After installing String Format Plugin, we can use the format option in the FieldSchema. Note that the schema's type has to be string.`typescript
// Sample schema
{
formId: 'name',
// Type has te be string
type: 'string',
// value is the Field's value
format: 'Welcome, {value}!'
}
``
For a deeper understanding, please check the formatting example.
You are welcome to contribute to this project, but before you do, please make sure you read the Contributing Guide.