更新记录

0.0.2（2025-02-18） 下载此版本

• chore: 更新依赖

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

• init

平台兼容性

lime-space 间距

• 设置组件之间的间距。
• 非uvue端使用的是flex gap实现，可能存在兼容问题

安装

插件市场导入即可

代码演示

基础用法

Space 组件会在各个子组件之间设置一定的间距，默认间距为 8px。

<l-space>
    <l-button type="primary">品牌色</l-button>
    <l-button type="primary">品牌色</l-button>
    <l-button type="warning">品牌色</l-button>
</l-space>

垂直排列

将 direction 属性设置为 vertical，可以设置垂直方向排列的间距。

<l-space direction="vertical" :fill="true">
    <l-button type="primary" :data-block="true">品牌色</l-button>
    <l-button type="primary" :data-block="true">品牌色</l-button>
    <l-button type="warning" :data-block="true">品牌色</l-button>
</l-space>

自定义间距

通过调整 size 的值来控制间距的大小。传入 number 类型时，会默认使用 px 单位；也可以传入带有单位的值。

<!-- 20px -->
<l-space :size="20">
    <l-button type="primary">品牌色</l-button>
    <l-button type="primary">品牌色</l-button>
    <l-button type="warning">品牌色</l-button>
</l-space>

<!-- 数组 -->
<l-space :size="[10,20]">
    <l-button type="primary">品牌色</l-button>
    <l-button type="primary">品牌色</l-button>
    <l-button type="warning">品牌色</l-button>
</l-space>

对齐方式

通过调整 align 的值来设置子元素的对齐方式, 可选值为 start, center ,end ,baseline，在水平模式下的默认值为 center。

<radio-group @change="onChange" style="flex-direction: row;">
    <radio style="padding: 20rpx" class="radio" value="start">start</radio>
    <radio style="padding: 20rpx" class="radio" value="center">center</radio>
    <radio style="padding: 20rpx" class="radio" value="end">end</radio>
    <radio style="padding: 20rpx" class="radio" value="baseline">baseline</radio>
</radio-group>
<l-space :align="align">
    <l-button type="primary">{{align}}</l-button>
    <view style="padding: 40px 20px; background: #eee">Block</view>
</l-space>

export default {
    data() {
        return {
            align: 'center'
        }
    },
    methods: {
        onChange(e: RadioGroupChangeEvent){
            this.align = e.detail.value
        }
    },
    mounted() {

    }
}

自动换行

在水平模式下, 通过 wrap 属性来控制子元素是否自动换行。

<l-space :wrap="true">
    <l-button type="primary">品牌色</l-button>
    <l-button type="primary">品牌色</l-button>
    <l-button type="primary">品牌色</l-button>
    <l-button type="primary">品牌色</l-button>
    <l-button type="warning">品牌色</l-button>
    <l-button type="warning">品牌色</l-button>
    <l-button type="primary">品牌色</l-button>
    <l-button type="warning">品牌色</l-button>
    <l-button type="warning">品牌色</l-button>
</l-space>

API

Props

Slots