### Defining Text Input Template using Element Plus (Vue)

Source: https://github.com/sonicrang/my_component/blob/main/my_components.md

Defines the template for a basic text input field using Element Plus's el-input. It binds to `inputValue`, accepts a `placeholder` prop, and enables clearable functionality. It uses a flat design class.

```Vue
<template>
  <el-input
    v-model="inputValue"
    class="flat-input"
    :placeholder="placeholder"
    clearable
  />
</template>
```

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

### Defining Red Button Template using Element Plus (Vue)

Source: https://github.com/sonicrang/my_component/blob/main/my_components.md

Defines the template for a styled button component using Element Plus's el-button. It applies a 'flat-red-button' class for styling, binds the button type to a `type` prop, and emits a 'click' event when clicked. It uses a slot for custom button content, defaulting to '按钮'.

```Vue
<template>
  <el-button
    class="flat-red-button"
    :type="type"
    @click="$emit('click')"
  >
    <slot>按钮</slot>
  </el-button>
</template>
```

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

### Defining Datetime Picker Template using Element Plus (Vue)

Source: https://github.com/sonicrang/my_component/blob/main/my_components.md

Defines the template for a datetime picker component using Element Plus's el-date-picker. It binds to `dateTimeValue`, accepts a `placeholder` prop, and specifies the display and value formats as 'YYYY-MM-DD HH:mm:ss'. It uses a flat design class.

```Vue
<template>
  <el-date-picker
    v-model="dateTimeValue"
    class="flat-input"
    type="datetime"
    :placeholder="placeholder"
    format="YYYY-MM-DD HH:mm:ss"
    value-format="YYYY-MM-DD HH:mm:ss"
  />
</template>
```

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

### Defining Select Input Template using Element Plus (Vue)

Source: https://github.com/sonicrang/my_component/blob/main/my_components.md

Defines the template for a customizable select dropdown component using Element Plus's el-select. It binds to `selectedValue`, accepts `placeholder`, `multiple`, and `clearable` props. It iterates over an `options` array to generate el-option elements for each item.

```Vue
<template>
  <el-select
    v-model="selectedValue"
    class="flat-select"
    :placeholder="placeholder"
    :multiple="multiple"
    :clearable="clearable"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>
```

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

### Defining Address Selector Template using Element Plus (Vue)

Source: https://github.com/sonicrang/my_component/blob/main/my_components.md

Defines the template structure for a cascading address selector component using Element Plus's el-cascader. It binds to `selectedAddress`, uses `addressOptions` for data, and handles changes with `handleAddressChange`. It supports hover trigger, clearable selection, and has a flat design class.

```Vue
<template>
  <div class="address-selector">
    <el-cascader
      v-model="selectedAddress"
      :options="addressOptions"
      :props="{ expandTrigger: 'hover' }"
      class="flat-select"
      placeholder="请选择地址"
      clearable
      @change="handleAddressChange"
    />
  </div>
</template>
```

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

### Defining Person Selector Template using Element Plus (Vue)

Source: https://github.com/sonicrang/my_component/blob/main/my_components.md

Defines the template for a multi-select person selector component using Element Plus's el-cascader. It binds to `selectedPersons`, uses `personOptions` for data, and is configured for multiple selection, hover trigger, strict checking, and not emitting the full path. It includes a placeholder and clearable functionality.

```Vue
<template>
  <div class="person-selector">
    <el-cascader
      v-model="selectedPersons"
      :options="personOptions"
      :props="{
        expandTrigger: 'hover',
        multiple: true,
        emitPath: false,
        checkStrictly: true
      }"
      class="flat-select"
      placeholder="选择部门/人员"
      clearable
    />
  </div>
</template>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.