Element Plus

https://element-plus.org
Admin
Element Plus is a Vue 3 based component library for designers and developers, providing a...
Tokens:327,228
Snippets:1,813
Trust Score:9.1
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install dependencies with pnpm i

Source: https://element-plus.org/es-ES/guide/dev-guide

Installs all project dependencies. Run this command in the project root before starting development.

```shell
pnpm i
```

--------------------------------

### Install Element Plus with Deno

Source: https://element-plus.org/es-ES/guide/installation

Install Element Plus with Deno.

```shell
$ deno add element-plus
```

--------------------------------

### Install Element Plus with Yarn

Source: https://element-plus.org/es-ES/guide/installation

Install Element Plus with Yarn.

```shell
$ yarn add element-plus
```

--------------------------------

### Install Element Plus with pnpm

Source: https://element-plus.org/es-ES/guide/installation

Install Element Plus with pnpm.

```shell
$ pnpm install element-plus
```

--------------------------------

### Install Element Plus with npm

Source: https://element-plus.org/es-ES/guide/installation

Install Element Plus with npm.

```shell
$ npm install element-plus --save
```

--------------------------------

### Install @element-plus/icons-vue with npm

Source: https://element-plus.org/es-ES/component/icon

Installs the Element Plus icon package using npm.

```shell
$ npm install @element-plus/icons-vue
```

--------------------------------

### Install @element-plus/icons-vue with pnpm

Source: https://element-plus.org/es-ES/component/icon

Installs the Element Plus icon package using pnpm.

```shell
$ pnpm install @element-plus/icons-vue
```

--------------------------------

### Install @element-plus/nuxt

Source: https://element-plus.org/es-ES/guide/quickstart

Installs the Nuxt module for Element Plus. Choose the command for your package manager.

```shell
$ npm install -D @element-plus/nuxt
```

```shell
$ yarn add -D @element-plus/nuxt
```

```shell
$ pnpm install -D @element-plus/nuxt
```

--------------------------------

### Start local dev environment and add component to App.vue

Source: https://element-plus.org/es-ES/guide/dev-guide

Starts the local development environment. After running pnpm dev, add your component to play/src/App.vue as shown. The App.vue file must be modified for things to work.

```shell
pnpm dev
```

```vue
<template>
  <ComponentYouAreDeveloping />
</template>

<script setup lang="ts">
// make sure this component is registered in @element-plus/components
</script>
```

--------------------------------

### Install @element-plus/icons-vue with Yarn

Source: https://element-plus.org/es-ES/component/icon

Installs the Element Plus icon package using Yarn.

```shell
$ yarn add @element-plus/icons-vue
```

--------------------------------

### Infinite Scroll Example

Source: https://element-plus.org/es-ES/component/scrollbar

Example demonstrating how to use the el-scrollbar component with the end-reached event to implement infinite scrolling.

```APIDOC
## [Vue] Infinite Scroll Example

### Description
Example of using el-scrollbar with the end-reached event to load more content when scrolling reaches the bottom.

### Method
Vue Component Usage

### Endpoint
N/A

### Parameters
#### Props
- **height** (string/number) - Optional - Height of the scrollbar.
- **max-height** (string/number) - Optional - Maximum height of the scrollbar.
- **native** (boolean) - Optional - Use native scrollbar style.
- **wrap-style** (string/object) - Optional - Style of the wrapper container.
- **wrap-class** (string) - Optional - Class of the wrapper container.
- **view-style** (string/object) - Optional - Style of the view.
- **view-class** (string) - Optional - Class of the view.
- **noresize** (boolean) - Optional - Disable resize observer.
- **tag** (string) - Optional - Tag of the view element.
- **always** (boolean) - Optional - Always show scrollbar.
- **min-size** (number) - Optional - Minimum size of scrollbar.
- **id** (string) - Optional - ID of view.
- **role** (string) - Optional - Role of view.
- **aria-label** (string) - Optional - ARIA label of view.
- **aria-orientation** (enum) - Optional - ARIA orientation of view.
- **tabindex** (number/string) - Optional - Tabindex of wrap container.
- **distance** (number) - Optional - Distance (px) to trigger end-reached event.

#### Events
- **scroll** - Triggered on scroll, returns scroll distance.
- **end-reached** - Triggered when scroll reaches the end.

#### Slots
- **default** - Customize default content.

#### Exposed Methods
- **handleScroll** - Handles scroll event.
- **scrollTo** - Scrolls to specific coordinates.
- **setScrollTop** - Sets scroll distance from top.
- **setScrollLeft** - Sets scroll distance from left.
- **update** - Manually updates scrollbar state.
- **wrapRef** - Reference to the scrollbar wrapper.

### Request Example
```vue
<template>
  <el-scrollbar height="400px" @end-reached="loadMore">
    <p v-for="item in num" :key="item" class="scrollbar-demo-item">
      {{ item }}
    </p>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { ScrollbarDirection } from 'element-plus'

const num = ref(30)

const loadMore = (direction: ScrollbarDirection) => {
  if (direction === 'bottom') {
    num.value += 5
  }
}
</script>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.el-slider {
  margin-top: 20px;
}
</style>
```

### Response
#### Success Response (200)
- **num** (number) - Updated count of items.

#### Response Example
```json
{
  "num": 35
}
```
```

--------------------------------

### Custom Tag Example (Vue)

Source: https://element-plus.org/es-ES/component/button.html

Shows how to use the `tag` prop to render the button as different elements. The example includes a default button, a div with role and tabindex, and an anchor with href, target, and rel attributes.

```Vue
<template>
  <el-button>button</el-button>
  <el-button tag="div" role="button" tabindex="0">div</el-button>
  <el-button
    type="primary"
    tag="a"
    href="https://github.com/element-plus/element-plus"
    target="_blank"
    rel="noopener noreferrer"
  >
    a
  </el-button>
</template>
```

--------------------------------

### Install unplugin-vue-components and unplugin-auto-import

Source: https://element-plus.org/es-ES/guide/quickstart

Installs the required plugins for on-demand auto-import. Choose the command for your package manager (npm, yarn, or pnpm).

```shell
$ npm install -D unplugin-vue-components unplugin-auto-import
```

```shell
$ yarn add -D unplugin-vue-components unplugin-auto-import
```

```shell
$ pnpm install -D unplugin-vue-components unplugin-auto-import
```

--------------------------------

### Preview website with pnpm docs:dev

Source: https://element-plus.org/es-ES/guide/dev-guide

Launches the website for previewing all existing components. Run this command to start the documentation site locally.

```shell
pnpm docs:dev
```

--------------------------------

### Underline control with new values example

Source: https://element-plus.org/es-ES/component/link

Shows how to control underlines with the new values 'always', 'hover', and 'never'. Starting from 2.9.9, these values are used instead of boolean.

```Vue
<template>
  <div>
    <el-link>default</el-link>
    <el-link underline="always">always</el-link>
    <el-link underline="hover">hover</el-link>
    <el-link underline="never">never</el-link>
  </div>
</template>

<style scoped>
.el-link {
  margin-right: 8px;
}
</style>
```

--------------------------------

### Disabled state checkbox example

Source: https://element-plus.org/es-ES/component/checkbox

Shows how to use the `disabled` attribute on `el-checkbox` to disable a checkbox. The first checkbox is disabled, the second is not. Uses Vue 3 with `<script setup>` and TypeScript.

```vue
<template>
  <el-checkbox v-model="checked1" disabled>Disabled</el-checkbox>
  <el-checkbox v-model="checked2">Not disabled</el-checkbox>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checked1 = ref(false)
const checked2 = ref(true)
</script>
```

--------------------------------

### Vista previa de imagen con previewSrcList e initial-index

Source: https://element-plus.org/es-ES/component/image

Configura `previewSrcList` para habilitar la vista previa grande y `initial-index` para indicar la primera imagen previsualizada (por defecto 0). Incluye `zoom-rate`, `max-scale`, `min-scale` y `show-progress`.

```vue
<template>
  <div class="demo-image__preview">
    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="srcList"
      show-progress
      :initial-index="4"
      fit="cover"
    />
  </div>
</template>

<script lang="ts" setup>
const url =
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
</script>

<style scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
```

--------------------------------

### ConfigProvider component with locale

Source: https://element-plus.org/es-ES/guide/i18n

Use the ConfigProvider component to set the locale for all components in the template. The example wraps the app in el-config-provider and passes the zhCn locale, importing ElConfigProvider and the locale in the script setup block.

```vue
<template>
  <el-config-provider :locale="zhCn">
    <app />
  </el-config-provider>
</template>

<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
</script>
```

--------------------------------

### Removable Tag with closable and close event

Source: https://element-plus.org/es-ES/component/tag

Uses the `closable` attribute to create removable tags. The `close` event is triggered when a tag is removed. The example includes a script setup with a reactive array of tags.

```Vue
<template>
  <div class="flex gap-2">
    <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
      {{ tag.name }}
    </el-tag>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TagProps } from 'element-plus'

interface TagsItem {
  name: string
  type: TagProps['type']
}

const tags = ref<TagsItem[]>([
  { name: 'Tag 1', type: 'primary' },
  { name: 'Tag 2', type: 'success' },
  { name: 'Tag 3', type: 'info' },
  { name: 'Tag 4', type: 'warning' },
  { name: 'Tag 5', type: 'danger' },
])
</script>
```

--------------------------------

### Clearable Select with el-select

Source: https://element-plus.org/es-ES/component/select

Use the `clearable` attribute on `el-select` to display a clear icon that resets the selected value. The example includes a template with a select bound to `value` and a script setup with options data.

```vue
<template>
  <el-select
    v-model="value"
    clearable
    placeholder="Select"
    style="width: 240px"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>
```

--------------------------------

### Enlazar dependencias locales con pnpm link

Source: https://element-plus.org/es-ES/guide/dev-faq

Comandos para construir Element Plus, enlazarlo globalmente y luego enlazarlo a tu proyecto. Incluye pasos para ESM y para el proyecto del usuario.

```shell
# obtiene dist
pnpm build
cd dist/element-plus
# set cur element-plus to global `node_modules`
pnpm link --global
# para esm también necesita link element-plus para dist
pnpm link --global element-plus

# ir a tu proyecto, enlace a `element-plus`
cd your-project
pnpm link --global element-plus
```

--------------------------------

### Basic CascaderPanel with options

Source: https://element-plus.org/es-ES/component/cascader

Basic usage of the CascaderPanel component with a static options array. The options define a hierarchical tree with values, labels, and children. This example is shown in the 'Panel de Cascader' section and uses the TypeScript setup syntax.

```vue
<template>
  <el-cascader-panel :options="options" />
</template>

<script lang="ts" setup>
const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'feedback',
            label: 'Feedback',
          },
          {
            value: 'efficiency',
            label: 'Efficiency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'side nav',
            label: 'Side Navigation',
          },
          {
            value: 'top nav',
            label: 'Top Navigation',
          },
        ],
      },
    ],
  },
  {
    value: 'component',
    label: 'Component',
    children: [
      {
        value: 'basic',
        label: 'Basic',
        children: [
          {
            value: 'layout',
            label: 'Layout',
          },
          {
            value: 'color',
            label: 'Color',
          },
          {
            value: 'typography',
            label: 'Typography',
          },
          {
            value: 'icon',
            label: 'Icon',
          },
          {
            value: 'button',
            label: 'Button',
          },
        ],
      },
      {
        value: 'form',
        label: 'Form',
        children: [
          {
            value: 'radio',
            label: 'Radio',
          },
          {
            value: 'checkbox',
            label: 'Checkbox',
          },
          {
            value: 'input',
            label: 'Input',
          },
          {
            value: 'input-number',
            label: 'InputNumber',
          },
          {
            value: 'select',
            label: 'Select',
          },
          {
            value: 'cascader',
            label: 'Cascader',
          },
          {
            value: 'switch',
            label: 'Switch',
          },
          {
            value: 'slider',
            label: 'Slider',
          },
          {
            value: 'time-picker',
            label: 'TimePicker',
          },
          {
            value: 'date-picker',
            label: 'DatePicker',
          },
          {
            value: 'datetime-picker',
            label: 'DateTimePicker',
          },
          {
            value: 'upload',
            label: 'Upload',
          },
          {
            value: 'rate',
            label: 'Rate',
          },
          {
            value: 'form',
            label: 'Form',
          },
        ],
      },
      {
        value: 'data',
        label: 'Data',
        children: [
          {
            value: 'table',
            label: 'Table',
          },
          {
            value: 'tag',
            label: 'Tag',
          },
          {
            value: 'progress',
            label: 'Progress',
          },
          {
            value: 'tree',
            label: 'Tree',
          },
          {
            value: 'pagination',
            label: 'Pagination',
          },
          {
            value: 'badge',
            label: 'Badge',
          },
        ],
      },
      {
        value: 'notice',
        label: 'Notice',
        children: [
          {
            value: 'alert',
            label: 'Alert',
          },
          {
            value: 'loading',
            label: 'Loading',
          },
          {
            value: 'message',
            label: 'Message',
          },
        ],
      },
    ],
  },
  {
    value: 'resource',
    label: 'Resource',
    children: [
      {
        value: 'axure',
        label: 'Axure Components',
      },
      {
        value: 'sketch',
        label: 'Sketch Templates',
      },
      {
        value: 'docs',
        label: 'Design Documentation',
      },
    ],
  },
]
</script>
```

--------------------------------

### Set calendar range with range attribute

Source: https://element-plus.org/es-ES/component/calendar

Use the `range` attribute to restrict the calendar to a specific date range. The start must be a Monday and the end a Sunday, and the range cannot exceed two months. The example sets a range from March 4 to March 24, 2019.

```vue
<template>
  <el-calendar :range="[new Date(2019, 2, 4), new Date(2019, 2, 24)]" />
</template>
```

--------------------------------

### Time range picker with is-range and arrow-control

Source: https://element-plus.org/es-ES/component/time-picker

Vue 3 component using `el-time-picker` with `is-range` to enable range selection. The second picker also uses `arrow-control` for arrow-based time selection. The example includes two pickers with `range-separator="To"`, start and end placeholders, and bound values initialized to date ranges.

```vue
<template>
  <div class="demo-range">
    <el-time-picker
      v-model="value1"
      is-range
      range-separator="To"
      start-placeholder="Start time"
      end-placeholder="End time"
    />
    <el-time-picker
      v-model="value2"
      is-range
      arrow-control
      range-separator="To"
      start-placeholder="Start time"
      end-placeholder="End time"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref<[Date, Date]>([
  new Date(2016, 9, 10, 8, 40),
  new Date(2016, 9, 10, 9, 40),
])
const value2 = ref<[Date, Date]>([
  new Date(2016, 9, 10, 8, 40),
  new Date(2016, 9, 10, 9, 40),
])
</script>

<style>
.demo-range .el-date-editor {
  margin: 8px;
}

```

--------------------------------

### Vue Tabs with default-value prop

Source: https://element-plus.org/es-ES/component/tabs

Example demonstrating the `default-value` prop (available since 2.11.9) that sets the initially active tab to `third` while avoiding transition. Uses a loop to render four tab panes and logs the clicked tab context and event. Includes TypeScript setup script and custom styling for content padding and font.

```vue
<template>
  <el-tabs
    v-model="activeName"
    class="demo-tabs"
    default-value="third"
    @tab-click="handleClick"
  >
    <el-tab-pane
      v-for="tab in tabs"
      :key="tab.name"
      :label="tab.label"
      :name="tab.name"
    >
      default-value: third
      <br />
      active: {{ activeName }}
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TabsPaneContext } from 'element-plus'

const tabs = ref([
  { label: 'User', name: 'first' },
  { label: 'Config', name: 'second' },
  { label: 'Role', name: 'third' },
  { label: 'Task', name: 'fourth' },
])

const activeName = ref()

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
```

--------------------------------

### Tree selection example with get/set checked nodes and keys

Source: https://element-plus.org/es-ES/component/tree

Vue component that uses el-tree with show-checkbox, node-key="id", and defaultProps to display a tree. It provides buttons to get checked nodes/keys and set checked nodes/keys, using the treeRef instance methods getCheckedNodes, getCheckedKeys, setCheckedNodes, setCheckedKeys, and resetChecked. The data array defines the tree structure with ids and labels.

```vue
<template>
  <el-tree
    ref="treeRef"
    style="max-width: 600px"
    :data="data"
    show-checkbox
    default-expand-all
    node-key="id"
    highlight-current
    :props="defaultProps"
  />

  <div class="flex flex-wrap gap-1 mt-2">
    <el-button class="!ml-0" @click="getCheckedNodes">get by node</el-button>
    <el-button class="!ml-0" @click="getCheckedKeys">get by key</el-button>
    <el-button class="!ml-0" @click="setCheckedNodes">set by node</el-button>
    <el-button class="!ml-0" @click="setCheckedKeys">set by key</el-button>
    <el-button class="!ml-0" @click="resetChecked">reset</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { RenderContentContext, TreeInstance } from 'element-plus'

interface Tree {
  id: number
  label: string
  children?: Tree[]
}
type Node = RenderContentContext['node']

const treeRef = ref<TreeInstance>()

const getCheckedNodes = () => {
  console.log(treeRef.value!.getCheckedNodes(false, false))
}
const getCheckedKeys = () => {
  console.log(treeRef.value!.getCheckedKeys(false))
}
const setCheckedNodes = () => {
  treeRef.value!.setCheckedNodes(
    [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 9,
        label: 'Level three 1-1-1',
      },
    ] as Node[],
    false
  )
}
const setCheckedKeys = () => {
  treeRef.value!.setCheckedKeys([3], false)
}
const resetChecked = () => {
  treeRef.value!.setCheckedKeys([], false)
}

const defaultProps = {
  children: 'children',
  label: 'label',
}

const data: Tree[] = [
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
]
</script>
```

--------------------------------

### Configuración global con importación completa (main.ts)

Source: https://element-plus.org/es-ES/guide/quickstart

Registra Element Plus globalmente con un objeto de configuración que define el tamaño por defecto ('small') y el zIndex inicial (3000). Se usa en el archivo main.ts para la importación completa.

```ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })
```

--------------------------------

### Configurar vite.config.ts para importar SCSS

Source: https://element-plus.org/es-ES/guide/namespace

Importa el archivo SCSS personalizado en la configuración de Vite usando preprocessorOptions. Lo mismo es válido para webpack, que debe establecerse en preprocessorOptions.

```ts
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *;`,
      },
    },
  },
  // ...
})
```

--------------------------------

### Uso básico de el-image con fit

Source: https://element-plus.org/es-ES/component/image

Muestra cómo usar el atributo `fit` de `el-image` para redimensionar la imagen dentro de su contenedor, con las opciones `fill`, `contain`, `cover`, `none` y `scale-down`. El ejemplo itera sobre un array de valores `fit` y renderiza una imagen para cada uno, con estilos que muestran cada bloque en una fila.

```vue
<template>
  <div class="demo-image">
    <div v-for="fit in fits" :key="fit" class="block">
      <span class="demonstration">{{ fit }}</span>
      <el-image style="width: 100px; height: 100px" :src="url" :fit="fit" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { ImageProps } from 'element-plus'

const fits = [
  'fill',
  'contain',
  'cover',
  'none',
  'scale-down',
] as ImageProps['fit'][]
const url =
  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
</script>

<style scoped>
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  min-width: 100px;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
```

--------------------------------

### Importar a petición: ElCollapseTransition y base.css

Source: https://element-plus.org/es-ES/guide/transitions

Importación a petición de `ElCollapseTransition` y del CSS base para las transiciones fade/zoom. Registra el componente globalmente con `app.component`.

```ts
// collapse
import { ElCollapseTransition } from 'element-plus'
// fade/zoom
import 'element-plus/theme-chalk/base.css'
import App from './App.vue'

const app = createApp(App)
app.component(ElCollapseTransition.name, ElCollapseTransition)
```

--------------------------------

### Abrir vista previa manualmente con showPreview y control de el-image-viewer

Source: https://element-plus.org/es-ES/component/image

Muestra dos formas de abrir la vista previa manualmente: usando el método `showPreview` de la instancia de imagen (obtenida con `ref`) y controlando la visibilidad de `el-image-viewer` con una variable reactiva. Requiere importar `ImageInstance` desde 'element-plus'.

```vue
<template>
  <div class="flex gap-12">
    <div class="grid gap-3">
      <el-button @click="handleClick">
        openPreview with showPreview method
      </el-button>
      <el-image
        ref="imageRef"
        style="width: 100px; height: 100px"
        :src="url"
        show-progress
        :preview-src-list="srcList"
        fit="cover"
      />
    </div>
    <div>
      <el-button @click="showPreview = true"> preview controlled </el-button>
      <el-image-viewer
        v-if="showPreview"
        :url-list="srcList"
        show-progress
        :initial-index="4"
        @close="showPreview = false"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { ImageInstance } from 'element-plus'

const url =
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]

const imageRef = ref<ImageInstance>()
const showPreview = ref(false)

const handleClick = () => {
  imageRef.value!.showPreview()
}
</script>
```

--------------------------------

### Uso básico de Space con wrap

Source: https://element-plus.org/es-ES/component/space

Uso básico del componente Space para proporcionar espacio unificado entre otros componentes. El atributo `wrap` permite que los elementos se ajusten a múltiples líneas cuando no caben en una sola.

```vue
<template>
  <el-space wrap>
    <el-card v-for="i in 3" :key="i" class="box-card" style="width: 250px">
      <template #header>
        <div class="card-header">
          <span>Card name</span>
          <el-button class="button" text>Operation button</el-button>
        </div>
      </template>
      <div v-for="o in 4" :key="o" class="text item">
        {{ 'List item ' + o }}
      </div>
    </el-card>
  </el-space>
</template>
```

--------------------------------

### Install dayjs explicitly

Source: https://element-plus.org/es-ES/guide/quickstart

Alternatively, install the dayjs dependency explicitly in your project to avoid the hoisting issue.

```bash
pnpm add dayjs
```

--------------------------------

### Uso básico de v-infinite-scroll

Source: https://element-plus.org/es-ES/component/infinite-scroll

Añade la directiva v-infinite-scroll a una lista para ejecutar automáticamente el método load al llegar al final. El contador se incrementa en 2 cada vez que se dispara la carga.

```vue
<template>
  <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
    <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
  </ul>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref(0)
const load = () => {
  count.value += 2
}
</script>

<style>
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
</style>
```

--------------------------------

### Month range picker with default and quick options (Vue)

Source: https://element-plus.org/es-ES/component/date-picker

This example shows two `el-date-picker` components with `type="monthrange"`. The first is a default month range picker. The second includes quick selection shortcuts defined in the `shortcuts` array, and uses the `unlink-panels` attribute to allow independent panel year navigation. The `range-separator` is set to "To" and placeholders are "Start month" and "End month".

```HTML
<template>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">Default</span>
      <el-date-picker
        v-model="value1"
        type="monthrange"
        range-separator="To"
        start-placeholder="Start month"
        end-placeholder="End month"
      />
    </div>
    <div class="block">
      <span class="demonstration">With quick options</span>
      <el-date-picker
        v-model="value2"
        type="monthrange"
        unlink-panels
        range-separator="To"
        start-placeholder="Start month"
        end-placeholder="End month"
        :shortcuts="shortcuts"
      />
    </div>
  </div>
</template>
```

```JavaScript
<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('')

const shortcuts = [
  {
    text: 'This month',
    value: [new Date(), new Date()],
  },
  {
    text: 'This year',
    value: () => {
      const end = new Date()
      const start = new Date(new Date().getFullYear(), 0)
      return [start, end]
    },
  },
  {
    text: 'Last 6 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 6)
      return [start, end]
    },
  },
]
</script>
```

```CSS
<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 1.5rem 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
  min-width: 300px;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 1rem;
}

@media screen and (max-width: 768px) {
  .demo-date-picker .block {
    flex: 0 0 100%;
    padding: 1rem 0;
    min-width: auto;
    border-right: none;
    border-bottom: solid 1px var(--el-border-color);
  }

  .demo-date-picker .block:last-child {
    border-bottom: none;
  }
}
</style>
```
Tokens:
Raw