Back to Details

layui-vue3

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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
当用户有以下需求时，可使用本技能：
  • 在Vue 3项目中安装和配置Layui Vue
  • 使用Layui Vue组件（Button、Table、DatePicker等）
  • 配置Layui Vue（主题、国际化等）
  • 使用Layer组件实现模态框和弹窗
  • 用Layui Vue组件实现表单
  • 使用带排序和分页功能的数据表格
  • 处理文件上传
  • 创建下拉菜单和提示框
  • 使用日期和时间选择器
  • 自定义组件样式
  • 了解Layui Vue的API和方法
  • 排查Layui Vue相关问题

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
  1. 从用户的请求中确定主题，并在下方的映射中找到对应的示例文件
  2. 从
    examples/
    目录加载合适的示例文件
  3. 遵循示例文件中的具体说明，包括语法、结构和最佳实践

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

文档映射（与https://www.layui-vue.com/zh-CN/一一对应）

Guide (指南):
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
  1. Reference API documentation in the 
    api/
    directory when needed:
    • api/layer-api.md
      - Layer API methods
    • api/component-api.md
      - Component API reference
  2. Use templates from the 
    templates/
    directory:
    • templates/installation.md
      - Installation templates
    • templates/component-usage.md
      - Component usage templates
指南:
组件 - 
examples/components/
:
  • 查看
    examples/components/
    目录下的组件文件
  • 每个组件文件对应https://www.layui-vue.com/zh-CN/components/[component-name]
    重要说明:
    • Layui Vue是为Vue 3构建的
    • 组件使用Composition API
    • 支持TypeScript
    • 示例包含JavaScript和TypeScript两种版本
    • 每个示例文件都包含核心概念、代码示例和关键点
  1. 必要时参考
    api/
    目录下的API文档    :
    • api/layer-api.md
      - Layer API方法
    • api/component-api.md
      - 组件API参考
  2. 使用
    templates/
    目录下的模板    :
    • templates/installation.md
      - 安装模板
    • templates/component-usage.md
      - 组件使用模板

1. Understanding Layui Vue

1. 了解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
Layui Vue是一款基于Vue 3的组件库，提供丰富的UI组件，遵循Layui的设计理念。
核心概念:
  • Vue 3支持: 基于Vue 3 Composition API构建
  • 丰富的组件: Button、Table、DatePicker、Layer等
  • TypeScript: 完全支持TypeScript
  • 主题自定义: 支持主题定制
  • 国际化: 支持多语言国际化

2. Installation

2. 安装

Using npm:
bash
npm install @layui/layui-vue
Using yarn:
bash
yarn add @layui/layui-vue
Using pnpm:
bash
pnpm add @layui/layui-vue
使用npm:
bash
npm install @layui/layui-vue
使用yarn:
bash
yarn add @layui/layui-vue
使用pnpm:
bash
pnpm add @layui/layui-vue

3. Basic Setup

3. 基础配置

javascript
// 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')
javascript
// 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

4. 组件基础使用

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

<script setup>
import { LayButton } from '@layui/layui-vue'
</script>
vue
<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
本技能包含与官方文档结构匹配的详细示例，所有示例都在
examples/
目录下（见上方映射）。
使用示例:
  • 从用户的请求中确定主题
  • 从上方映射中加载合适的示例文件
  • 遵循文件中的说明、语法和最佳实践
  • 根据具体需求调整代码示例
使用模板:
  • 参考
    templates/
    目录下的模板搭建基础结构
  • 根据具体需求和编码风格调整模板

API Reference

API参考

Detailed API documentation is available in the 
api/
directory, organized to match the official Layui Vue API documentation structure:
详细的API文档位于
api/
目录下，结构与官方Layui Vue API文档一致：

Layer API (
api/layer-api.md
)

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
  • layer.open()
    - 打开模态框/弹窗
  • layer.close()
    - 关闭弹层
  • layer.msg()
    - 显示消息提示
  • layer.confirm()
    - 显示确认弹窗
  • layer.load()
    - 显示加载动画
  • layer.drawer()
    - 显示抽屉

Component API (
api/component-api.md
)

组件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
  • 组件属性与事件
  • 组件方法
  • 组件插槽
使用API参考:
  1. 确定需要查询的API
  2. 从
    api/
    目录加载对应的API文件
  3. 查找API签名、参数、返回类型及示例
  4. 参考链接的示例文件获取详细使用模式
  5. 所有API文件都包含指向
    examples/
    目录中相关示例文件的链接

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
  1. 使用TypeScript: 充分利用TypeScript支持
  2. 按需引入: 仅引入所需组件
  3. 遵循组件API: 正确使用属性和事件
  4. 自定义主题: 使用主题变量进行定制
  5. 事件处理: 正确处理组件事件
  6. 使用Layer API: 通过Layer API实现模态框和弹窗

Resources

资源

Keywords

关键词

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