LimeUI+1.2.1

主题

LimeLayout 布局 ​

一个灵活的栅格布局组件，提供row和col组件来划分区块，指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性。组件基于24栅格系统设计，支持多种对齐方式、间距控制和宽高比设置，适用于各种复杂的页面布局需求。

插件依赖：lime-style、lime-shared

文档链接 ​

📚 组件详细文档请访问以下站点：

安装方法 ​

  1. 在uni-app插件市场入口 中搜索并导入lime-layout
  2. 导入后可能需要重新编译项目
  3. 在页面中使用l-row和l-col组件

代码演示 ​

基础使用 ​

span 控制列宽（1-24）
offset 设置列偏移量

html
<l-row>
  <l-col span="8"><text>span: 8</text></l-col>
  <l-col span="8"><text>span: 8</text></l-col>
  <l-col span="8"><text>span: 8</text></l-col>
  <l-col></l-col>
</l-row>
<l-row>
  <l-col span="4"><text>span: 4</text></l-col>
  <l-col span="10" offset="4"><text>offset: 4, span: 10</text></l-col>
</l-row>
<l-row>
  <l-col offset="12" span="12"><text>offset: 12, span: 12</text></l-col>
</l-row>
<l-row gap="20">
  <l-col span="6"><text>span: 6</text></l-col>
  <l-col><text>span</text></l-col>
  <l-col span="auto"><text>span: auto</text></l-col>
</l-row>
js
export default {
  data() {
    return {
      // 示例数据
    }
  },
  methods: {
    // 示例方法
  }
}

间距控制 ​

水平间距：gap="20"（单位支持rpx/px）
垂直间距：:gap="[20,20]"（[水平, 垂直]）

html
<l-row gap="20">
  <l-col span="8"><text>span: 8</text></l-col>
  <l-col span="8"><text>span: 8</text></l-col>
  <l-col span="8"><text>span: 8</text></l-col>
</l-row>
<l-row :gap="[20,20]">
  <l-col span="12"><text>span: 12</text></l-col>
  <l-col span="12"><text>span: 12</text></l-col>
  <l-col span="12"><text>span: 12</text></l-col>
  <l-col span="12"><text>span: 12</text></l-col>
</l-row>

对齐方式 ​

水平对齐：justify="start | center | end | around | between | evenly"
垂直对齐：align="start | center | end | stretch"

html
<!-- 水平对齐 -->
<l-row :gap="[0,10]" justify="start">
  <l-col span="6"><text>span: 6</text></l-col>
  <l-col span="6"><text>span: 6</text></l-col>
</l-row>
<l-row :gap="[0,10]" justify="center">
  <l-col span="6"><text>span: 6</text></l-col>
  <l-col span="6"><text>span: 6</text></l-col>
</l-row>
<l-row :gap="[0,10]" justify="end">
  <l-col span="6"><text>span: 6</text></l-col>
  <l-col span="6"><text>span: 6</text></l-col>
</l-row>
<!-- 垂直对齐 -->
<l-row :gap="[0,10]" align="start">
  <l-col span="12"><text>span: 12</text></l-col>
  <l-col span="12"><text>span: 12</text></l-col>
</l-row>
<l-row :gap="[0,10]" align="center">
  <l-col span="12"><text>span: 12</text></l-col>
  <l-col span="12"><text>span: 12</text></l-col>
</l-row>
<l-row :gap="[0,10]" align="end">
  <l-col span="12"><text>span: 12</text></l-col>
  <l-col span="12"><text>span: 12</text></l-col>
</l-row>

宽高比控制 ​

通过配置aspectRatio属性，可以使col组件自动维持指定的宽度与高度比例，特别适合需要保持特定比例的媒体内容布局。

html
<l-row :gap="[10,10]" align="start">
  <l-col span="8" :aspectRatio="3/4"><text style="background-color: #ddd; flex: 1">3/4</text></l-col>
  <l-col span="8" :aspectRatio="3/4"><text style="background-color: #ddd; flex: 1">3/4</text></l-col>
  <l-col span="8" :aspectRatio="3/4"><text style="background-color: #ddd; flex: 1">3/4</text></l-col>
</l-row>

列顺序 ​

通过order控制列顺序（数值越大越靠后）。uniapp x app无效

html
<l-row :gap="[0,10]" align="start">
  <l-col span="12"><text>span: 12</text></l-col>
  <l-col span="12" :order="-1"><text>span: 12</text></l-col>
</l-row>
<l-row :gap="[0,10]" align="center">
  <l-col :order="2"><text>order: 2</text></l-col>
  <l-col :order="1"><text>order: 1</text></l-col>
  <l-col><text>order: 0</text></l-col>
</l-row>

快速预览 ​

导入插件后，可以直接使用以下标签查看演示效果：

html
<!-- 代码位于 uni_modules/lime-layout/components/lime-layout -->
<lime-layout />

插件标签说明 ​

  • l-row 和 l-col 为组件标签
  • lime-layout 为演示标签

Vue2使用说明 ​

本插件使用了composition-api，如需在Vue2项目中使用，请按照官方教程配置。

关键配置代码（在main.js中添加）：

js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API文档 ​

Row Props ​

属性名说明类型默认值可选值
gap列间距，数组格式时表示[水平间距, 垂直间距]Array<string|number>|string|number-数字或带单位字符串（如：20/20rpx）
justify主轴对齐方式（水平方向）stringstartstart
center
end
around
between
evenly
align交叉轴对齐方式（垂直方向）stringstartstart
center
end
stretch
wrap是否允许子元素换行booleantruetrue
false
lStyle自定义容器样式string|Object-CSS字符串或样式对象

Col Props ​

属性名说明类型默认值
span列占比（1-24），设为auto时自动分配剩余空间，none会根据自身宽高来设置尺寸number|string-
offset列偏移量（基于24栅格）number|string0
order排序优先级（数值越大越靠后）number0
aspectRatio宽高比number-
lStyle自定义列样式string|Object-

Row Slots ​

名称说明
default行内容，通常是一个或多个l-col组件

Col Slots ​

名称说明
default列内容

支持与赞赏 ​

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助微信赞助

源代码 ​

组件源码