|
1 | 1 | # Components |
2 | 2 |
|
3 | | -## BaseFormatProps |
4 | | - |
5 | | -BaseFormat Props for Components that is offered Vue I18n |
6 | | - |
7 | | -**Signature:** |
8 | | -```typescript |
9 | | -export interface BaseFormatProps |
10 | | -``` |
11 | | - |
12 | | -**Details** |
13 | | - |
14 | | -The interface definitions of the underlying props of components such as Translation, DatetimeFormat, and NumberFormat. |
15 | | - |
16 | | -### i18n |
17 | | - |
18 | | -**Signature:** |
19 | | -```typescript |
20 | | -i18n?: Composer; |
21 | | -``` |
22 | | - |
23 | | -**Details** |
24 | | - |
25 | | -A composer instance with an existing scope. |
26 | | - |
27 | | -This option takes precedence over the `scope` option. |
28 | | - |
29 | | -### locale |
30 | | - |
31 | | -**Signature:** |
32 | | -```typescript |
33 | | -locale?: Locale; |
34 | | -``` |
35 | | - |
36 | | -**Details** |
37 | | - |
38 | | -Specifies the locale to be used for the component. |
39 | | - |
40 | | -If specified, the global scope or the locale of the parent scope of the target component will not be overridden and the specified locale will be used. |
41 | | - |
42 | | -### scope |
43 | | - |
44 | | -**Signature:** |
45 | | -```typescript |
46 | | -scope?: ComponentI18nScope; |
47 | | -``` |
48 | | - |
49 | | -**Details** |
50 | | - |
51 | | -Specifies the scope to be used in the target component. |
52 | | - |
53 | | -You can specify either `global` or `parent`. |
54 | | - |
55 | | -If `global` is specified, global scope is used, else then `parent` is specified, the scope of the parent of the target component is used. |
56 | | - |
57 | | -If the parent is a global scope, the global scope is used, if it's a local scope, the local scope is used. |
58 | | - |
59 | | -### tag |
60 | | - |
61 | | -**Signature:** |
62 | | -```typescript |
63 | | -tag?: string | object; |
64 | | -``` |
65 | | - |
66 | | -**Details** |
67 | | - |
68 | | -Used to wrap the content that is distribute in the slot. If omitted, the slot content is treated as Fragments. |
69 | | - |
70 | | -You can specify a string-based tag name, such as `p`, or the object for which the component is defined. |
71 | | - |
72 | | -## DatetimeFormat |
73 | | - |
74 | | -Datetime Format Component |
75 | | - |
76 | | -**Signature:** |
77 | | -```typescript |
78 | | -DatetimeFormat: { |
79 | | - new (): { |
80 | | - $props: VNodeProps & DatetimeFormatProps & BaseFormatProps; |
81 | | - }; |
82 | | -} |
83 | | -``` |
84 | | - |
85 | | -**Details** |
86 | | - |
87 | | -See the following items for property about details |
88 | | - |
89 | | -:::danger |
90 | | -Not supported IE, due to no support `Intl.DateTimeFormat#formatToParts` in [IE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts) |
91 | | - |
92 | | -If you want to use it, you need to use [polyfill](https://github.com/formatjs/formatjs/tree/main/packages/intl-datetimeformat) |
93 | | -::: |
94 | | - |
95 | | -**See Also** |
96 | | -- [FormattableProps](component#formattableprops) |
97 | | -- [BaseFormatProps](component#baseformatprops) |
98 | | -- [Custom Formatting](../../guide/essentials/datetime#custom-formatting) |
99 | | - |
100 | | -## DatetimeFormatProps |
101 | | - |
102 | | -DatetimeFormat Component Props |
103 | | - |
104 | | -**Signature:** |
105 | | -```typescript |
106 | | -export type DatetimeFormatProps = FormattableProps<number | Date, Intl.DateTimeFormatOptions>; |
107 | | -``` |
108 | | - |
109 | | -## FormattableProps |
110 | | - |
111 | | -Formattable Props |
112 | | - |
113 | | -**Signature:** |
114 | | -```typescript |
115 | | -export interface FormattableProps<Value, Format> extends BaseFormatProps |
116 | | -``` |
117 | | -
|
118 | | -**Details** |
119 | | -
|
120 | | -The props used in DatetimeFormat, or NumberFormat component |
121 | | -
|
122 | | -### format |
123 | | -
|
124 | | -**Signature:** |
125 | | -```typescript |
126 | | -format?: string | Format; |
127 | | -``` |
128 | | -
|
129 | | -**Details** |
130 | | -
|
131 | | -The format to use in the target component. |
132 | | -
|
133 | | -Specify the format key string or the format as defined by the Intl API in ECMA 402. |
134 | | -
|
135 | | -### value |
136 | | -
|
137 | | -**Signature:** |
138 | | -```typescript |
139 | | -value: Value; |
140 | | -``` |
141 | | -
|
142 | | -**Details** |
143 | | -
|
144 | | -The value specified for the target component |
145 | | -
|
146 | | -## NumberFormat |
147 | | -
|
148 | | -Number Format Component |
149 | | -
|
150 | | -**Signature:** |
151 | | -```typescript |
152 | | -NumberFormat: { |
153 | | - new (): { |
154 | | - $props: VNodeProps & NumberFormatProps & BaseFormatProps; |
155 | | - }; |
156 | | -} |
157 | | -``` |
158 | | - |
159 | | -**Details** |
160 | | - |
161 | | -See the following items for property about details |
162 | | - |
163 | | -:::danger |
164 | | -Not supported IE, due to no support `Intl.NumberFormat#formatToParts` in [IE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatToParts) |
165 | | - |
166 | | -If you want to use it, you need to use [polyfill](https://github.com/formatjs/formatjs/tree/main/packages/intl-numberformat) |
167 | | -::: |
168 | | - |
169 | | -**See Also** |
170 | | -- [FormattableProps](component#formattableprops) |
171 | | -- [BaseFormatProps](component#baseformatprops) |
172 | | -- [Custom Formatting](../../guide/essentials/number#custom-formatting) |
173 | | - |
174 | | -## NumberFormatProps |
175 | | - |
176 | | -NumberFormat Component Props |
177 | | - |
178 | | -**Signature:** |
179 | | -```typescript |
180 | | -export type NumberFormatProps = FormattableProps<number, Intl.NumberFormatOptions>; |
181 | | -``` |
182 | | - |
183 | | -## Translation |
184 | | - |
185 | | -Translation Component |
186 | | - |
187 | | -**Signature:** |
188 | | -```typescript |
189 | | -Translation: { |
190 | | - new (): { |
191 | | - $props: VNodeProps & TranslationProps; |
192 | | - }; |
193 | | -} |
194 | | -``` |
195 | | -
|
196 | | -**Details** |
197 | | -
|
198 | | -See the following items for property about details |
199 | | -
|
200 | | -**See Also** |
201 | | -- [TranslationProps](component#translationprops) |
202 | | -- [BaseFormatProps](component#baseformatprops) |
203 | | -- [Component Interpolation](../../guide/advanced/component) |
204 | | -
|
205 | | -**Examples** |
206 | | -
|
207 | | -
|
208 | | -```html |
209 | | -<div id="app"> |
210 | | - <!-- ... --> |
211 | | - <i18n keypath="term" tag="label" for="tos"> |
212 | | - <a :href="url" target="_blank">{{ $t('tos') }}</a> |
213 | | - </i18n> |
214 | | - <!-- ... --> |
215 | | -</div> |
216 | | -``` |
217 | | -
|
218 | | -
|
219 | | -```js |
220 | | -import { createApp } from 'vue' |
221 | | -import { createI18n } from 'vue-i18n' |
222 | | - |
223 | | -const messages = { |
224 | | - en: { |
225 | | - tos: 'Term of Service', |
226 | | - term: 'I accept xxx {0}.' |
227 | | - }, |
228 | | - ja: { |
229 | | - tos: '利用規約', |
230 | | - term: '私は xxx の{0}に同意します。' |
231 | | - } |
232 | | -} |
233 | | - |
234 | | -const i18n = createI18n({ |
235 | | - locale: 'en', |
236 | | - messages |
237 | | -}) |
238 | | - |
239 | | -const app = createApp({ |
240 | | - data: { |
241 | | - url: '/term' |
242 | | - } |
243 | | -}).use(i18n).mount('#app') |
244 | | -``` |
245 | | -
|
246 | | -
|
247 | | -
|
248 | | -
|
249 | | -## TranslationProps |
250 | | -
|
251 | | -Translation Component Props |
252 | | -
|
253 | | -**Signature:** |
254 | | -```typescript |
255 | | -export interface TranslationProps extends BaseFormatProps |
256 | | -``` |
257 | | -
|
258 | | -### keypath |
259 | | -
|
260 | | -**Signature:** |
261 | | -```typescript |
262 | | -keypath: string; |
263 | | -``` |
264 | | -
|
265 | | -**Details** |
266 | | -
|
267 | | -The locale message key can be specified prop |
268 | | -
|
269 | | -### plural |
270 | | -
|
271 | | -**Signature:** |
272 | | -```typescript |
273 | | -plural?: number | string; |
274 | | -``` |
275 | | -
|
276 | | -**Details** |
277 | | -
|
278 | | -The Plural Choosing the message number prop |
279 | | -
|
0 commit comments