Layui Vue3

When to use this skill

Use this skill whenever the user wants to:

• Install and set up Layui Vue in a Vue 3 project
• Use Layui Vue components (Button, Table, DatePicker, etc.)
• Configure Layui Vue (theme, i18n, etc.)
• Use Layer component for modals and dialogs
• Implement forms with Layui Vue components
• Use data tables with sorting and pagination
• Handle file uploads
• Create dropdowns and tooltips
• Use date and time pickers
• Customize component styles
• Understand Layui Vue API and methods
• Troubleshoot Layui Vue issues

How to use this skill

1. Identify the topic from the user's request and find the corresponding example file in the mapping below

2. Load the appropriate example file from the examples/ directory

3. Follow the specific instructions in that example file for syntax, structure, and best practices

Doc mapping (one-to-one with https://www.layui-vue.com/zh-CN/)

Guide (指南):

• examples/getting-started.md → https://www.layui-vue.com/zh-CN/index
• examples/introduce.md → https://www.layui-vue.com/zh-CN/guide/introduce

Components (组件) - examples/components/:

• See component files in examples/components/ directory
• Each component file maps to https://www.layui-vue.com/zh-CN/components/[component-name]

Important Notes:

• Layui Vue is built for Vue 3
• Components use Composition API
• Supports TypeScript
• Examples include both JavaScript and TypeScript versions
• Each example file includes key concepts, code examples, and key points

4. Reference API documentation in the api/ directory when needed:

• api/layer-api.md - Layer API methods
• api/component-api.md - Component API reference

5. Use templates from the templates/ directory:

• templates/installation.md - Installation templates
• templates/component-usage.md - Component usage templates

1. Understanding Layui Vue

Layui Vue is a Vue 3 component library that provides a rich set of UI components, following the design philosophy of Layui.

Key Concepts:

• Vue 3 Support: Built with Vue 3 Composition API
• Rich Components: Button, Table, DatePicker, Layer, etc.
• TypeScript: Full TypeScript support
• Theme Customization: Support for theme customization
• i18n: Internationalization support

2. Installation

Using npm:

npm install @layui/layui-vue

Using yarn:

yarn add @layui/layui-vue

Using pnpm:

pnpm add @layui/layui-vue

3. Basic Setup

// main.js
import { createApp } from 'vue'
import LayuiVue from '@layui/layui-vue'
import '@layui/layui-vue/lib/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(LayuiVue)
app.mount('#app')

4. Basic Component Usage

<template>
  <lay-button type="primary">Button</lay-button>
</template>

<script setup>
import { LayButton } from '@layui/layui-vue'
</script>

Examples and Templates

This skill includes detailed examples organized to match the official documentation structure. All examples are in the examples/ directory (see mapping above).

To use examples:

• Identify the topic from the user's request
• Load the appropriate example file from the mapping above
• Follow the instructions, syntax, and best practices in that file
• Adapt the code examples to your specific use case

To use templates:

• Reference templates in templates/ directory for common scaffolding
• Adapt templates to your specific needs and coding style

API Reference

Detailed API documentation is available in the api/ directory, organized to match the official Layui Vue API documentation structure:

Layer API (api/layer-api.md)

• layer.open() - Open modal/dialog
• layer.close() - Close layer
• layer.msg() - Show message
• layer.confirm() - Show confirmation dialog
• layer.load() - Show loading
• layer.drawer() - Show drawer

Component API (api/component-api.md)

• Component props and events
• Component methods
• Component slots

To use API reference: 1. Identify the API you need help with 2. Load the corresponding API file from the api/ directory 3. Find the API signature, parameters, return type, and examples 4. Reference the linked example files for detailed usage patterns 5. All API files include links to relevant example files in the examples/ directory

Best Practices

1. Use TypeScript: Take advantage of TypeScript support 2. Import on demand: Import only needed components 3. Follow component API: Use props and events correctly 4. Customize theme: Use theme variables for customization 5. Handle events: Properly handle component events 6. Use Layer API: Use Layer API for modals and dialogs

Resources

• Official Documentation: https://www.layui-vue.com/zh-CN/index
• Getting Started: https://www.layui-vue.com/zh-CN/guide/introduce
• Components: https://www.layui-vue.com/zh-CN/components
• GitHub Repository: https://github.com/layui-vue/layui-vue

Keywords

Layui Vue, layui-vue, Vue 3, component library, UI components, Button, Table, DatePicker, Layer, Dropdown, Tooltip, Form, Input, Select, Checkbox, Radio, Switch, Upload, 组件库, 按钮, 表格, 日期选择器, 弹层, 下拉菜单, 提示, 表单, 输入框, 选择器, 复选框, 单选框, 开关, 上传

能力边界

✅ 适用场景

• 当你需要使用此技能对应的技术栈时
• 当项目需要遵循最佳实践时
• 当需要快速上手或深入理解核心概念时

⚠️ 需要注意

• 复杂业务逻辑需要结合具体场景调整
• 性能优化需要根据实际数据量评估

❌ 不适用场景

• 不相关的技术栈或框架
• 需要完全自定义的特殊场景

常见陷阱 (Gotchas)

1. 版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异 2. 配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查 3. 环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码 4. 依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本 5. 性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题

使用流程

Step 1: 环境准备

确保开发环境已安装必要的依赖和工具。

Step 2: 配置初始化

根据项目需求进行基础配置。

Step 3: 核心功能使用

按照示例代码实现核心功能。

Step 4: 测试验证

运行测试确保功能正常。

Step 5: 部署上线

完成开发后进行部署和监控。

Component API

API Reference

Layui Vue component props, events, and methods.

Common Props

Most components support:

• size - Component size (lg, md, sm, xs)
• disabled - Disabled state
• loading - Loading state

Common Events

Most components emit:

• @click - Click event
• @change - Change event
• @input - Input event

Button Component

Props:

• type - Button type (primary, normal, warm, danger)
• size - Button size
• disabled - Disabled state
• loading - Loading state
• icon - Icon name

Events:

• @click - Click event

Table Component

Props:

• columns - Column configuration
• dataSource - Table data
• pagination - Pagination config
• sortable - Enable sorting
• checkbox - Enable row selection

Events:

• @change - Pagination/sort change
• @select - Row selection change

DatePicker Component

Props:

• v-model - Selected date
• type - Picker type (date, datetime, year, month, daterange)
• format - Date format
• shortcuts - Date shortcuts

Events:

• @change - Date change event

Input Component

Props:

• v-model - Input value
• placeholder - Placeholder text
• disabled - Disabled state
• readonly - Readonly state
• prefixIcon - Prefix icon
• suffixIcon - Suffix icon

Events:

• @input - Input event
• @change - Change event
• @blur - Blur event
• @focus - Focus event

See also: examples/components/ for detailed component examples

Layer API

API Reference

Layer API methods for modals, dialogs, and messages.

layer.open(options)

Type: Function

Open a modal/dialog layer.

Parameters:

• options - Configuration object

Options:

• title - Layer title
• content - Layer content
• area - Layer size [width, height]
• type - Layer type (0: info, 1: page, 2: iframe)
• shade - Show shade (default: true)
• shadeClose - Close on shade click (default: true)
• offset - Layer offset [x, y]
• anim - Animation type

Returns: number - Layer index

Example:

import { layer } from '@layui/layui-vue'

const index = layer.open({
  title: 'Title',
  content: 'Content',
  area: ['500px', '300px']
})

layer.close(index)

Type: Function

Close a layer by index.

Parameters:

• index - Layer index

Example:

layer.close(index)

layer.msg(content, options?)

Type: Function

Show a message.

Parameters:

• content - Message content
• options - Options (time, icon, etc.)

Example:

layer.msg('Hello World')
layer.msg('Success', { icon: 1 })

layer.confirm(content, options?)

Type: Function

Show a confirmation dialog.

Parameters:

• content - Confirmation message
• options - Options with yes/no callbacks

Example:

layer.confirm('Are you sure?', {
  yes: (index) => {
    console.log('Confirmed')
    layer.close(index)
  }
})

layer.load(content?, options?)

Type: Function

Show loading layer.

Returns: number - Layer index

Example:

const index = layer.load()
setTimeout(() => {
  layer.close(index)
}, 2000)

layer.drawer(options)

Type: Function

Open a drawer.

Options:

• content - Drawer content
• direction - Drawer direction (left, right, top, bottom)

Example:

layer.drawer({
  content: 'Drawer Content',
  direction: 'right'
})

See also: examples/components/layer.md

Button Component

官方文档: https://www.layui-vue.com/zh-CN/components/button

Instructions

This example demonstrates the Button component in Layui Vue.

Key Concepts

• Button types
• Button sizes
• Button states
• Button events

Example: Basic Button

<template>
  <lay-button>Default</lay-button>
  <lay-button type="primary">Primary</lay-button>
  <lay-button type="normal">Normal</lay-button>
  <lay-button type="warm">Warm</lay-button>
  <lay-button type="danger">Danger</lay-button>
</template>

<script setup>
import { LayButton } from '@layui/layui-vue'
</script>

Example: Button Sizes

<template>
  <lay-button size="lg">Large</lay-button>
  <lay-button size="md">Medium</lay-button>
  <lay-button size="sm">Small</lay-button>
  <lay-button size="xs">Extra Small</lay-button>
</template>

Example: Button States

<template>
  <lay-button disabled>Disabled</lay-button>
  <lay-button loading>Loading</lay-button>
</template>

Example: Button with Icon

<template>
  <lay-button icon="layui-icon-search">Search</lay-button>
  <lay-button icon="layui-icon-add-circle">Add</lay-button>
</template>

Example: Button Events

<template>
  <lay-button @click="handleClick">Click Me</lay-button>
</template>

<script setup>
import { LayButton } from '@layui/layui-vue'

const handleClick = () => {
  console.log('Button clicked')
}
</script>

Key Points

• Multiple types: primary, normal, warm, danger
• Multiple sizes: lg, md, sm, xs
• Support for disabled and loading states
• Icon support
• Click event handling

Checkbox Component

官方文档: https://www.layui-vue.com/zh-CN/components/checkbox

Instructions

This example demonstrates the Checkbox component in Layui Vue.

Key Concepts

• Single checkbox
• Checkbox group
• Checkbox states
• Checkbox events

Example: Basic Checkbox

<template>
  <lay-checkbox v-model="checked">Checkbox</lay-checkbox>
</template>

<script setup>
import { ref } from 'vue'
import { LayCheckbox } from '@layui/layui-vue'

const checked = ref(false)
</script>

Example: Checkbox Group

<template>
  <lay-checkbox-group v-model="checkedList">
    <lay-checkbox value="1">Option 1</lay-checkbox>
    <lay-checkbox value="2">Option 2</lay-checkbox>
    <lay-checkbox value="3">Option 3</lay-checkbox>
  </lay-checkbox-group>
</template>

<script setup>
import { ref } from 'vue'
import { LayCheckbox, LayCheckboxGroup } from '@layui/layui-vue'

const checkedList = ref([])
</script>

Example: Checkbox States

<template>
  <lay-checkbox v-model="checked" disabled>Disabled</lay-checkbox>
  <lay-checkbox v-model="checked" :indeterminate="indeterminate">Indeterminate</lay-checkbox>
</template>

<script setup>
import { ref } from 'vue'
import { LayCheckbox } from '@layui/layui-vue'

const checked = ref(false)
const indeterminate = ref(true)
</script>

Example: Checkbox Events

<template>
  <lay-checkbox 
    v-model="checked"
    @change="handleChange"
  >Checkbox</lay-checkbox>
</template>

<script setup>
import { ref } from 'vue'
import { LayCheckbox } from '@layui/layui-vue'

const checked = ref(false)

const handleChange = (val) => {
  console.log('Checked:', val)
}
</script>

Key Points

• Use v-model for two-way binding
• Use lay-checkbox-group for multiple checkboxes
• Support disabled and indeterminate states
• Handle change events
• Configure checkbox values

DatePicker Component

官方文档: https://www.layui-vue.com/zh-CN/components/date-picker

Instructions

This example demonstrates the DatePicker component in Layui Vue.

Key Concepts

• Date selection
• Date range
• Date formats
• Date picker types

Example: Basic DatePicker

<template>
  <lay-date-picker v-model="date"></lay-date-picker>
</template>

<script setup>
import { ref } from 'vue'
import { LayDatePicker } from '@layui/layui-vue'

const date = ref('')
</script>

Example: Date Range

<template>
  <lay-date-picker 
    v-model="dateRange" 
    type="daterange"
  ></lay-date-picker>
</template>

<script setup>
import { ref } from 'vue'
import { LayDatePicker } from '@layui/layui-vue'

const dateRange = ref([])
</script>

Example: Date Format

<template>
  <lay-date-picker 
    v-model="date" 
    format="YYYY-MM-DD"
  ></lay-date-picker>
</template>

Example: Date Picker Types

<template>
  <lay-date-picker type="date"></lay-date-picker>
  <lay-date-picker type="datetime"></lay-date-picker>
  <lay-date-picker type="year"></lay-date-picker>
  <lay-date-picker type="month"></lay-date-picker>
</template>

Example: Date Picker with Options

<template>
  <lay-date-picker 
    v-model="date"
    :shortcuts="shortcuts"
  ></lay-date-picker>
</template>

<script setup>
import { ref } from 'vue'
import { LayDatePicker } from '@layui/layui-vue'

const date = ref('')
const shortcuts = [
  { text: 'Today', value: new Date() },
  { text: 'Yesterday', value: () => {
    const d = new Date()
    d.setDate(d.getDate() - 1)
    return d
  }}
]
</script>

Key Points

• Use v-model for two-way binding
• Support date range selection
• Configure date format
• Multiple picker types
• Shortcuts support

Dropdown Component

官方文档: https://www.layui-vue.com/zh-CN/components/dropdown

Instructions

This example demonstrates the Dropdown component in Layui Vue.

Key Concepts

• Dropdown menu
• Dropdown items
• Dropdown trigger
• Dropdown events

Example: Basic Dropdown

<template>
  <lay-dropdown>
    <lay-button>Dropdown</lay-button>
    <template #content>
      <lay-dropdown-item>Option 1</lay-dropdown-item>
      <lay-dropdown-item>Option 2</lay-dropdown-item>
      <lay-dropdown-item>Option 3</lay-dropdown-item>
    </template>
  </lay-dropdown>
</template>

<script setup>
import { LayDropdown, LayDropdownItem, LayButton } from '@layui/layui-vue'
</script>

Example: Dropdown with Click Event

<template>
  <lay-dropdown>
    <lay-button>Actions</lay-button>
    <template #content>
      <lay-dropdown-item @click="handleClick1">Edit</lay-dropdown-item>
      <lay-dropdown-item @click="handleClick2">Delete</lay-dropdown-item>
    </template>
  </lay-dropdown>
</template>

<script setup>
import { LayDropdown, LayDropdownItem, LayButton } from '@layui/layui-vue'

const handleClick1 = () => {
  console.log('Edit clicked')
}

const handleClick2 = () => {
  console.log('Delete clicked')
}
</script>

Example: Dropdown Trigger

<template>
  <lay-dropdown trigger="hover">
    <lay-button>Hover Me</lay-button>
    <template #content>
      <lay-dropdown-item>Option 1</lay-dropdown-item>
      <lay-dropdown-item>Option 2</lay-dropdown-item>
    </template>
  </lay-dropdown>
</template>

Key Points

• Use lay-dropdown for container
• Use lay-dropdown-item for menu items
• Support click and hover triggers
• Handle item click events
• Customize dropdown content

Form Component

官方文档: https://www.layui-vue.com/zh-CN/components/form

Instructions

This example demonstrates the Form component in Layui Vue.

Key Concepts

• Form structure
• Form validation
• Form submission
• Form fields

Example: Basic Form

<template>
  <lay-form :model="form" :rules="rules">
    <lay-form-item label="Name" prop="name">
      <lay-input v-model="form.name"></lay-input>
    </lay-form-item>
    <lay-form-item label="Email" prop="email">
      <lay-input v-model="form.email"></lay-input>
    </lay-form-item>
    <lay-form-item>
      <lay-button type="primary" @click="submit">Submit</lay-button>
    </lay-form-item>
  </lay-form>
</template>

<script setup>
import { ref } from 'vue'
import { LayForm, LayFormItem, LayInput, LayButton } from '@layui/layui-vue'

const form = ref({
  name: '',
  email: ''
})

const rules = {
  name: [{ required: true, message: 'Name is required' }],
  email: [{ required: true, message: 'Email is required' }]
}

const submit = () => {
  // Handle form submission
}
</script>

Example: Form Validation

<template>
  <lay-form ref="formRef" :model="form" :rules="rules">
    <lay-form-item label="Name" prop="name">
      <lay-input v-model="form.name"></lay-input>
    </lay-form-item>
    <lay-form-item>
      <lay-button type="primary" @click="validate">Validate</lay-button>
    </lay-form-item>
  </lay-form>
</template>

<script setup>
import { ref } from 'vue'
import { LayForm, LayFormItem, LayInput, LayButton } from '@layui/layui-vue'

const formRef = ref()
const form = ref({ name: '' })
const rules = {
  name: [{ required: true, message: 'Name is required' }]
}

const validate = async () => {
  await formRef.value.validate()
}
</script>

Key Points

• Use lay-form for form container
• Use lay-form-item for form fields
• Configure validation rules
• Use ref to access form methods
• Handle form submission

Input Component

官方文档: https://www.layui-vue.com/zh-CN/components/input

Instructions

This example demonstrates the Input component in Layui Vue.

Key Concepts

• Input types
• Input sizes
• Input states
• Input events

Example: Basic Input

<template>
  <lay-input v-model="value" placeholder="Enter text"></lay-input>
</template>

<script setup>
import { ref } from 'vue'
import { LayInput } from '@layui/layui-vue'

const value = ref('')
</script>

Example: Input Sizes

<template>
  <lay-input size="lg" v-model="value1"></lay-input>
  <lay-input size="md" v-model="value2"></lay-input>
  <lay-input size="sm" v-model="value3"></lay-input>
</template>

Example: Input States

<template>
  <lay-input disabled v-model="value"></lay-input>
  <lay-input readonly v-model="value"></lay-input>
</template>

Example: Input with Icon

<template>
  <lay-input 
    v-model="value" 
    prefix-icon="layui-icon-search"
  ></lay-input>
  <lay-input 
    v-model="value" 
    suffix-icon="layui-icon-close"
  ></lay-input>
</template>

Example: Input Events

<template>
  <lay-input 
    v-model="value"
    @input="handleInput"
    @change="handleChange"
    @blur="handleBlur"
    @focus="handleFocus"
  ></lay-input>
</template>

<script setup>
import { ref } from 'vue'
import { LayInput } from '@layui/layui-vue'

const value = ref('')

const handleInput = (val) => {
  console.log('Input:', val)
}

const handleChange = (val) => {
  console.log('Change:', val)
}
</script>

Key Points

• Use v-model for two-way binding
• Multiple sizes: lg, md, sm
• Support disabled and readonly
• Icon support (prefix/suffix)
• Multiple events: input, change, blur, focus

Layer Component

官方文档: https://www.layui-vue.com/zh-CN/components/layer

Instructions

This example demonstrates the Layer component in Layui Vue.

Key Concepts

• Layer component usage
• Layer API methods
• Modal dialogs
• Drawer
• Message and confirm

Example: Layer Component

<template>
  <lay-layer v-model="visible" title="Title">
    <p>Content</p>
  </lay-layer>
  <lay-button @click="visible = true">Open</lay-button>
</template>

<script setup>
import { ref } from 'vue'
import { LayLayer, LayButton } from '@layui/layui-vue'

const visible = ref(false)
</script>

Example: Layer API - Open

<template>
  <lay-button @click="openLayer">Open Layer</lay-button>
</template>

<script setup>
import { LayButton } from '@layui/layui-vue'
import { layer } from '@layui/layui-vue'

const openLayer = () => {
  layer.open({
    title: 'Title',
    content: 'Content',
    area: ['500px', '300px']
  })
}
</script>

Example: Layer API - Message

<template>
  <lay-button @click="showMessage">Show Message</lay-button>
</template>

<script setup>
import { LayButton } from '@layui/layui-vue'
import { layer } from '@layui/layui-vue'

const showMessage = () => {
  layer.msg('Hello World')
}
</script>

Example: Layer API - Confirm

<template>
  <lay-button @click="showConfirm">Confirm</lay-button>
</template>

<script setup>
import { LayButton } from '@layui/layui-vue'
import { layer } from '@layui/layui-vue'

const showConfirm = () => {
  layer.confirm('Are you sure?', {
    yes: (index) => {
      console.log('Confirmed')
      layer.close(index)
    }
  })
}
</script>

Example: Layer API - Loading

<template>
  <lay-button @click="showLoading">Loading</lay-button>
</template>

<script setup>
import { LayButton } from '@layui/layui-vue'
import { layer } from '@layui/layui-vue'

const showLoading = () => {
  const index = layer.load()
  setTimeout(() => {
    layer.close(index)
  }, 2000)
}
</script>

Example: Drawer

<template>
  <lay-button @click="openDrawer">Open Drawer</lay-button>
</template>

<script setup>
import { LayButton } from '@layui/layui-vue'
import { layer } from '@layui/layui-vue'

const openDrawer = () => {
  layer.drawer({
    content: 'Drawer Content',
    direction: 'right'
  })
}
</script>

Key Points

• Use component or API methods
• layer.open() for modals
• layer.msg() for messages
• layer.confirm() for confirmations
• layer.load() for loading
• layer.drawer() for drawers

Radio Component

官方文档: https://www.layui-vue.com/zh-CN/components/radio

Instructions

This example demonstrates the Radio component in Layui Vue.

Key Concepts

• Single radio
• Radio group
• Radio states
• Radio events

Example: Basic Radio

<template>
  <lay-radio v-model="value" value="1">Option 1</lay-radio>
  <lay-radio v-model="value" value="2">Option 2</lay-radio>
</template>

<script setup>
import { ref } from 'vue'
import { LayRadio } from '@layui/layui-vue'

const value = ref('1')
</script>

Example: Radio Group

<template>
  <lay-radio-group v-model="value">
    <lay-radio value="1">Option 1</lay-radio>
    <lay-radio value="2">Option 2</lay-radio>
    <lay-radio value="3">Option 3</lay-radio>
  </lay-radio-group>
</template>

<script setup>
import { ref } from 'vue'
import { LayRadio, LayRadioGroup } from '@layui/layui-vue'

const value = ref('1')
</script>

Example: Radio States

<template>
  <lay-radio v-model="value" value="1" disabled>Disabled</lay-radio>
</template>

Example: Radio Events

<template>
  <lay-radio-group v-model="value" @change="handleChange">
    <lay-radio value="1">Option 1</lay-radio>
    <lay-radio value="2">Option 2</lay-radio>
  </lay-radio-group>
</template>

<script setup>
import { ref } from 'vue'
import { LayRadio, LayRadioGroup } from '@layui/layui-vue'

const value = ref('1')

const handleChange = (val) => {
  console.log('Selected:', val)
}
</script>

Key Points

• Use v-model for two-way binding
• Use lay-radio-group for radio groups
• Set value for each radio
• Support disabled state
• Handle change events

Segmented Component

官方文档: https://www.layui-vue.com/zh-CN/components/segmented

Instructions

This example demonstrates the Segmented component in Layui Vue.

Key Concepts

• Segmented options
• Segmented selection
• Segmented events
• Segmented styling

Example: Basic Segmented

<template>
  <lay-segmented v-model="value" :options="options"></lay-segmented>
</template>

<script setup>
import { ref } from 'vue'
import { LaySegmented } from '@layui/layui-vue'

const value = ref('1')
const options = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' },
  { label: 'Option 3', value: '3' }
]
</script>

Example: Segmented with Icons

<template>
  <lay-segmented v-model="value" :options="options"></lay-segmented>
</template>

<script setup>
import { ref } from 'vue'
import { LaySegmented } from '@layui/layui-vue'

const value = ref('1')
const options = [
  { label: 'List', value: '1', icon: 'layui-icon-list' },
  { label: 'Grid', value: '2', icon: 'layui-icon-grid' }
]
</script>

Example: Segmented Events

<template>
  <lay-segmented 
    v-model="value" 
    :options="options"
    @change="handleChange"
  ></lay-segmented>
</template>

<script setup>
import { ref } from 'vue'
import { LaySegmented } from '@layui/layui-vue'

const value = ref('1')
const options = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' }
]

const handleChange = (val) => {
  console.log('Selected:', val)
}
</script>

Key Points

• Use v-model for two-way binding
• Configure options array
• Support icons in options
• Handle change events
• Customize appearance

Select Component

官方文档: https://www.layui-vue.com/zh-CN/components/select

Instructions

This example demonstrates the Select component in Layui Vue.

Key Concepts

• Select options
• Multiple selection
• Searchable select
• Select events

Example: Basic Select

<template>
  <lay-select v-model="value" :options="options"></lay-select>
</template>

<script setup>
import { ref } from 'vue'
import { LaySelect } from '@layui/layui-vue'

const value = ref('')
const options = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' },
  { label: 'Option 3', value: '3' }
]
</script>

Example: Multiple Selection

<template>
  <lay-select 
    v-model="value" 
    :options="options"
    multiple
  ></lay-select>
</template>

<script setup>
import { ref } from 'vue'
import { LaySelect } from '@layui/layui-vue'

const value = ref([])
const options = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' }
]
</script>

Example: Searchable Select

<template>
  <lay-select 
    v-model="value" 
    :options="options"
    searchable
  ></lay-select>
</template>

Example: Select with Placeholder

<template>
  <lay-select 
    v-model="value" 
    :options="options"
    placeholder="Please select"
  ></lay-select>
</template>

Key Points

• Use v-model for two-way binding
• Configure options array
• Enable multiple selection
• Enable searchable mode
• Support placeholder

Switch Component

官方文档: https://www.layui-vue.com/zh-CN/components/switch

Instructions

This example demonstrates the Switch component in Layui Vue.

Key Concepts

• Switch state
• Switch sizes
• Switch colors
• Switch events

Example: Basic Switch

<template>
  <lay-switch v-model="checked"></lay-switch>
</template>

<script setup>
import { ref } from 'vue'
import { LaySwitch } from '@layui/layui-vue'

const checked = ref(false)
</script>

Example: Switch with Label

<template>
  <lay-switch v-model="checked">Enable Feature</lay-switch>
</template>

Example: Switch Sizes

<template>
  <lay-switch v-model="checked1" size="lg"></lay-switch>
  <lay-switch v-model="checked2" size="md"></lay-switch>
  <lay-switch v-model="checked3" size="sm"></lay-switch>
</template>

Example: Switch States

<template>
  <lay-switch v-model="checked" disabled>Disabled</lay-switch>
  <lay-switch v-model="checked" loading>Loading</lay-switch>
</template>

Example: Switch Events

<template>
  <lay-switch 
    v-model="checked"
    @change="handleChange"
  ></lay-switch>
</template>

<script setup>
import { ref } from 'vue'
import { LaySwitch } from '@layui/layui-vue'

const checked = ref(false)

const handleChange = (val) => {
  console.log('Switch:', val)
}
</script>

Key Points

• Use v-model for two-way binding
• Support label text
• Multiple sizes: lg, md, sm
• Support disabled and loading states
• Handle change events

Table Component

官方文档: https://www.layui-vue.com/zh-CN/components/table

Instructions

This example demonstrates the Table component in Layui Vue.

Key Concepts

• Table data
• Columns configuration
• Sorting
• Pagination
• Selection

Example: Basic Table

<template>
  <lay-table :columns="columns" :data-source="dataSource"></lay-table>
</template>

<script setup>
import { ref } from 'vue'
import { LayTable } from '@layui/layui-vue'

const columns = [
  { title: 'ID', key: 'id' },
  { title: 'Name', key: 'name' },
  { title: 'Email', key: 'email' }
]

const dataSource = ref([
  { id: 1, name: 'John', email: 'john@example.com' },
  { id: 2, name: 'Jane', email: 'jane@example.com' }
])
</script>

Example: Table with Sorting

<template>
  <lay-table :columns="columns" :data-source="dataSource" :sortable="true"></lay-table>
</template>

<script setup>
import { ref } from 'vue'
import { LayTable } from '@layui/layui-vue'

const columns = [
  { title: 'ID', key: 'id', sort: true },
  { title: 'Name', key: 'name', sort: true }
]

const dataSource = ref([
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' }
])
</script>

Example: Table with Pagination

<template>
  <lay-table 
    :columns="columns" 
    :data-source="dataSource"
    :pagination="pagination"
    @change="handleChange"
  ></lay-table>
</template>

<script setup>
import { ref } from 'vue'
import { LayTable } from '@layui/layui-vue'

const columns = [
  { title: 'ID', key: 'id' },
  { title: 'Name', key: 'name' }
]

const dataSource = ref([...])
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 100
})

const handleChange = (page, pageSize) => {
  // Handle pagination change
}
</script>

Example: Table with Selection

<template>
  <lay-table 
    :columns="columns" 
    :data-source="dataSource"
    :checkbox="true"
    v-model:selectedKeys="selectedKeys"
  ></lay-table>
</template>

<script setup>
import { ref } from 'vue'
import { LayTable } from '@layui/layui-vue'

const selectedKeys = ref([])
</script>

Key Points

• Configure columns and data source
• Enable sorting with sort: true
• Configure pagination
• Support row selection
• Handle table events

TagInput Component

官方文档: https://www.layui-vue.com/zh-CN/components/tag-input

Instructions

This example demonstrates the TagInput component in Layui Vue.

Key Concepts

• Tag input
• Tag management
• Tag validation
• Tag events

Example: Basic TagInput

<template>
  <lay-tag-input v-model="tags"></lay-tag-input>
</template>

<script setup>
import { ref } from 'vue'
import { LayTagInput } from '@layui/layui-vue'

const tags = ref([])
</script>

Example: TagInput with Validation

<template>
  <lay-tag-input 
    v-model="tags"
    :max-length="5"
    @change="handleChange"
  ></lay-tag-input>
</template>

<script setup>
import { ref } from 'vue'
import { LayTagInput } from '@layui/layui-vue'

const tags = ref([])

const handleChange = (tags) => {
  console.log('Tags:', tags)
}
</script>

Example: TagInput with Placeholder

<template>
  <lay-tag-input 
    v-model="tags"
    placeholder="Enter tags"
  ></lay-tag-input>
</template>

Key Points

• Use v-model for two-way binding
• Tags stored as array
• Support max length validation
• Handle change events
• Customize placeholder

TimeSelect Component

官方文档: https://www.layui-vue.com/zh-CN/components/time-select

Instructions

This example demonstrates the TimeSelect component in Layui Vue.

Key Concepts

• Time selection
• Time format
• Time range
• Time picker options

Example: Basic TimeSelect

<template>
  <lay-time-select v-model="time"></lay-time-select>
</template>

<script setup>
import { ref } from 'vue'
import { LayTimeSelect } from '@layui/layui-vue'

const time = ref('')
</script>

Example: TimeSelect with Format

<template>
  <lay-time-select 
    v-model="time"
    format="HH:mm:ss"
  ></lay-time-select>
</template>

Example: TimeSelect with Steps

<template>
  <lay-time-select 
    v-model="time"
    :step="30"
  ></lay-time-select>
</template>

Example: TimeSelect Range

<template>
  <lay-time-select 
    v-model="timeRange"
    range
  ></lay-time-select>
</template>

<script setup>
import { ref } from 'vue'
import { LayTimeSelect } from '@layui/layui-vue'

const timeRange = ref([])
</script>

Key Points

• Use v-model for two-way binding
• Configure time format
• Set time step interval
• Support time range selection
• Customize picker options

Tooltip Component

官方文档: https://www.layui-vue.com/zh-CN/components/tooltip

Instructions

This example demonstrates the Tooltip component in Layui Vue.

Key Concepts

• Tooltip placement
• Tooltip content
• Tooltip trigger
• Tooltip styling

Example: Basic Tooltip

<template>
  <lay-tooltip content="This is a tooltip">
    <lay-button>Hover Me</lay-button>
  </lay-tooltip>
</template>

<script setup>
import { LayTooltip, LayButton } from '@layui/layui-vue'
</script>

Example: Tooltip Placement

<template>
  <lay-tooltip content="Tooltip" placement="top">
    <lay-button>Top</lay-button>
  </lay-tooltip>
  <lay-tooltip content="Tooltip" placement="bottom">
    <lay-button>Bottom</lay-button>
  </lay-tooltip>
  <lay-tooltip content="Tooltip" placement="left">
    <lay-button>Left</lay-button>
  </lay-tooltip>
  <lay-tooltip content="Tooltip" placement="right">
    <lay-button>Right</lay-button>
  </lay-tooltip>
</template>

Example: Tooltip Trigger

<template>
  <lay-tooltip content="Tooltip" trigger="click">
    <lay-button>Click Me</lay-button>
  </lay-tooltip>
</template>

Example: Tooltip with HTML Content

<template>
  <lay-tooltip>
    <template #content>
      <div>
        <strong>Title</strong>
        <p>Description</p>
      </div>
    </template>
    <lay-button>Hover</lay-button>
  </lay-tooltip>
</template>

Key Points

• Wrap content with lay-tooltip
• Configure placement (top, bottom, left, right)
• Set trigger (hover, click, focus)
• Support HTML content via slot
• Customize tooltip appearance

Upload Component

官方文档: https://www.layui-vue.com/zh-CN/components/upload

Instructions

This example demonstrates the Upload component in Layui Vue.

Key Concepts

• File upload
• Upload progress
• File validation
• Upload events

Example: Basic Upload

<template>
  <lay-upload 
    :action="uploadUrl"
    @success="handleSuccess"
  ></lay-upload>
</template>

<script setup>
import { LayUpload } from '@layui/layui-vue'

const uploadUrl = '/api/upload'

const handleSuccess = (response) => {
  console.log('Upload success:', response)
}
</script>

Example: Upload with Validation

<template>
  <lay-upload 
    :action="uploadUrl"
    :accept="'image/*'"
    :max-size="5 * 1024 * 1024"
    @error="handleError"
  ></lay-upload>
</template>

<script setup>
import { LayUpload } from '@layui/layui-vue'

const handleError = (error) => {
  console.log('Upload error:', error)
}
</script>

Example: Multiple Files

<template>
  <lay-upload 
    :action="uploadUrl"
    multiple
    :max-count="5"
  ></lay-upload>
</template>

Example: Upload with Preview

<template>
  <lay-upload 
    :action="uploadUrl"
    :file-list="fileList"
    @change="handleChange"
  ></lay-upload>
</template>

<script setup>
import { ref } from 'vue'
import { LayUpload } from '@layui/layui-vue'

const fileList = ref([])

const handleChange = (files) => {
  fileList.value = files
}
</script>

Key Points

• Configure upload URL
• Set file validation rules
• Support multiple files
• Handle upload events
• Preview uploaded files

Getting Started

官方文档: https://www.layui-vue.com/zh-CN/index

Instructions

This example demonstrates how to get started with Layui Vue.

Key Concepts

• Installation
• Basic setup
• Import components
• Global registration

Example: Installation

# Using npm
npm install @layui/layui-vue

# Using yarn
yarn add @layui/layui-vue

# Using pnpm
pnpm add @layui/layui-vue

Example: Global Registration

// main.js
import { createApp } from 'vue'
import LayuiVue from '@layui/layui-vue'
import '@layui/layui-vue/lib/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(LayuiVue)
app.mount('#app')

Example: Import on Demand

// main.js
import { createApp } from 'vue'
import { LayButton, LayTable } from '@layui/layui-vue'
import '@layui/layui-vue/lib/index.css'
import App from './App.vue'

const app = createApp(App)
app.component('LayButton', LayButton)
app.component('LayTable', LayTable)
app.mount('#app')

Example: Component Usage

<template>
  <lay-button type="primary">Primary Button</lay-button>
  <lay-button type="normal">Normal Button</lay-button>
</template>

<script setup>
import { LayButton } from '@layui/layui-vue'
</script>

Example: TypeScript Setup

// main.ts
import { createApp } from 'vue'
import LayuiVue from '@layui/layui-vue'
import '@layui/layui-vue/lib/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(LayuiVue)
app.mount('#app')

Key Points

• Install @layui/layui-vue package
• Import CSS file
• Register globally or import on demand
• Use components in templates
• Supports TypeScript

Introduction

官方文档: https://www.layui-vue.com/zh-CN/guide/introduce

Instructions

This example provides an introduction to Layui Vue.

Key Concepts

• What is Layui Vue
• Features
• Design philosophy
• Component overview

Example: What is Layui Vue

Layui Vue is a Vue 3 component library that provides a rich set of UI components, following the design philosophy of Layui.

Key Features:

• Built with Vue 3 Composition API
• Full TypeScript support
• Rich component set
• Theme customization
• Internationalization support

Example: Component Categories

Form Components:

• Button, Input, Select, Checkbox, Radio, Switch
• DatePicker, TimeSelect, TagInput
• Upload, Form

Data Display:

• Table, Tag, Badge, Card
• List, Tree

Feedback:

• Layer (Modal/Dialog), Tooltip, Message
• Loading, Progress

Navigation:

• Dropdown, Menu, Breadcrumb
• Tabs, Segmented

Example: Design Philosophy

• Simplicity: Easy to use and understand
• Consistency: Consistent design language
• Flexibility: Customizable and extensible
• Performance: Optimized for performance

Key Points

• Vue 3 component library
• Rich component ecosystem
• TypeScript support
• Theme customization
• Good documentation

Component Usage Templates

Button Usage

<template>
  <lay-button type="primary" @click="handleClick">
    Click Me
  </lay-button>
</template>

<script setup>
import { LayButton } from '@layui/layui-vue'

const handleClick = () => {
  console.log('Clicked')
}
</script>

Table Usage

<template>
  <lay-table 
    :columns="columns" 
    :data-source="dataSource"
    :pagination="pagination"
  ></lay-table>
</template>

<script setup>
import { ref } from 'vue'
import { LayTable } from '@layui/layui-vue'

const columns = [
  { title: 'ID', key: 'id' },
  { title: 'Name', key: 'name' }
]

const dataSource = ref([
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' }
])

const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 100
})
</script>

Form Usage

<template>
  <lay-form :model="form" :rules="rules">
    <lay-form-item label="Name" prop="name">
      <lay-input v-model="form.name"></lay-input>
    </lay-form-item>
    <lay-form-item>
      <lay-button type="primary" @click="submit">Submit</lay-button>
    </lay-form-item>
  </lay-form>
</template>

<script setup>
import { ref } from 'vue'
import { LayForm, LayFormItem, LayInput, LayButton } from '@layui/layui-vue'

const form = ref({
  name: ''
})

const rules = {
  name: [{ required: true, message: 'Name is required' }]
}

const submit = () => {
  // Handle submission
}
</script>

Layer Usage

<template>
  <lay-button @click="openLayer">Open</lay-button>
</template>

<script setup>
import { LayButton } from '@layui/layui-vue'
import { layer } from '@layui/layui-vue'

const openLayer = () => {
  layer.open({
    title: 'Title',
    content: 'Content'
  })
}
</script>

Installation Templates

Global Installation

// main.js
import { createApp } from 'vue'
import LayuiVue from '@layui/layui-vue'
import '@layui/layui-vue/lib/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(LayuiVue)
app.mount('#app')

Import on Demand

// main.js
import { createApp } from 'vue'
import { LayButton, LayTable, LayInput } from '@layui/layui-vue'
import '@layui/layui-vue/lib/index.css'
import App from './App.vue'

const app = createApp(App)
app.component('LayButton', LayButton)
app.component('LayTable', LayTable)
app.component('LayInput', LayInput)
app.mount('#app')

TypeScript Setup

// main.ts
import { createApp } from 'vue'
import LayuiVue from '@layui/layui-vue'
import '@layui/layui-vue/lib/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(LayuiVue)
app.mount('#app')

Component Usage

<template>
  <lay-button type="primary">Button</lay-button>
</template>

<script setup>
import { LayButton } from '@layui/layui-vue'
</script>