mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
docs: perf highlight display and simplify code (#17588)
This commit is contained in:
@@ -20,13 +20,15 @@ If you are using a version **less than** ^(2.6.0) and using `checkbox-group`, pl
|
||||
|
||||
:::
|
||||
|
||||
``` vue
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<!-- works when >=2.6.0, recommended ✔️ value not work when <2.6.0 ❌ -->
|
||||
<el-checkbox label="Option 1" value="Value 1" />
|
||||
<!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
|
||||
<el-checkbox label="Option 2 & Value 2" />
|
||||
</el-checkbox-group>
|
||||
```vue
|
||||
<template>
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<!-- works when >=2.6.0, recommended ✔️ value not work when <2.6.0 ❌ -->
|
||||
<el-checkbox label="Option 1" value="Value 1" />
|
||||
<!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
|
||||
<el-checkbox label="Option 2 & Value 2" />
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
@@ -20,13 +20,15 @@ If you are using a version **less than** ^(2.6.0), please refer to:
|
||||
|
||||
:::
|
||||
|
||||
``` vue
|
||||
<el-radio-group v-model="radio1">
|
||||
<!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
|
||||
<el-radio value="Value 1">Option 1</el-radio>
|
||||
<!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
|
||||
<el-radio label="Label 2 & Value 2">Option 2</el-radio>
|
||||
</el-radio-group>
|
||||
```vue
|
||||
<template>
|
||||
<el-radio-group v-model="radio1">
|
||||
<!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
|
||||
<el-radio value="Value 1">Option 1</el-radio>
|
||||
<!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
|
||||
<el-radio label="Label 2 & Value 2">Option 2</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
@@ -12,7 +12,7 @@ languages, you can get you answer by keep reading.
|
||||
|
||||
Element Plus provides global configurations
|
||||
|
||||
```typescript
|
||||
```ts
|
||||
import ElementPlus from 'element-plus'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
|
||||
@@ -26,29 +26,16 @@ app.use(ElementPlus, {
|
||||
Element Plus also provides a Vue component [ConfigProvider](/en-US/component/config-provider)
|
||||
for globally configuring locale and other settings.
|
||||
|
||||
```html
|
||||
```vue
|
||||
<template>
|
||||
<el-config-provider :locale="locale">
|
||||
<el-config-provider :locale="zhCn">
|
||||
<app />
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue'
|
||||
import { ElConfigProvider } from 'element-plus'
|
||||
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
ElConfigProvider,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
locale: zhCn,
|
||||
}
|
||||
},
|
||||
})
|
||||
<script setup lang="ts">
|
||||
import { ElConfigProvider } from 'element-plus'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -56,7 +43,7 @@ for globally configuring locale and other settings.
|
||||
|
||||
We use [Day.js](https://day.js.org/docs/en/i18n/i18n) library to manage date and time in components like `DatePicker`. It is important to set a proper locale in Day.js to make the internationalization fully works. You have to import Day.js's locale config separately.
|
||||
|
||||
```
|
||||
```ts
|
||||
import 'dayjs/locale/zh-cn'
|
||||
```
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ This section describes how to use Element Plus in your project.
|
||||
|
||||
If you don’t care about the bundle size so much, it’s more convenient to use full import.
|
||||
|
||||
```typescript
|
||||
```ts
|
||||
// main.ts
|
||||
import { createApp } from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
|
||||
Reference in New Issue
Block a user