快速开始

本指南将帮助你快速上手 Imtes UI，了解主要组件和功能的使用方法。

前置条件

在开始之前，请确保你已经：

安装了 Imtes UI（查看安装指南）
了解 Vue 3 基础知识和 Composition API
了解 Element Plus 基础用法

第一个组件

让我们从一个简单的按钮开始：

查看代码

vue

<template>
  <div class="demo-space">
    <h3>基础按钮</h3>
    <ImButton type="primary" @click="handleClick">我的第一个按钮</ImButton>
    <ImButton type="success" :loading="loading" @click="handleAsync">
      异步按钮
    </ImButton>
  </div>
</template>

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

const loading = ref(false)

const handleClick = () => {
  console.log('按钮被点击')
}

const handleAsync = async () => {
  loading.value = true
  // 模拟异步操作
  await new Promise(resolve => setTimeout(resolve, 2000))
  loading.value = false
}
</script>

使用表格组件

使用 useTable Hook 管理表格数据：

查看代码

vue

<template>
  <div class="demo-space">
    <h3>智能表格</h3>
    
    <!-- 搜索栏 -->
    <div class="mb-4">
      <el-input 
        v-model="searchKeyword"
        placeholder="搜索用户..."
        @input="handleSearch"
        style="width: 200px"
      />
      <ImButton type="primary" @click="refreshData" class="ml-2">
        刷新
      </ImButton>
    </div>
    
    <!-- 表格 -->
    <im-el-table 
      :data="tableData"
      :loading="loading"
      :columns="columns"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useTable, useDebounce } from 'imtes-ui'

const searchKeyword = ref('')

// 使用表格Hook
const {
  tableData,
  loading,
  currentPage,
  pageSize,
  total,
  fetchData,
  refresh,
  search,
  handlePageChange
} = useTable({
  api: '/api/users',
  pageSize: 10
})

// 表格列配置
const columns = ref([
  { field: 'id', title: 'ID', width: 80 },
  { field: 'name', title: '姓名', width: 120 },
  { field: 'email', title: '邮箱', minWidth: 200 },
  { field: 'phone', title: '手机号', width: 150 },
  { field: 'status', title: '状态', width: 100 }
])

// 防抖搜索
const { debouncedFunction: debouncedSearch } = useDebounce((keyword) => {
  search({ keyword })
}, 300)

const handleSearch = () => {
  debouncedSearch(searchKeyword.value)
}

const refreshData = () => {
  refresh()
}
</script>

使用表单组件

结合表单Hook和验证规则：

查看代码

vue

<template>
  <div class="demo-space">
    <h3>智能表单</h3>
    
    <ImDialog v-model="formVisible" title="用户信息" width="500px">
      <el-form 
        ref="formRef" 
        :model="formData" 
        :rules="formRules"
        label-width="80px"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" />
        </el-form-item>
        
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="formData.phone" />
        </el-form-item>
        
        <el-form-item label="工作日期" prop="workPeriod">
          <ImDateRange 
            v-model="formData.workPeriod"
            start-label="入职日期"
            end-label="离职日期"
            :required="true"
            :max-range="365"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <ImButton @click="formVisible = false">取消</ImButton>
        <ImButton 
          type="primary" 
          :loading="submitting" 
          @click="handleSubmit"
        >
          提交
        </ImButton>
      </template>
    </ImDialog>
    
    <ImButton type="primary" @click="openForm">打开表单</ImButton>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useForm, useDialog, rules } from 'imtes-ui'

// 表单Hook
const {
  formRef,
  formData,
  submitting,
  validate,
  resetForm,
  submit
} = useForm({
  initialData: {
    name: '',
    email: '',
    phone: '',
    workPeriod: [null, null]
  },
  submitApi: '/api/users'
})

// 弹窗Hook
const { visible: formVisible, open: openForm, close: closeForm } = useDialog()

// 验证规则
const formRules = {
  name: rules.required,
  email: rules.email,
  phone: rules.phone,
  workPeriod: rules.required
}

const handleSubmit = async () => {
  const isValid = await validate()
  if (isValid) {
    await submit()
    closeForm()
  }
}
</script>

使用工具函数

利用内置的工具函数简化开发：

查看代码

vue

<template>
  <div class="demo-space">
    <h3>工具函数示例</h3>
    
    <div class="mb-4">
      <h4>数据格式化</h4>
      <p>文件大小: {{ formattedSize }}</p>
      <p>格式化日期: {{ formattedDate }}</p>
      <p>格式化金额: {{ formattedMoney }}</p>
    </div>
    
    <div class="mb-4">
      <h4>验证函数</h4>
      <el-input 
        v-model="testEmail"
        placeholder="输入邮箱测试验证"
        @input="handleEmailInput"
      />
      <p :class="emailValid ? 'text-green-600' : 'text-red-600'">
        邮箱{{ emailValid ? '有效' : '无效' }}
      </p>
    </div>
    
    <div class="mb-4">
      <h4>剪贴板操作</h4>
      <el-input v-model="copyText" placeholder="要复制的文本" />
      <ImButton @click="handleCopy" class="ml-2">复制到剪贴板</ImButton>
    </div>
    
    <div class="mb-4">
      <h4>本地存储</h4>
      <el-input v-model="storageValue" placeholder="存储值" />
      <ImButton @click="saveToStorage" class="ml-2">保存</ImButton>
      <ImButton @click="loadFromStorage" class="ml-2">加载</ImButton>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { 
  formatFileSize, 
  formatDate, 
  formatNumber, 
  validate,
  useClipboard,
  storage
} from 'imtes-ui'

// 格式化示例
const formattedSize = computed(() => formatFileSize(1048576)) // "1.0MB"
const formattedDate = computed(() => formatDate(new Date(), 'YYYY年MM月DD日'))
const formattedMoney = computed(() => formatNumber(1234.56, 2, '元')) // "1,234.56元"

// 验证示例
const testEmail = ref('')
const emailValid = computed(() => validate.email(testEmail.value))

const handleEmailInput = () => {
  console.log('邮箱验证结果:', emailValid.value)
}

// 剪贴板示例
const copyText = ref('Hello, Imtes UI!')
const { copy } = useClipboard()

const handleCopy = async () => {
  const success = await copy(copyText.value)
  if (success) {
    console.log('复制成功')
  }
}

// 存储示例
const storageValue = ref('')

const saveToStorage = () => {
  storage.set('demo_value', storageValue.value, 3600) // 1小时过期
  console.log('数据已保存')
}

const loadFromStorage = () => {
  const value = storage.get('demo_value')
  if (value) {
    storageValue.value = value
    console.log('数据已加载:', value)
  } else {
    console.log('没有找到存储的数据')
  }
}
</script>

文件操作示例

使用文件相关的Hooks：

查看代码

vue

<template>
  <div class="demo-space">
    <h3>文件操作</h3>
    
    <div class="mb-4">
      <h4>文件下载</h4>
      <ImButton 
        type="primary" 
        :loading="downloading" 
        @click="handleDownload"
      >
        下载文件
      </ImButton>
      <div v-if="downloadProgress > 0" class="mt-2">
        <el-progress :percentage="downloadProgress" />
      </div>
    </div>
    
    <div class="mb-4">
      <h4>数据导出</h4>
      <ImButton 
        type="success" 
        :loading="exporting" 
        @click="handleExport"
      >
        导出Excel
      </ImButton>
    </div>
    
    <div class="mb-4">
      <h4>打印功能</h4>
      <div ref="printContent" class="border p-4 mb-2">
        <h5>要打印的内容</h5>
        <p>这是一段测试内容，将被打印输出。</p>
      </div>
      <ImButton @click="handlePrint">打印内容</ImButton>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useDownload, useExport, usePrint } from 'imtes-ui'

const printContent = ref()

// 下载Hook
const { downloading, progress: downloadProgress, download } = useDownload()

const handleDownload = async () => {
  await download('https://example.com/sample.pdf', 'sample.pdf')
}

// 导出Hook
const { exporting, exportData } = useExport()

const handleExport = async () => {
  const data = [
    { name: '张三', age: 25, city: '北京' },
    { name: '李四', age: 30, city: '上海' },
    { name: '王五', age: 28, city: '广州' }
  ]
  
  await exportData(data, {
    filename: '用户数据.xlsx',
    headers: ['姓名', '年龄', '城市']
  })
}

// 打印Hook
const { print } = usePrint()

const handlePrint = () => {
  print(printContent.value)
}
</script>

组合使用进阶

完整的业务场景示例：

查看完整示例

vue

<template>
  <div class="demo-space">
    <h3>用户管理系统</h3>
    
    <!-- 操作栏 -->
    <div class="mb-4 flex justify-between">
      <div>
        <ImButton type="primary" @click="openAddDialog">新增用户</ImButton>
        <ImButton 
          type="success" 
          :loading="exporting" 
          @click="exportUsers"
        >
          导出数据
        </ImButton>
      </div>
      
      <div>
        <el-input 
          v-model="searchForm.keyword"
          placeholder="搜索用户..."
          @input="handleSearch"
          style="width: 200px"
        />
        <ImDateRange 
          v-model="searchForm.dateRange"
          start-label="注册开始"
          end-label="注册结束"
          :max-range="90"
          @change="handleSearch"
          class="ml-2"
        />
      </div>
    </div>
    
    <!-- 用户表格 -->
    <im-el-table 
      :data="tableData"
      :loading="loading"
      :columns="columns"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @page-change="handlePageChange"
    >
      <template #actions="{ row }">
        <ImButton size="small" @click="editUser(row)">编辑</ImButton>
        <ImButton 
          size="small" 
          type="danger" 
          @click="deleteUser(row)"
        >
          删除
        </ImButton>
      </template>
    </im-el-table>
    
    <!-- 用户表单弹窗 -->
    <ImDialog 
      v-model="formVisible" 
      :title="isEdit ? '编辑用户' : '新增用户'"
      width="600px"
    >
      <ImForm 
        ref="formRef"
        v-model="formData"
        :rules="formRules"
        :fields="formFields"
      />
      
      <template #footer>
        <ImButton @click="formVisible = false">取消</ImButton>
        <ImButton 
          type="primary" 
          :loading="submitting" 
          @click="handleSubmit"
        >
          确定
        </ImButton>
      </template>
    </ImDialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { 
  useTable, 
  useForm, 
  useDialog, 
  useConfirm,
  useExport,
  useDebounce,
  rules 
} from 'imtes-ui'

// 搜索表单
const searchForm = reactive({
  keyword: '',
  dateRange: [null, null]
})

// 表格管理
const {
  tableData,
  loading,
  currentPage,
  pageSize,
  total,
  refresh,
  search,
  handlePageChange
} = useTable({
  api: '/api/users',
  pageSize: 10
})

// 表单管理
const {
  formRef,
  formData,
  submitting,
  validate,
  resetForm,
  submit
} = useForm({
  initialData: {
    name: '',
    email: '',
    phone: '',
    status: 1
  }
})

// 弹窗管理
const { visible: formVisible, open: openForm, close: closeForm } = useDialog()

// 确认对话框
const { confirm } = useConfirm()

// 导出功能
const { exporting, exportData } = useExport()

const isEdit = ref(false)

// 表格列配置
const columns = [
  { field: 'id', title: 'ID', width: 80 },
  { field: 'name', title: '姓名', width: 120 },
  { field: 'email', title: '邮箱', minWidth: 200 },
  { field: 'phone', title: '手机号', width: 150 },
  { field: 'status', title: '状态', width: 100 },
  { field: 'actions', title: '操作', width: 150, slots: { default: 'actions' } }
]

// 表单字段配置
const formFields = [
  { 
    field: 'name', 
    label: '用户姓名', 
    component: 'el-input',
    required: true 
  },
  { 
    field: 'email', 
    label: '邮箱地址', 
    component: 'el-input',
    required: true 
  },
  { 
    field: 'phone', 
    label: '手机号码', 
    component: 'el-input',
    required: true 
  },
  { 
    field: 'status', 
    label: '用户状态', 
    component: 'el-select',
    options: [
      { label: '启用', value: 1 },
      { label: '禁用', value: 0 }
    ]
  }
]

// 验证规则
const formRules = {
  name: rules.required,
  email: rules.email,
  phone: rules.phone,
  status: rules.required
}

// 防抖搜索
const { debouncedFunction: debouncedSearch } = useDebounce(() => {
  search(searchForm)
}, 300)

const handleSearch = () => {
  debouncedSearch()
}

const openAddDialog = () => {
  isEdit.value = false
  resetForm()
  openForm()
}

const editUser = (row) => {
  isEdit.value = true
  Object.assign(formData, row)
  openForm()
}

const deleteUser = async (row) => {
  const result = await confirm(`确定要删除用户"${row.name}"吗？`, '删除确认')
  if (result) {
    // 调用删除API
    console.log('删除用户:', row.id)
    refresh()
  }
}

const handleSubmit = async () => {
  const isValid = await validate()
  if (isValid) {
    await submit()
    closeForm()
    refresh()
  }
}

const exportUsers = async () => {
  await exportData(tableData.value, {
    filename: '用户列表.xlsx',
    headers: ['ID', '姓名', '邮箱', '手机号', '状态']
  })
}
</script>

<style scoped>
.demo-space {
  padding: 20px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246

下一步

现在你已经学会了基本用法，可以：

深入学习组件

Button 按钮 - 了解按钮的高级功能和样式
Table 表格 - 掌握表格的完整功能
Dialog 对话框 - 学习对话框的拖拽和自定义
Form 表单 - 了解智能表单渲染功能
DateRange 日期范围 - 掌握日期范围选择器
Message 消息 - 学习消息提示的使用

掌握业务钩子

Hooks 钩子函数 - 学习30+业务钩子的使用
表格管理、表单处理、文件操作等常用场景

使用工具函数

Utils 工具函数 - 掌握验证、格式化、存储等工具

查看指南

开发指南 - 了解开发和构建流程
主题定制 - 学习如何自定义主题

获得帮助

如果你在使用过程中遇到问题：

查看组件文档中的详细 API 说明
访问在线演示查看实际效果
查看更新日志了解最新变更
参考完整的使用示例和最佳实践

快速开始 ​

前置条件 ​

第一个组件 ​

使用表格组件 ​

使用表单组件 ​

使用工具函数 ​

文件操作示例 ​

组合使用进阶 ​

下一步 ​

深入学习组件 ​

掌握业务钩子 ​

使用工具函数 ​

查看指南 ​

获得帮助 ​

快速开始

前置条件

第一个组件

使用表格组件

使用表单组件

使用工具函数

文件操作示例

组合使用进阶

下一步

深入学习组件

掌握业务钩子

使用工具函数

查看指南

获得帮助