### Tooltip Usage Examples

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/tooltip.md

Examples demonstrating how to use the Tooltip component with different configurations.

```APIDOC
## Tooltip Usage Examples

### Example 1: Tooltip with Popper Class

This example shows how to apply a custom CSS class to the tooltip's popper element.

```html
<template>
  <lay-tooltip content="popperClass 边框红色" trigger="click" popperClass="custom-popper-class" >
    <lay-button>popperClass 边框红色</lay-button>
  </lay-tooltip>
</template>
```

### Example 2: Tooltip with Popper Style

This example demonstrates applying inline styles to the tooltip's popper element.

```html
<template>
  <lay-tooltip content="popperStyle 字体红色" popperStyle="color: red;" >
    <lay-button>popperStyle 字体红色</lay-button>
  </lay-tooltip>
</template>
```
```

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

### Install Layui Vue with npm

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/guide/getStarted.md

Use npm to install the layui-vue package. If installation is slow, consider using pnpm or an alternative mirror source.

```bash
npm install @layui/layui-vue --save
```

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

### Install Auto-Import Plugins

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/guide/getStarted.md

Install the necessary plugins for automatic component and auto-import functionality.

```bash
npm install -D @layui/unplugin-vue-components unplugin-auto-import
```

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

### Install Icon Package

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/icon.md

Install the @layui/icons-vue package to access individual icon components.

```bash
npm install @layui/icons-vue
```

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

### Install Layui Vue via Package Managers

Source: https://context7.com/lunar-landing/layui-vue/llms.txt

Use npm, yarn, or pnpm to install the main package into your project.

```bash
# 安装主包
npm install @layui/layui-vue

# 或使用 yarn
yarn add @layui/layui-vue

# 或使用 pnpm
pnpm add @layui/layui-vue
```

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

### Basic Tab Example

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/tab.md

A simple example demonstrating the basic usage of the Layui-Vue Tab component.

```APIDOC
## POST /api/users

### Description
Creates a new user in the system.

### Method
POST

### Endpoint
`/api/users`

### Parameters
#### Request Body
- **username** (string) - Required - The username for the new user.
- **email** (string) - Required - The email address for the new user.
- **password** (string) - Required - The password for the new user.

### Request Example
```json
{
  "username": "johndoe",
  "email": "john.doe@example.com",
  "password": "securepassword123"
}
```

### Response
#### Success Response (201)
- **id** (string) - The unique identifier for the newly created user.
- **username** (string) - The username of the created user.
- **email** (string) - The email address of the created user.

#### Response Example
```json
{
  "id": "user-12345",
  "username": "johndoe",
  "email": "john.doe@example.com"
}
```
```

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

### Basic Menu Structure

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/menu.md

Demonstrates a basic Layui-Vue menu with selected key and open keys configuration. Ensure 'vue' is installed.

```vue
<template>
  <lay-menu v-model:selected-key="selectedKey" v-model:open-keys="openKeys4">
    <lay-menu-item id="1">
      <router-link to="">
        <lay-icon type="layui-icon-home"></lay-icon> 
        首页
      </router-link>
    </lay-menu-item>
    <lay-sub-menu id="7">
        <template v-slot:title> 
          <router-link to="">
            <lay-icon type="layui-icon-home"></lay-icon> 
            目录
          </router-link>
        </template>
        <lay-menu-item id="8">
            <router-link to="">
              <lay-icon type="layui-icon-home"></lay-icon> 
              菜单
            </router-link>
        </lay-menu-item> 
        <lay-menu-item id="9">
            <router-link to="">
              <lay-icon type="layui-icon-home"></lay-icon> 
              菜单
            </router-link>
        </lay-menu-item>
    </lay-sub-menu> 
  </lay-menu>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    const openKeys4 = ref(["7"])
    const selectedKey = ref("5")

    return {
      openKeys4,
      selectedKey
    }
  }
}
</script>
```

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

### Install Independent Layer Package

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/layer.md

Instructions for installing and configuring the standalone layer package for use with other component libraries.

```bash
npm install @layui/layer-vue
```

```js
import { createApp } from "vue";
import layer from "@layui/layer-vue";
import "@layui/layer-vue/lib/index.css";
import App from "./App.vue";

const app = createApp(App);
app.use(layer);
app.mount("#app");
```

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

### Layui-Vue Tree Component Examples

Source: https://context7.com/lunar-landing/layui-vue/llms.txt

Illustrates the lay-tree component for displaying hierarchical data. Includes basic tree structure, trees with checkboxes, and trees with lazy loading capabilities. Requires 'vue' setup.

```vue
<template>
  <lay-space>
    <!-- 基础树形 -->
    <lay-tree
      :data="treeData"
      v-model:selected-key="selectedKey"
      :default-expand-all="true"
      @node-click="handleNodeClick"
    ></lay-tree>

    <!-- 带复选框的树 -->
    <lay-tree
      :data="treeData"
      :show-checkbox="true"
      v-model:checked-keys="checkedKeys"
      @check-change="handleCheckChange"
    ></lay-tree>

    <!-- 懒加载树 -->
    <lay-tree
      :data="lazyTreeData"
      lazy
      :load="loadChildren"
      :default-expand-all="true"
    ></lay-tree>
  </lay-space>
</template>

<script setup>
import { ref } from 'vue'

const selectedKey = ref(1)
const checkedKeys = ref([])

const treeData = ref([
  {
    id: 1,
    title: '一级节点 1',
    spread: true,
    children: [
      {
        id: 11,
        title: '二级节点 1-1',
        children: [
          { id: 111, title: '三级节点 1-1-1' },
          { id: 112, title: '三级节点 1-1-2' }
        ]
      },
      {
        id: 12,
        title: '二级节点 1-2',
        disabled: true,
        children: [
          { id: 121, title: '三级节点 1-2-1' }
        ]
      }
    ]
  },
  {
    id: 2,
    title: '一级节点 2',
    children: [
      { id: 21, title: '二级节点 2-1' },
      { id: 22, title: '二级节点 2-2' }
    ]
  }
])

const lazyTreeData = ref([
  { id: 1, title: '懒加载节点 1' },
  { id: 2, title: '懒加载节点 2' }
])

const handleNodeClick = (node) => {
  console.log('点击节点:', node)
}

const handleCheckChange = (node, checked) => {
  console.log('选中变化:', node, checked)
}

// 懒加载子节点
const loadChildren = (node, resolve) => {
  setTimeout(() => {
    if (node.id === 1) {
      resolve([
        { id: 11, title: '子节点 1-1' },
        { id: 12, title: '子节点 1-2' }
      ])
    } else {
      resolve([])
    }
  }, 1000)
}
</script>
```

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

### beforeUpload Hook Example

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/upload.md

Example of using the `beforeUpload` hook to validate files before uploading.

```APIDOC
## POST /api/upload (Example)

### Description
This example demonstrates how to use the `beforeUpload` hook to prevent files larger than 1000 KB from being uploaded.

### Method
POST

### Endpoint
`/api/upload`

### Parameters
#### Query Parameters
None

#### Request Body
None (handled by the component)

### Request Example
```json
{
  "file": "<file_content>"
}
```

### Response
#### Success Response (200)
- **data** (object) - Upload result details

#### Response Example
```json
{
  "data": "{\"url\": \"http://example.com/file.jpg\"}"
}
```

### Error Handling
- **400 Bad Request**: Invalid file format or size.
- **500 Internal Server Error**: Server-side upload failure.
```

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

### TagInput Setup

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/tagInput.md

Basic setup for the TagInput component using Vue's Composition API. Initializes reactive data for tags and input values.

```javascript
export default {
  setup() {
    const data7 = ref(['标签1','标签2']);
    const inputValue7 = ref("");

    return {
      data7,
      inputValue7
    }
  }
}
```

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

### Online Installation with CDN

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/guide/getStarted.md

Include Layui Vue using a CDN provider, demonstrated here with unpkg. This method allows for quick integration without a build process.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="//unpkg.com/@layui/layui-vue/lib/index.css" />
    <script src="//unpkg.com/vue@3"></script>
    <script src="//unpkg.com/@layui/layui-vue"></script>
</head>
<body>
    <div id="app">
        <lay-button type="primary">{{ message }}</lay-button>
    </div>
    <script>
        const App = {
            data() {
                return {
                    message: "Hello World"
                };
            },
        };
        const app = Vue.createApp(App);
        app.use(LayuiVue);
        app.mount("#app");
    </script>
</body>
</html>
```

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

### Tab Position and Type Configuration

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/tab.md

Example showing how to change the tab position and type.

```APIDOC
## DELETE /api/products/{productId}

### Description
Deletes a specific product from the system.

### Method
DELETE

### Endpoint
`/api/products/{productId}`

### Parameters
#### Path Parameters
- **productId** (string) - Required - The unique identifier of the product to delete.

### Response
#### Success Response (204)
No content is returned on successful deletion.

#### Response Example
(No content)
```

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

### Basic Usage of Layui-Vue Loading

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/loading.md

Demonstrates how to use the `lay-loading` component with different types. No specific setup is required beyond importing the component.

```vue
<template>
    <lay-loading></lay-loading>
    <hr />
    <lay-loading :type="1"></lay-loading>
    <hr />
    <lay-loading :type="2"></lay-loading>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    return {
    }
  }
}
</script>
```

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

### Nested Drawer Example

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/drawer.md

Demonstrates how to open a new drawer from within an existing one to handle multi-step processes. Ensure proper `v-model` binding for each drawer.

```html
<template>
  <lay-button @click="changeVisible1" type="primary">打开</lay-button>
  <lay-layer type="drawer" v-model="visible1" title="标题">
      <lay-button @click="changeVisible2" type="primary" style="margin:10px;">打开</lay-button>
      <lay-layer type="drawer" area="200px" v-model="visible2" title="标题">
      内容
      </lay-layer>
  </lay-layer>
</template>
```

```javascript
import { ref } from 'vue'

export default {
  setup() {
    const visible1 = ref(false)
    const changeVisible1 = function() {
        visible1.value = !visible1.value;
    }
    const visible2 = ref(false)
    const changeVisible2 = function() {
        visible2.value = !visible2.value;
    }
    return {
        visible1,
        visible2,
        changeVisible1,
        changeVisible2
    }
  }
}
```

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

### Basic Notice Bar Usage

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/noticeBar.md

Displays a simple notice bar with text. No specific setup is required beyond including the component.

```html
<template>
    <lay-notice-bar text="以创造性的行为实践于人世。若能以写作为工具，为道途，先帮助自己一程，再以领悟帮助他人一程。这是一种服务。"></lay-notice-bar>
</template>
```

```javascript
export default {
  setup() {

    return {
    }
  }
}
```

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

### Form Submission and Validation Example

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/form.md

Demonstrates how to submit a form and handle validation results using Layui Vue's form component.

```APIDOC
## POST /api/submit-form

### Description
This endpoint handles the submission of form data and provides validation results.

### Method
POST

### Endpoint
/api/submit-form

### Parameters
#### Request Body
- **model** (object) - Required - The form data model.
- **errors** (object) - Required - Validation errors, if any.

### Request Example
```json
{
  "model": {
    "specialty": {
      "x": [
        {
          "y": "1"
        }
      ]
    },
    "aaaaaaaaa": "aaaaa"
  },
  "errors": {}
}
```

### Response
#### Success Response (200)
- **message** (string) - A confirmation message.

#### Response Example
```json
{
  "message": "Form submitted successfully"
}
```
```

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

### Upload Component Basic Usage

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/upload.md

Demonstrates the basic setup for the layui-vue Upload component, including how to define a preview slot and handle upload completion.

```javascript
const getFileDone=(res)=>{
  console.log("getFileDone",res);
};
```

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

### Layui-Vue Menu Component Example

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/menu.md

Demonstrates a configurable menu component with nested items, theme switching, and collapse functionality. Ensure the necessary Vue and Layui-Vue imports are present.

```html
<template>
  <lay-switch v-model="collapse20"></lay-switch>&nbsp;&nbsp;
  <lay-switch v-model="active20">
    <template #onswitch-icon>亮</template>
    <template #unswitch-icon>黑</template>
  </lay-switch>
  <br/>
  <br/>
  <lay-menu v-model:selected-key="selectedKey20" :theme="active20 ? 'dark' : 'light'" v-model:tree="isTree20" v-model:open-keys="openKeys20" :collapse="collapse20">
    <lay-menu-item id="1">
        <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon> 
        </template>
        <template #title>
          首页
        </template>
    </lay-menu-item>
    <lay-menu-item id="2">
        <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon> 
        </template>
        <template #title>
          首页
        </template>
    </lay-menu-item>
    <lay-sub-menu id="3">
      <template #icon><lay-icon type="layui-icon-home"></lay-icon></template>
      <template #title>  
        首页 
      </template>
      <lay-menu-item id="4">
        <template #title>首页</template>
      </lay-menu-item> 
      <lay-menu-item id="5">
        <template #title>菜单一</template>
      </lay-menu-item>
      <lay-sub-menu>
        <template #title>首页</template>
        <lay-menu-item id="7">
          <template #title>首页</template>
        </lay-menu-item> 
      </lay-sub-menu>
      <lay-sub-menu id="6">
        <template #title>首页</template>
        <lay-menu-item id="7">
          <template #title>首页</template>
        </lay-menu-item> 
        <lay-menu-item id="8">
          <template #title>首页</template>
        </lay-menu-item>
        <lay-sub-menu id="9">
          <template #title>首页</template>
          <lay-menu-item id="10">
            <template #title>首页</template>
          </lay-menu-item> 
          <lay-menu-item id="11">
            <template #title>首页</template>
          </lay-menu-item>
          <lay-menu-item id="12">
            <template #title>首页</template>
          </lay-menu-item>
        </lay-sub-menu>
      </lay-sub-menu>
    </lay-sub-menu>  
    <lay-sub-menu id="13">
        <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon> 
        </template>
        <template #title>
          首页
        </template>
        <lay-menu-item id="14">
                  <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon> 
        </template>
        <template #title>
          首页
        </template>
        </lay-menu-item> 
        <lay-menu-item id="15">
        <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon> 
        </template>
        <template #title>
          首页
        </template>
        </lay-menu-item>
        <lay-sub-menu id="16">
            <template #icon>
              <lay-icon type="layui-icon-home"></lay-icon> 
            </template>
            <template #title>
              首页
            </template>
            <lay-menu-item id="17">
                      <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon> 
        </template>
        <template #title>
          首页
        </template>
            </lay-menu-item> 
            <lay-menu-item id="18">
                      <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon> 
        </template>
        <template #title>
          首页
        </template>
            </lay-menu-item>
            <lay-sub-menu id="19">
              <template #icon>
                <lay-icon type="layui-icon-home"></lay-icon> 
              </template>
              <template #title>
              首页
              </template>
              <lay-menu-item id="20">
                        <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon> 
        </template>
        <template #title>
          首页
        </template>
              </lay-menu-item> 
              <lay-menu-item id="21">
                        <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon> 
        </template>
        <template #title>
          首页
        </template>
              </lay-menu-item>
              <lay-menu-item id="22">
                        <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon> 
        </template>
        <template #title>
          首页
        </template>
              </lay-menu-item>
          </lay-sub-menu>
        </lay-sub-menu>
    </lay-sub-menu> 
  </lay-menu>
</template>
```

```javascript
import { ref } from 'vue'

export default {
  setup() {

    const selectedKey20 = ref("5")
    const openKeys20 = ref(["7"])
    const collapse20 = ref(true)   
    const isTree20 = ref(true)
    const active20 = ref(true)
    return {
      selectedKey,
      openKeys6,
      colapse,
      isTree,
      active20
    }
  }
}
```

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

### Basic Badge Examples

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/badge.md

Demonstrates different ways to use the lay-badge component with various attributes like type, theme, color, and ripple effect.

```html
<lay-badge type="dot" theme="blue" ripple></lay-badge>
```

```html
<lay-badge type="dot" theme="black" ripple></lay-badge>
```

```html
<lay-badge type="dot" color="green"  ripple></lay-badge>
```

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

### Tab Component Setup

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/tab.md

Sets up the reactive state for the tab component, including the currently active tab, the array of tab items, and functions to handle tab changes and additions.

```javascript
import { ref } from 'vue'

export default {
  setup() {

    const current6 = ref('1')
    const change6 = function(id){
      alert(id)
    }

    const arr = ref([
      {id:'1', title:'选项一', closable: false},
      {id:'2', title:'选项二'},
      {id:'3', title:'选项三'}
    ])

    return {
      current6,
      arr
    }
  }
}
```

```javascript
import { ref } from 'vue'

export default {
  setup() {
    let index = 4;
    const current8 = ref('1')
    const arr2 = ref([
      {id:'1', title:'选项一', closable: false},
      {id:'2', title:'选项二'},
      {id:'3', title:'选项三'}
    ])
    const addTab = function(){
      index++;
      arr2.value.push({
        id: String(index), 
        title:'新选项卡' + index
      })
      current8.value = String(index);
    }

    return {
      arr2,
      addTab,
      current8
    }
  }
}
```

```javascript
import { ref } from 'vue'

export default {
  setup() {

    const current7 = ref("1");
    const tabPosition = ref("left");
    const tabType = ref("brief");

    return {
      current2,
      tabPosition,
      tabType
    }
  }
}
```

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

### Basic Container Usage

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/container.md

Use the basic lay-container component to wrap your content. This example demonstrates a standard container with a fixed width and height for visual demonstration.

```vue
<template>
  <lay-container>
    <div class="container-demo"></div>
  </lay-container>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    return {
    }
  }
}
</script>

<style>
    .container-demo {
        width:100%;
        height: 300px;
        background: #79C48C;
        border-radius: 2px;
    }
</style>
```

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

### LayTimeSelect Usage Example

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/timeSelect.md

Example of how to use the LayTimeSelect component in a Vue.js application.

```javascript
import { ref } from 'vue';

const time1 = ref('08:00:00');
const time2 = ref();
const time3 = ref();
const time4 = ref();
const time5 = ref();
const time6 = ref();

```

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

### Basic Usage

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/switch.md

Demonstrates the fundamental implementation of the switch component.

```APIDOC
## Basic Usage

### Description

This section shows how to use the `lay-switch` tag to create a basic switch.

### 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>
  <lay-switch v-model="active1"></lay-switch>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const active1 = ref(false);
    return {
        active1
    }
  }
}
</script>
```

### Response

N/A (Component Usage)

#### Success Response (200)

N/A

#### Response Example

N/A
```

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

### Cascader Data Structure Example

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/cascader.md

Example of the hierarchical data structure used for the options property in the Cascader component.

```javascript
{label: "横县", value: '450127'},
		]},
		{label: "柳州", value: '450200', children: [
			{label: "市辖区", value: '450201'},
			{label: "城中区", value: '450202'},
			{label: "鱼峰区", value: '450203'},
			{label: "柳南区", value: '450204'},
			{label: "柳北区", value: '450205'},
			{label: "柳江县", value: '450221'},
			{label: "鹿寨县", value: '450222'},
			{label: "融安县", value: '450223'},
			{label: "融水苗族自治县", value: '450224'},
			{label: "三江侗族自治县", value: '450225'},
		]},
		{label: "桂林", value: '450300', children: [
			{label: "市辖区", value: '450301'},
			{label: "秀峰区", value: '450302'},
			{label: "叠彩区", value: '450303'},
			{label: "象山区", value: '450304'},
			{label: "七星区", value: '450305'},
			{label: "雁山区", value: '450311'},
			{label: "临桂区", value: '450312'},
			{label: "阳朔县", value: '450321'},
			{label: "灵川县", value: '450322'},
			{label: "全州县", value: '450323'},
			{label: "兴安县", value: '450324'},
			{label: "永福县", value: '450325'},
			{label: "灌阳县", value: '450326'},
			{label: "龙胜各族自治县", value: '450327'},
			{label: "资源县", value: '450328'},
			{label: "平乐县", value: '450329'},
			{label: "荔浦县", value: '450330'},
			{label: "恭城瑶族自治县", value: '450331'},
		]},
	]}
```

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

### 克隆仓库

Source: https://github.com/lunar-landing/layui-vue/blob/master/CONTRIBUTING.md

将 fork 后的仓库克隆到本地并进入项目目录。

```bash
git clone https://gitee.com/your-username/layui-vue.git
cd layui-vue
```

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

### Initialize LayTimeSelect with Vue Composition API

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/timeSelect.md

Basic setup for using LayTimeSelect with reactive variables in a Vue 3 script setup block.

```vue
<script setup>
import { ref } from "vue";
const time1 = ref("08:00:00");
const time2 = ref();
const time3 = ref();
const time4 = ref();
const time5 = ref();
const time6 = ref();
</script>
```

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

### Open Layer with Multiple Callbacks

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/layer.md

Illustrates opening a layer and configuring numerous callbacks for various events, including success, end, close, beforeClose, moveStart, moving, moveEnd, resizeStart, resizing, and resizeEnd. This provides comprehensive control over the layer's lifecycle.

```javascript
const openCallback = () => {
    layer.open({
        title:"标题",
        content:"内容",
        maxmin: true,
        shade: false,
        min: (id) => {
            console.log(`最小化:${id}`)
        },
        full: (id) => {
            console.log(`最大化:${id}`)
        },
        revert: (id) => {
            console.log(`最小/最大化还原:${id}`)
        },
        success: (id) => {
            console.log(`成功:${id}`)
        },
        end: (id) => {
            console.log(`销毁:${id}`)
        },
        close: (id) => {
            console.log(`关闭:${id}`)
        },
        beforeClose: (id) => {
            console.log(`关闭前置:${id}`)
        },
        moveStart: (id) => {
            console.log(`拖拽开始:${id}`)
        },
        moving: (id, {top, left}) => {
            console.log(`拖拽中：${id}`)
        },
        moveEnd: (id) => {
            console.log(`拖拽结束:${id}`)
        },
        resizeStart: (id) => {
            console.log(`拉伸开始:${id}`)
        },
        resizing: (id, {width, height}) => {
            console.log(`拉伸中：${id}`)
        },
        resizeEnd: (id) => {
            console.log(`拉伸结束:${id}`)
        }
        })
}
```

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

### Tab with Nested Loops

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/tab.md

Example of using v-for to create tabs dynamically.

```APIDOC
## GET /api/products/{productId}

### Description
Retrieves details for a specific product.

### Method
GET

### Endpoint
`/api/products/{productId}`

### Parameters
#### Path Parameters
- **productId** (string) - Required - The unique identifier of the product to retrieve.

### Response
#### Success Response (200)
- **id** (string) - The unique identifier for the product.
- **name** (string) - The name of the product.
- **description** (string) - A description of the product.
- **price** (number) - The price of the product.

#### Response Example
```json
{
  "id": "prod-abcde",
  "name": "Example Widget",
  "description": "A high-quality widget for various uses.",
  "price": 19.99
}
```
```

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

### Layui Vue Select Component Examples

Source: https://context7.com/lunar-landing/layui-vue/llms.txt

Demonstrates various configurations of the lay-select component, including single selection, multiple selection, searchable input, rendering from options array, grouped options, and disabled state.

```vue
<template>
  <lay-space direction="vertical" fill>
    <!-- 基础单选 -->
    <lay-select v-model="single" placeholder="请选择">
      <lay-select-option :value="1" label="学习"></lay-select-option>
      <lay-select-option :value="2" label="编码"></lay-select-option>
      <lay-select-option :value="3" label="运动"></lay-select-option>
    </lay-select>

    <!-- 多选模式 -->
    <lay-select v-model="multiple" multiple allow-clear placeholder="请选择多项">
      <lay-select-option value="1" label="学习"></lay-select-option>
      <lay-select-option value="2" label="编码" disabled></lay-select-option>
      <lay-select-option value="3" label="运动"></lay-select-option>
      <lay-select-option value="4" label="唱歌"></lay-select-option>
      <lay-select-option value="5" label="跳舞"></lay-select-option>
    </lay-select>

    <!-- 开启搜索 -->
    <lay-select v-model="searchable" :show-search="true" placeholder="可搜索">
      <lay-select-option value="1" label="北京"></lay-select-option>
      <lay-select-option value="2" label="上海"></lay-select-option>
      <lay-select-option value="3" label="广州"></lay-select-option>
      <lay-select-option value="4" label="深圳"></lay-select-option>
    </lay-select>

    <!-- 使用 options 数据直接渲染 -->
    <lay-select v-model="optionsValue" :options="options"></lay-select>

    <!-- 分组选项 -->
    <lay-select v-model="grouped" placeholder="分组选择">
      <lay-select-option-group label="热门城市">
        <lay-select-option value="1" label="北京"></lay-select-option>
        <lay-select-option value="2" label="上海"></lay-select-option>
      </lay-select-option-group>
      <lay-select-option-group label="其他城市">
        <lay-select-option value="3" label="杭州"></lay-select-option>
        <lay-select-option value="4" label="南京"></lay-select-option>
      </lay-select-option-group>
    </lay-select>

    <!-- 禁用状态 -->
    <lay-select v-model="disabledValue" :disabled="true">
      <lay-select-option value="1" label="禁用选择"></lay-select-option>
    </lay-select>
  </lay-space>
</template>

<script setup>
import { ref } from 'vue'

const single = ref(null)
const multiple = ref([])
const searchable = ref(null)
const optionsValue = ref(1)
const grouped = ref(null)
const disabledValue = ref('1')

const options = ref([
  { label: '选项1', value: 1 },
  { label: '选项2', value: 2 },
  { label: '选项3', value: 3, disabled: true },
])
</script>
```

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

### Updated Icons

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/icon.md

Example of icons added in version 1.11.0 of layui-vue or 1.1.0 of icons-vue.

```vue
<template>
  <lay-icon type="layui-icon-help-circle" color="#009688"></lay-icon> &nbsp;
  <lay-icon type="layui-icon-tips-fill" color="#009688"></lay-icon> &nbsp;
  <lay-icon type="layui-icon-test" color="#009688"></lay-icon> &nbsp;
  <lay-icon type="layui-icon-clear" color="#009688"></lay-icon> &nbsp;
  <lay-icon type="layui-icon-keyboard" color="#009688"></lay-icon> &nbsp;
  <lay-icon type="layui-icon-backspace" color="#009688"></lay-icon> &nbsp;
  <lay-icon type="layui-icon-show" color="#009688"></lay-icon> &nbsp;  
  <lay-icon type="layui-icon-hide" color="#009688"></lay-icon> &nbsp;
  <lay-icon type="layui-icon-error" color="#009688"></lay-icon> &nbsp;
  <lay-icon type="layui-icon-success" color="#009688"></lay-icon> &nbsp;
  <lay-icon type="layui-icon-question" color="#009688"></lay-icon> &nbsp;
  <lay-icon type="layui-icon-lock" color="#009688"></lay-icon> &nbsp;  
  <lay-icon type="layui-icon-moon" color="#009688"></lay-icon> &nbsp;
  <lay-icon type="layui-icon-github" color="#009688"></lay-icon> &nbsp;
  <lay-icon type="layui-icon-disabled" color="#009688"></lay-icon> &nbsp;
  <lay-icon type="layui-icon-gitee" color="#009688"></lay-icon> &nbsp;
  <lay-icon type="layui-icon-eye-invisible" color="#009688"></lay-icon> &nbsp;
  <lay-icon type="layui-icon-eye" color="#009688"></lay-icon> &nbsp;
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    return {
    }
  }
}
</script>
```

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

### Basic Step Usage

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/step.md

Demonstrates the fundamental implementation of the step component with navigation buttons.

```vue
<template>
<div>
    <lay-step :active="active">
        <lay-step-item></lay-step-item>
        <lay-step-item></lay-step-item>
        <lay-step-item></lay-step-item>
        <lay-step-item></lay-step-item>
    </lay-step>
    <div style="margin-top: 10px">
        <lay-button size="xs" @click="previous">上一步</lay-button>
        <lay-button size="xs" @click="nexts">下一步</lay-button>
    </div>
</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const loading = ref(true);
    const active = ref(-1);
    const nexts = () => {
      if (active.value++ >=3) active.value = 0
    };
    const previous = () => {
      if (active.value-- ===0) active.value = 0
    };
    return {
        loading,
        active
    }
  }
}
</script>
```

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

### Badge Positioning Examples

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/badge.md

Illustrates different positioning options for badges, such as bottom-right, bottom-left, and top-left, when attached to an avatar.

```vue
<template>
    <lay-space :size="40">
     <lay-badge :value="valuePos">
      <lay-avatar></lay-avatar>
      </lay-badge>
      <lay-badge position="bottom-right" :value="valuePos">
      <lay-avatar></lay-avatar>
      </lay-badge>
        <lay-badge position="bottom-left" :value="valuePos">
      <lay-avatar></lay-avatar>
      </lay-badge>
        <lay-badge position="top-left" :value="valuePos">
      <lay-avatar></lay-avatar>
      </lay-badge>
      </lay-space>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const valuePos = ref(10)
    return {
      valuePos
    }
  }
}
</script>
```

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

### Comprehensive Layer Demonstration

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/layer.md

Demonstrates various layer types including Message, Confirm, Loading, Iframe, Drawer, Notify, Photos, and Prompt.

```vue
<template>
    <lay-button type="primary" @click="openMsg">普通消息</lay-button>
    <lay-button type="primary" @click="openSuccess">成功消息</lay-button>
    <lay-button type="primary" @click="openLoad">全局加载</lay-button>
    <lay-button type="primary" @click="openConfirm">确认框</lay-button>
    <lay-button type="primary" @click="openPage">模态框</lay-button>
    <lay-button type="primary" @click="openIframe">Iframe 层</lay-button>
    <lay-button type="primary" @click="openDrawer">抽屉</lay-button>
    <lay-button type="primary" @click="openNotify">通知</lay-button>
    <lay-button type="primary" @click="openPhotos">相册</lay-button>
    <lay-button type="primary" @click="openPrompt">输入层</lay-button>
</template>

<script setup>
import { layer } from "@layui/layui-vue"
import { reactive, h, resolveComponent } from 'vue'

const openMsg = function() {
    layer.msg("普通消息", { time: 1000 })
}

const openSuccess = function() {
    layer.msg("成功消息", { time: 1000, icon: 1 })
}

const openConfirm = function() {
    layer.confirm("layui-vue 1.0.0 已经发布")
}

const openLoad = function() {
    layer.load(0, { time: 1000 })
}

const openIframe = function() {
    layer.open({
        type: "iframe",
        title: "远程页面",
        area: ['90%','90%'],
        content: "https://www.layui-vue.com"
    })
}

const openNotify = function() {
    layer.notify({
      title:"标题",
      content:"默认就是右上，也是用得最多的"
    })
}

const openPhotos = function() {
    layer.photos({
      imgList:[
            {
                src:'https://portrait.gitee.com/uploads/avatars/namespace/2849/8547475_layui-vue_1645856954.png',
                alt:'layui.png'
            }
        ]
    })
}

 const openDrawer = function() {
    layer.drawer({
        title: "标题",
        content: "内容"
    })
}

const Children = resolveComponent('Children')

const openPageData = reactive({
    remark: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。"
})

const openPage = function() {
    layer.open({
        type: "page",
        title: h("div", { style: "color: #f00; pointer-events: none;" }, "组件页面"),
        content: h(Children, { data: openPageData }),
        footer: h("div", { style: "color: #0f0; pointer-events: none;" }, "组件底部")
    })
}

const openPrompt = function() {
    layer.prompt({
        title: "请输入密码",
        formType: "password",
        value: "123",
        maxLength: 32,
        yes (layero, data) {
            layer.msg("你输入了：" + data);
            layer.close(layero);
        }
    });

    layer.prompt({
        title: "输入内容",
        formType: "textarea",
        value: "SomeContent",
        btn: [
            {
                text: "Click me!", callback(layero, data) {
                    console.log(layero, data);
                    layer.msg(data);
                }
            }
        ]
    });
}
</script>
```

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

### Breadcrumb with Custom Separator

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/breadcrumb.md

Customize the separator between breadcrumb items using the `separator` attribute. This example uses a '>' character.

```vue
<template>
    <lay-breadcrumb separator=">">
        <lay-breadcrumb-item title="热门音乐"></lay-breadcrumb-item>
        <lay-breadcrumb-item title="王杰"></lay-breadcrumb-item>
        <lay-breadcrumb-item title="谁明浪子心"></lay-breadcrumb-item>
    </lay-breadcrumb>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    return {
    }
  }
}
</script>
```

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

### Grid Responsiveness

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/grid.md

Explains how to make grid layouts responsive using different column sizes for various screen sizes.

```APIDOC
## Grid Responsiveness

### Description

This section details how to create responsive grid layouts by applying different column sizes (`xs`, `sm`, `md`, `lg`) to `lay-col` components, allowing the layout to adapt to different screen sizes.

### Method

Component Usage

### Endpoint

N/A

### Parameters

#### Col Attributes (Responsive Sizes)

- **xs** (number | string) - Optional - Column size for extra-small screens (< 768px), range 0-24.
- **sm** (number | string) - Optional - Column size for small screens (≥ 768px), range 0-24.
- **md** (number | string) - Optional - Column size for medium screens (≥ 992px), range 0-24.
- **lg** (number | string) - Optional - Column size for large screens (≥ 1200px), range 0-24.

### Request Example

```html
<template>
  <lay-row space="10">
     <lay-col md="12" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
     <lay-col md="12" sm="12" xs="24"><div class="grid-demo">2</div></lay-col>
  </lay-row>
</template>
```

### Response

N/A (Component rendering)
```

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

### Create Message Windows

Source: https://github.com/lunar-landing/layui-vue/blob/master/docs/src/document/zh-CN/components/layer.md

Demonstrates creating various message windows using layer.msg with different icons and configurations.

```vue
<template>
    <lay-button type="primary" @click="openMsg1">成功消息</lay-button>
    <lay-button type="primary" @click="openMsg2">失败消息</lay-button>
    <lay-button type="primary" @click="openMsg3">警告消息</lay-button>
    <lay-button type="primary" @click="openMsg4">详情消息</lay-button>
    <lay-button type="primary" @click="openMsg5">哭脸消息</lay-button>
    <lay-button type="primary" @click="openMsg6">笑脸消息</lay-button>
    <lay-button type="primary" @click="openMsg7">警告消息</lay-button>
    <lay-button type="primary" @click="openMsg8">加载消息</lay-button>
</template>

<script setup>
import { layer } from "@layui/layui-vue";

const openMsg1 = function() {
    layer.msg("成功消息", { icon : 1, time: 1000})
}
const openMsg2 = function() {
    layer.msg("失败消息", { icon : 2, time: 1000})
}
const openMsg3 = function() {
    layer.msg("疑问消息", { icon : 3, time: 1000})
}
const openMsg4 = function() {
    layer.msg("详情消息", { icon : 4, time: 1000})
}
const openMsg5 = function() {
    layer.msg("哭脸图标", { icon : 5, time: 1000})
}
const openMsg6 = function() {
    layer.msg("笑脸图标", { icon : 6, time: 1000})
}
const openMsg7 = function() {
    layer.msg("警告图标", { icon : 7, time: 1000})
}
const openMsg8 = function() {
    layer.msg("加载消息", { icon : 16, time: 1000})
}
</script>
```