### Element UI Select Component Examples (HTML/Vue)

Source: https://context7.com/yidianhengji/pit-element-ui-doc/llms.txt

Demonstrates various configurations of the Element UI Select component, including basic usage, clearable functionality, multiple selections, collapsed tags, filtering, remote search, and option grouping. This snippet requires Vue.js and Element UI to be installed.

```html
<template>
  <div>
    <!-- Basic Select -->
    <el-select v-model="value" placeholder="Select">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

    <!-- Clearable Select -->
    <el-select v-model="clearableValue" clearable placeholder="Clearable Select">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>

    <!-- Multiple Select -->
    <el-select v-model="multipleValue" multiple placeholder="Multiple Select">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>

    <!-- Multiple Select with Tags Collapsed -->
    <el-select v-model="collapsedValue" multiple collapse-tags placeholder="Collapsed Tags">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>

    <!-- Filterable Select -->
    <el-select v-model="filterValue" filterable placeholder="Filterable">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>

    <!-- Remote Search -->
    <el-select v-model="remoteValue" filterable remote reserve-keyword
      placeholder="Remote Search" :remote-method="remoteMethod" :loading="loading">
      <el-option v-for="item in remoteOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>

    <!-- Option Groups -->
    <el-select v-model="groupValue" placeholder="Grouped Options">
      <el-option-group v-for="group in groupedOptions" :key="group.label" :label="group.label">
        <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-option-group>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      clearableValue: '',
      multipleValue: [],
      collapsedValue: [],
      filterValue: '',
      remoteValue: '',
      groupValue: '',
      loading: false,
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3', disabled: true },
        { value: 'option4', label: 'Option 4' }
      ],
      remoteOptions: [],
      groupedOptions: [
        { label: 'Popular', options: [{ value: 'shanghai', label: 'Shanghai' }, { value: 'beijing', label: 'Beijing' }] },
        { label: 'Others', options: [{ value: 'chengdu', label: 'Chengdu' }, { value: 'shenzhen', label: 'Shenzhen' }] }
      ]
    }
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.remoteOptions = this.options.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
        }, 200);
      } else {
        this.remoteOptions = [];
      }
    }
  }
}
</script>
```

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

### Install and Configure babel-plugin-component for On-Demand Import (Bash/JSON)

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/quickstart.md

These snippets show the process of installing the babel-plugin-component and configuring it in a .babelrc file to enable on-demand importing of Element UI components. This method helps reduce the final bundle size by only including the components used in the project. The installation is done via npm, and the configuration is in JSON format.

```bash
npm install babel-plugin-component -D
```

```json
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
```

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

### Install Element UI Theme CLI Tool

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/custom-theme.md

Instructions for installing the `element-theme` CLI tool, which is useful for projects not using SCSS. It can be installed globally or locally, with local installation recommended for better project management. After installation, the `et` command becomes available.

```shell
npm i element-theme -g

# Install chalk theme from npm or GitHub
npm i element-theme-chalk -D
# or
npm i https://github.com/ElementUI/theme-chalk -D
```

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

### Install and Configure Element UI (JavaScript)

Source: https://context7.com/yidianhengji/pit-element-ui-doc/llms.txt

Installs Element UI via npm and configures it globally in a Vue application. It demonstrates both full import and global settings for component size and z-index.

```javascript
// Install via npm
// npm i pit-element-ui -S

// main.js - Full Import
import Vue from 'vue';
import ElementUI from 'pit-element-ui';
import 'pit-element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

// Global config: set default size and z-index for modals
Vue.use(ElementUI, { size: 'small', zIndex: 3000 });

new Vue({
  el: '#app',
  render: h => h(App)
});
```

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

### MessageBox Centered Content Example

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/message-box.md

An example demonstrating how to center the content within a MessageBox by setting the `center` option to `true`.

```APIDOC
## Centered Content

Content of MessageBox can be centered.

:::demo Setting `center` to `true` will center the content

```html
<template>
  <el-button type="text" @click="open">Click to open Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: 'Delete completed'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: 'Delete canceled'
          });
        });
      }
    }
  }
</script>
```
:::
```

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

### Centered Content Example

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/dialog.md

Demonstrates how to center the header and footer of a dialog using the `center` prop.

```APIDOC
## Centered Content

### Description
Dialog's content can be centered. Setting `center` to `true` will center dialog's header and footer horizontally. `center` only affects Dialog's header and footer. The body of Dialog can be anything, so sometimes it may not look good when centered. You need to write some CSS if you wish to center the body as well.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>

<el-dialog
  title="Warning"
  :visible.sync="centerDialogVisible"
  width="30%"
  center>
  <span>It should be noted that the content will not be aligned in center by default</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        centerDialogVisible: false
      };
    }
  };
</script>
```

### Response
#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### DatePicker with Shortcuts

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/date-picker.md

Shows how to configure shortcuts for the Element UI DatePicker, allowing users to quickly select predefined date ranges. This example includes shortcuts for 'today' and 'yesterday'.

```html
<template>
  <el-date-picker
    v-model="value3"
    type="date"
    placeholder="Pick a date"
    :picker-options="pickerOptions">
  </el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      value3: '',
      pickerOptions: {
        shortcuts: [
          {
            text: 'Today',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: 'Yesterday',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }
        ]
      }
    };
  }
};
</script>
```

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

### Nested Dialog Example

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/dialog.md

Demonstrates how to use nested dialogs by setting `append-to-body` to true on the inner dialog.

```APIDOC
## Nested Dialog

### Description
If a Dialog is nested in another Dialog, `append-to-body` is required. Normally we do not recommend using nested Dialog. If you need multiple Dialogs rendered on the page, you can simply flat them so that they're siblings to each other. If you must nest a Dialog inside another Dialog, set `append-to-body` of the nested Dialog to true, and it will append to body instead of its parent node, so both Dialogs can be correctly rendered.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<template>
  <el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>
  
  <el-dialog title="Outer Dialog" :visible.sync="outerVisible">
    <el-dialog
        width="30%"
        title="Inner Dialog"
        :visible.sync="innerVisible"
        append-to-body>
    </el-dialog>
    <div slot="footer" class="dialog-footer">
      <el-button @click="outerVisible = false">Cancel</el-button>
      <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        outerVisible: false,
        innerVisible: false
      };
    }
  }
</script>
```

### Response
#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### Basic Tabs Usage with Vue

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/tabs.md

Demonstrates the basic usage of Element UI Tabs, including how to set the active tab and handle tab clicks. It requires Vue.js and Element UI to be installed.

```html
<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'first'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>
```

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

### Basic ColorPicker Usage (Vue)

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/color-picker.md

Demonstrates the basic setup of the ColorPicker component, binding a string variable to v-model. It shows how to initialize with a default color or with no default value.

```html
<div class="block">
  <span class="demonstration">With default value</span>
  <el-color-picker v-model="color1"></el-color-picker>
</div>
<div class="block">
  <span class="demonstration">With no default value</span>
  <el-color-picker v-model="color2"></el-color-picker>
</div>

<script>
  export default {
    data() {
      return {
        color1: '#409EFF',
        color2: null
      }
    }
  };
</script>
```

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

### Fully Import Element UI in main.js (JavaScript)

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/quickstart.md

This snippet demonstrates how to import the entire Element UI library and its CSS into a Vue application's main JavaScript file. It's suitable for projects where bundle size is not a primary concern or for initial setup. Ensure 'pit-element-ui' is installed.

```javascript
import Vue from 'vue';
import ElementUI from 'pit-element-ui';
import 'pit-element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});
```

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

### Steps with Description

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/steps.md

Demonstrates how to add descriptions to each step.

```APIDOC
## Step Bar with Description

### Description

There is a description for each step. This is achieved by providing the `description` attribute to the `el-step` component.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Component Attributes (el-steps)

- **active** (number) - Required - The index of the current active step, starting from 0.

#### Component Attributes (el-step)

- **title** (string) - Required - The title of the step.
- **description** (string) - Optional - The description for the step.

### Request Example

```html
<el-steps :active="1">
  <el-step title="Step 1" description="Some description"></el-step>
  <el-step title="Step 2" description="Some description"></el-step>
  <el-step title="Step 3" description="Some description"></el-step>
</el-steps>
```

### Response

#### Success Response (N/A - Component Rendering)

N/A

#### Response Example

N/A
```

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

### Import Element UI with vue-i18n via CDN

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/i18n.md

This example demonstrates importing Vue, vue-i18n, Element UI, and multiple Element UI locales (Chinese and English) via CDN. It then configures vue-i18n to use these Element UI locales. This setup is suitable for projects requiring internationalization managed by vue-i18n.

```html
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<script src="//unpkg.com/element-ui"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>

<script>
  Vue.locale('en', ELEMENT.lang.en)
  Vue.locale('zh-cn', ELEMENT.lang.zhCN)
</script>
```

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

### Element UI Input Component Examples

Source: https://context7.com/yidianhengji/pit-element-ui-doc/llms.txt

Demonstrates various configurations of the Element UI Input component, including basic input, clearable input, password input, disabled input, inputs with prefix and suffix icons, textareas, auto-sizing textareas, inputs with character limits, inputs with prepend and append slots, and autocomplete functionality. Requires Element UI framework.

```html
<template>
  <div>
    <!-- Basic Input -->
    <el-input v-model="input" placeholder="Please input"></el-input>

    <!-- Input with Features -->
    <el-input v-model="clearableInput" placeholder="Clearable" clearable></el-input>
    <el-input v-model="password" placeholder="Password" show-password></el-input>
    <el-input v-model="disabled" placeholder="Disabled" disabled></el-input>

    <!-- Input with Icons -->
    <el-input v-model="iconInput" placeholder="Search" prefix-icon="el-icon-search"></el-input>
    <el-input v-model="dateInput" placeholder="Pick a date" suffix-icon="el-icon-date"></el-input>

    <!-- Textarea -->
    <el-input type="textarea" :rows="3" placeholder="Enter description" v-model="textarea"></el-input>

    <!-- Auto-sizing Textarea -->
    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" v-model="autoTextarea"></el-input>

    <!-- Input with Character Limit -->
    <el-input v-model="limitedInput" maxlength="20" show-word-limit></el-input>

    <!-- Mixed Input with Prepend/Append -->
    <el-input v-model="url" placeholder="domain">
      <template slot="prepend">https://</template>
      <template slot="append">.com</template>
    </el-input>

    <!-- Autocomplete -->
    <el-autocomplete
      v-model="searchQuery"
      :fetch-suggestions="querySearch"
      placeholder="Search"
      @select="handleSelect">
    </el-autocomplete>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      clearableInput: '',
      password: '',
      disabled: '',
      iconInput: '',
      dateInput: '',
      textarea: '',
      autoTextarea: '',
      limitedInput: '',
      url: '',
      searchQuery: '',
      suggestions: [
        { value: 'vue' }, { value: 'element' }, { value: 'vuex' }
      ]
    }
  },
  methods: {
    querySearch(queryString, cb) {
      const results = queryString
        ? this.suggestions.filter(item => item.value.toLowerCase().includes(queryString.toLowerCase()))
        : this.suggestions;
      cb(results);
    },
    handleSelect(item) {
      console.log('Selected:', item);
    }
  }
}
</script>
```

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

### Customizing Collapse Panel Titles with Slots (HTML)

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/collapse.md

Demonstrates how to customize the title of an El-Collapse-Item using the 'title' slot. This allows for the inclusion of custom HTML content, like icons, within the panel's header. The example shows a basic accordion setup with one item using a slot for its title.

```html
<el-collapse accordion>
  <el-collapse-item name="1">
    <template slot="title">
      Consistency<i class="header-icon el-icon-info"></i>
    </template>
    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
  </el-collapse-item>
  <el-collapse-item title="Feedback" name="2">
    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
  </el-collapse-item>
  <el-collapse-item title="Efficiency" name="3">
    <div>Simplify the process: keep operating process simple and intuitive;</div>
    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
  </el-collapse-item>
  <el-collapse-item title="Controllability" name="4">
    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
  </el-collapse-item>
</el-collapse>
```

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

### Element UI Pagination Component Examples

Source: https://context7.com/yidianhengji/pit-element-ui-doc/llms.txt

Illustrates different configurations of the Element UI Pagination component, including basic navigation, pagination with background, small size, full-featured layout with page size selection and jumper, and hiding the pagination when there's only one page. It shows how to handle page size and current page changes.

```html
<template>
  <div>
    <!-- Basic Pagination -->
    <el-pagination layout="prev, pager, next" :total="100"></el-pagination>

    <!-- Pagination with Background -->
    <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>

    <!-- Small Pagination -->
    <el-pagination small layout="prev, pager, next" :total="50"></el-pagination>

    <!-- Full Featured Pagination -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!-- Hide on Single Page -->
    <el-pagination layout="prev, pager, next" :total="5" :hide-on-single-page="true"></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 20,
      total: 400
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`${val} items per page`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`Current page: ${val}`);
    }
  }
}
</script>
```

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

### Simple Steps

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/steps.md

Shows how to apply a simple theme to the step bar. Attributes like 'align-center', 'description', 'direction', and 'space' are ignored in this theme.

```APIDOC
## Simple Step Bar

### Description

Simple step bars, where `align-center`, `description`, `direction` and `space` will be ignored. This theme is applied using the `simple` attribute.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Component Attributes (el-steps)

- **simple** (boolean) - Optional - Whether to apply the simple theme. Defaults to `false`.
- **active** (number) - Required - The index of the current active step, starting from 0.
- **finish-status** (string) - Optional - The status of completed steps. Accepted values: 'wait', 'process', 'finish', 'error', 'success'. Defaults to 'finish'.

#### Component Attributes (el-step)

- **title** (string) - Required - The title of the step.
- **icon** (string) - Optional - The class name of the step icon.

### Request Example

```html
<el-steps :space="200" :active="1" simple>
  <el-step title="Step 1" icon="el-icon-edit"></el-step>
  <el-step title="Step 2" icon="el-icon-upload"></el-step>
  <el-step title="Step 3" icon="el-icon-picture"></el-step>
</el-steps>

<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
  <el-step title="Step 1" ></el-step>
  <el-step title="Step 2" ></el-step>
  <el-step title="Step 3" ></el-step>
</el-steps>
```

### Response

#### Success Response (N/A - Component Rendering)

N/A

#### Response Example

N/A
```

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

### Element UI Upload Component Examples

Source: https://context7.com/yidianhengji/pit-element-ui-doc/llms.txt

Demonstrates various ways to use the Element UI Upload component, including basic file uploads, avatar uploads, photo walls, and drag-and-drop functionality. It covers event handling for preview, removal, success, error, and exceeding limits, as well as validation for avatar uploads.

```html
<template>
  <div>
    <!-- Basic Upload -->
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :limit="3"
      :on-exceed="handleExceed"
      :file-list="fileList">
      <el-button size="small" type="primary">Click to upload</el-button>
      <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
    </el-upload>

    <!-- Avatar Upload -->
    <el-upload
      class="avatar-uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

    <!-- Photo Wall (Picture Card) -->
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>

    <!-- Drag and Drop Upload -->
    <el-upload
      class="upload-dragger"
      drag
      action="https://jsonplaceholder.typicode.com/posts/"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [
        { name: 'food.jpeg', url: 'https://example.com/food.jpeg' }
      ],
      imageUrl: ''
    }
  },
  methods: {
    handlePreview(file) {
      console.log('Preview:', file);
    },
    handleRemove(file, fileList) {
      console.log('Removed:', file, fileList);
    },
    beforeRemove(file) {
      return this.$confirm(`Remove ${file.name}?`);
    },
    handleSuccess(response, file, fileList) {
      this.$message.success('Upload successful');
    },
    handleError(err, file, fileList) {
      this.$message.error('Upload failed');
    },
    handleExceed(files, fileList) {
      this.$message.warning(`Limit is 3 files, selected ${files.length}`);
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) this.$message.error('Avatar must be JPG format!');
      if (!isLt2M) this.$message.error('Avatar size cannot exceed 2MB!');
      return isJPG && isLt2M;
    },
    handlePictureCardPreview(file) {
      console.log('Picture preview:', file.url);
    }
  }
}
</script>
```

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

### Element UI Tree Basic Usage Example

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/tree.md

Demonstrates the basic structure and data binding for the Element UI Tree component. It displays a hierarchical dataset and logs node click events. No external dependencies are required beyond Element UI.

```html
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          label: 'Level one 1',
          children: [{
            label: 'Level two 1-1',
            children: [{
              label: 'Level three 1-1-1'
            }]
          }]
        }, {
          label: 'Level one 2',
          children: [{
            label: 'Level two 2-1',
            children: [{
              label: 'Level three 2-1-1'
            }]
          }, {
            label: 'Level two 2-2',
            children: [{
              label: 'Level three 2-2-1'
            }]
          }]
        }, {
          label: 'Level one 3',
          children: [{
            label: 'Level two 3-1',
            children: [{
              label: 'Level three 3-1-1'
            }]
          }, {
            label: 'Level two 3-2',
            children: [{
              label: 'Level three 3-2-1'
            }]
            
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>
```

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

### Element UI Date Range Picker: Setting Default Start and End Times

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/date-picker.md

Illustrates how to set default time values for the start and end dates when using the `daterange` type of the El-Date-Picker component. The `default-time` attribute accepts an array of two strings, specifying the time for the start date and the end date respectively. By default, these are set to '00:00:00'.

```html
<template>
  <div class="block">
    <p>Component value：{{ value }}</p>
    <el-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="Start date"
      end-placeholder="End date"
      :default-time="['00:00:00', '23:59:59']">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      };
    }
  };
</script>
```

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

### Basic Usage

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/steps.md

Demonstrates the basic usage of the el-steps component, including setting the active step and customizing the finish status.

```APIDOC
## Basic Usage

### Description

Demonstrates the basic usage of the el-steps component, including setting the active step and customizing the finish status.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Component Attributes (el-steps)

- **active** (number) - Required - The index of the current active step, starting from 0.
- **finish-status** (string) - Optional - The status of completed steps. Accepted values: 'wait', 'process', 'finish', 'error', 'success'. Defaults to 'finish'.
- **space** (number / string) - Optional - The fixed width of each step in pixels or percentage. Responsive if omitted.

#### Component Attributes (el-step)

- **title** (string) - Required - The title of the step.

### Request Example

```html
<el-steps :active="active" finish-status="success">
  <el-step title="Step 1"></el-step>
  <el-step title="Step 2"></el-step>
  <el-step title="Step 3"></el-step>
</el-steps>

<el-button style="margin-top: 12px;" @click="next">Next step</el-button>

<script>
  export default {
    data() {
      return {
        active: 0
      };
    },
    methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      }
    }
  }
</script>
```

### Response

#### Success Response (N/A - Component Rendering)

N/A

#### Response Example

N/A
```

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

### Configure Default Time for Date Range Picker (Vue)

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/datetime-picker.md

Demonstrates how to set default time values for the start and end dates when using the `datetimerange` type in Element Plus's `el-date-picker`. The `default-time` attribute accepts an array of strings, where the first element sets the start time and the second sets the end time. If only one value is provided, it applies to the start date.

```html
<template>
  <div class="block">
    <span class="demonstration">Start date time 12:00:00</span>
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-time="['12:00:00']">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      align="right"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-time="['12:00:00', '08:00:00']">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: '',
        value2: ''
      };
    }
  };
</script>
```

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

### Element UI TimeSelect: Fixed Time Range

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/time-picker.md

Allows selection of a start and end time from a fixed list. The end time selection is dynamically updated based on the chosen start time, using the `minTime` property within `picker-options`.

```html
<template>
  <el-time-select
    placeholder="Start time"
    v-model="startTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30'
    }">
  </el-time-select>
  <el-time-select
    placeholder="End time"
    v-model="endTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30',
      minTime: startTime
    }">
  </el-time-select>
</template>

<script>
  export default {
    data() {
      return {
        startTime: '',
        endTime: ''
      };
    }
  }
</script>
```

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

### Full On-Demand Import of All Element UI Components (JavaScript)

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/quickstart.md

This comprehensive JavaScript example shows how to import and register nearly all available Element UI components and plugins individually using Vue.use() or Vue.prototype. This is typically done in a main.js file and is useful for projects that utilize a wide range of Element UI features, though it can increase initial load times if not managed carefully.

```javascript
import Vue from 'vue';
import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Timeline,
  TimelineItem,
  Link,
  Divider,
  Image,
  Calendar,
  Backtop,
  PageHeader,
  CascaderPanel,
  Loading,
  MessageBox,
  Message,
  Notification
} from 'element-ui';

Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(CascaderPanel);

Vue.use(Loading.directive);

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
```

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

### Element UI Result Customized Content Example

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/result.md

Shows how to customize the content of the Element UI Result component. This example uses a custom icon via the 'icon' slot and custom content in the 'extra' slot, displaying a 404 error message.

```html
<el-result title="404" subTitle="Sorry, request error">
  <template slot="icon">
    <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
  </template>
  <template slot="extra">
    <el-button type="primary" size="medium">Back</el-button>
  </template>
</el-result>
```

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

### Element UI Fullscreen Loading Singleton Behavior

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/loading.md

Illustrates the singleton pattern for fullscreen loading in Element UI. If multiple fullscreen loading services are invoked before the existing one is closed, the same instance is returned. This ensures only one fullscreen loader is active at a time.

```javascript
let loadingInstance1 = Loading.service({ fullscreen: true });
let loadingInstance2 = Loading.service({ fullscreen: true });

console.log(loadingInstance1 === loadingInstance2); // Output: true

// Closing either instance will close the single fullscreen loader.
```

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

### Element UI Brand Color Display Example

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/color.md

This example demonstrates how to display the primary brand color of Element UI within a Vue component. It utilizes the `tintColor` function to generate lighter shades of the primary color for visual effect and displays the hex value.

```html
<el-row :gutter="12">
  <el-col :span="10" :xs="{span: 12}">
    <div 
      class="demo-color-box"
      :style="{ background: primary }"
    >
      Brand Color<div class="value">#409EFF</div>
    <div 
      class="bg-color-sub"
      :style="{ background: tintColor(primary, 0.9) }"
    >
    <div 
      class="bg-blue-sub-item" 
      v-for="(item, key) in Array(8)"
      :key="key"
      :style="{ background: tintColor(primary, (key + 1) / 10) }"
        >
    </div>
    </div>
    </div>
  </el-col>
</el-row>
```

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

### Element UI Button Component Examples (HTML)

Source: https://context7.com/yidianhengji/pit-element-ui-doc/llms.txt

Demonstrates various ways to use the Element UI Button component, including different types, variants, sizes, loading states, disabled states, and button groups. It also shows icon integration.

```html
<template>
  <div>
    <!-- Button Types -->
    <el-row>
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="text">Text Button</el-button>
    </el-row>

    <!-- Button Variants -->
    <el-row>
      <el-button type="primary" plain>Plain</el-button>
      <el-button type="primary" round>Round</el-button>
      <el-button type="primary" icon="el-icon-search" circle></el-button>
      <el-button type="primary" :loading="isLoading">Loading</el-button>
      <el-button type="primary" disabled>Disabled</el-button>
    </el-row>

    <!-- Button Sizes -->
    <el-row>
      <el-button size="medium">Medium</el-button>
      <el-button size="small">Small</el-button>
      <el-button size="mini">Mini</el-button>
    </el-row>

    <!-- Button Group -->
    <el-button-group>
      <el-button type="primary" icon="el-icon-arrow-left">Previous</el-button>
      <el-button type="primary">Next<i class="el-icon-arrow-right el-icon-right"></i></el-button>
    </el-button-group>

    <!-- Icon Buttons -->
    <el-button type="primary" icon="el-icon-edit"></el-button>
    <el-button type="primary" icon="el-icon-search">Search</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  }
}
</script>
```

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

### Element UI Tooltip Basic Usage with 9 Placements

Source: https://github.com/yidianhengji/pit-element-ui-doc/blob/main/docs/en-US/tooltip.md

Demonstrates the basic usage of the Element UI Tooltip component, showcasing all 9 available placements (top-start, top, top-end, left-start, left, left-end, right-start, right, right-end, bottom-start, bottom, bottom-end). It utilizes the `content` attribute for prompt information and the `placement` attribute to control the tooltip's position relative to the hovered element. The example also includes basic styling for layout.

```html
<div class="box">
  <div class="top">
    <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">
      <el-button>top-start</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">
      <el-button>top</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">
      <el-button>top-end</el-button>
    </el-tooltip>
  </div>
  <div class="left">
    <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">
      <el-button>left-start</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">
      <el-button>left</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">
      <el-button>left-end</el-button>
    </el-tooltip>
  </div>

  <div class="right">
    <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">
      <el-button>right-start</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">
      <el-button>right</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">
      <el-button>right-end</el-button>
    </el-tooltip>
  </div>
  <div class="bottom">
    <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
      <el-button>bottom-start</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">
      <el-button>bottom</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
      <el-button>bottom-end</el-button>
    </el-tooltip>
  </div>
</div>

<style>
  .box {
    width: 400px;

    .top {
      text-align: center;
    }

    .left {
      float: left;
      width: 110px;
    }

    .right {
      float: right;
      width: 110px;
    }

    .bottom {
      clear: both;
      text-align: center;
    }

    .item {
      margin: 4px;
    }

    .left .el-tooltip__popper,
    .right .el-tooltip__popper {
      padding: 8px 10px;
    }

    .el-button {
      width: 110px;
    }
  }
</style>
```