uniapp常用的ui组件

### UniApp 常用 UI 组件列表及使用方法 #### 1. 图标组件 `uni-icons` `uni-icons` 是用于显示图标的组件，支持多种内置图标样式。通过设置属性 `type` 来指定不同的图标类型。 ```html <template> <view> <uni-icons type="home" size="30"></uni-icons> </view> </template> <script> export default { } </script> ``` 此代码片段展示了如何创建一个大小为30px的家庭图标[^2]。 #### 2. 宫格组件 `uni-grid` 该组件适用于展示多个项目的网格布局，可通过配置项调整列数和其他外观特性。 ```html <template> <view> <uni-grid :column="3"> <uni-grid-item v-for="(item, index) in items" :key="index"> <!-- Grid item content --> </uni-grid-item> </uni-grid> </view> </template> <script> export default { data() { return { items: ['Item 1', 'Item 2', 'Item 3'] } } } </script> ``` 这段脚本实现了三列的宫格式排列，并循环渲染数据集合中的每一项。 #### 3. 卡片组件 `uni-card` 卡片是一种常见的信息容器，能够承载文字、图片等内容。可以通过简单的标签嵌套实现复杂的内容结构。 ```html <template> <view> <uni-card title="Card Title"> Card Content... </uni-card> </view> </template> ``` 上述例子说明了怎样快速搭建一张带有标题和正文内容的基础卡片。 #### 4. 导航条组件 `uni-nav-bar` 作为页面顶部的重要组成部分之一，导航栏通常用来放置应用名称或返回按钮等功能性元素。 ```html <template> <view> <uni-nav-bar left-icon="back" @click-left="goBack">Page Title</uni-nav-bar> </view> </template> <script> export default { methods: { goBack() { console.log('Go back'); } } } </script> ``` 这里给出了一个包含左侧箭头图标并绑定点击事件处理函数的例子。 #### 5. 列表组件 `uni-list / uni-list-item` 这两个组件配合使用可轻松构建各种类型的列表视图，如联系人列表、菜单选项等。 ```html <template> <view> <uni-list> <uni-list-item title="List Item 1"/> <uni-list-item title="List Item 2"/> </uni-list> </view> </template> ``` 以上实例呈现了一个由两个子项构成的基本列表。 #### 6. 输入框组件 `uni-easyinput` 简化版输入控件，适合于收集用户的短文本输入，比如姓名、电话号码等基本信息。 ```html <template> <view> <uni-easyinput placeholder="Enter your name here..."></uni-easyinput> </view> </template> ``` 这个模板定义了一行提示用户填写名字的地方。 #### 7. 弹窗组件 `uni-popup` 当需要向用户提供额外的信息或者请求确认操作时，可以考虑采用弹出层的形式展现给访客看。 ```html <template> <view> <button @click="showPopup = true">Show Popup</button> <uni-popup ref="popup" type="center"> This is a popup message. </uni-popup> </view> </template> <script> export default { data() { return { showPopup: false }; }, watch: { showPopup(val) { if (!val) this.$refs.popup.close(); else this.$nextTick(() => this.$refs.popup.open()); } } }; </script> ``` 最后一部分介绍了如何触发显示隐藏状态下的中心位置居中的消息框。

### UniApp 桌面 UI 组件库及使用方法 对于希望在桌面应用中利用 UniApp 开发的应用程序来说，选择合适的 UI 组件库至关重要。尽管 Element 是最受欢迎的 Vue UI 框架之一[^1]，它并不直接支持 UniApp 平台。然而，有其他替代方案可以考虑。 #### ThorUI 移动端组件库扩展至桌面环境的可能性 ThorUI 提供了一个轻量级、简洁且全面的移动端组件库，能够显著提高开发效率，并兼容 uniapp 和微信小程序原生版本组件库[^2]。虽然 ThorUI 主要针对移动设备设计，但在某些情况下也可以用于简单的桌面应用程序界面构建。不过需要注意的是，在实际应用于桌面环境中时可能需要额外调整样式以适应更大的屏幕尺寸和不同的交互模式。 #### 自定义开发适合 UniApp 的桌面 UI 组件 鉴于目前市场上缺乏专门为 UniApp 设计的强大桌面 UI 库，一些开发者选择了自定义路径来满足特定需求。例如 mosowe-menus 就是一个由个人开发者创建并分享出来的菜单栏 UI 组件实例[^3]。这种方法允许完全控制最终产品的外观和功能特性，但也意味着更多的工作量以及维护责任。 为了更好地集成这些第三方或自制组件到 UniApp 中： ```javascript // 假设我们正在尝试引入一个名为 'customComponent' 的外部组件 import CustomComponent from '@/components/custom-component.vue'; export default { components: {CustomComponent}, } ```