docs: perf highlight display and simplify code (#17588)

This commit is contained in:
sea
2024-07-19 09:34:36 +08:00
committed by GitHub
parent 725349a295
commit ff4aadb6ab
4 changed files with 26 additions and 35 deletions

View File

@@ -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

View File

@@ -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

View File

@@ -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'
```

View File

@@ -13,7 +13,7 @@ This section describes how to use Element Plus in your project.
If you dont care about the bundle size so much, its more convenient to use full import.
```typescript
```ts
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'