更新记录

0.0.1（2025-05-02） 下载此版本

• init 初化提交 兼容ios/web/小程序/鸿蒙next

平台兼容性

lime-layout 布局

• 提供row/col来划分区块来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性。
• 插件依赖lime-style,lime-shared不喜勿下

文档

layout

安装

插件市场导入即可

代码演示

基础使用

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

<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>

间距控制

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

<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: 8</text></l-col>
    <l-col span="12"><text>span: 8</text></l-col>
    <l-col span="12"><text>span: 8</text></l-col>
    <l-col span="12"><text>span: 8</text></l-col>
</l-row>

对齐方式

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

<!-- 水平对齐 -->
<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: 6</text></l-col>
    <l-col span="12"><text>span: 6</text></l-col>
</l-row>
<l-row :gap="[0,10]" align="center">
    <l-col span="12"><text>span: 6</text></l-col>
    <l-col span="12"><text>span: 6</text></l-col>
</l-row>
<l-row :gap="[0,10]" align="end">
    <l-col span="12"><text>span: 6</text></l-col>
    <l-col span="12"><text>span: 6</text></l-col>
</l-row>

宽高比控制

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

<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无效

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

查看示例

• 导入后直接使用这个标签查看演示效果

 // 代码位于 uni_modules/lime-layout/compoents/lime-layout 
<lime-layout />

插件标签

• 默认 l-layout 为 component
• 默认 lime-layout 为 demo

Vue2

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

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

API

Row Props

Col Props

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。