vue3-drr-grid-layout 镜像反转

vue3-drr-grid-layout is-mirrored属性设置镜像反转,就是从左向右还是从右到左对齐。
很遗憾改组件并没有支持反转,我们通过flex样式来实现同样的效果。

在线试一试

完整代码

<template>
<div class="btn" @click="isMirrored=!isMirrored" >{{isMirrored? '关闭镜像反转':'开启镜像反转' }}</div>
<div :style="{'display':'flex','justify-content':isMirrored?' flex-start':' flex-end','background-color':' #fbfbfb'}">
<div id="content" style="width: 50%;">
<grid-layout v-model:layout="layout" :col-num="6" :row-height="30" :is-draggable="true" :is-resizable="true"
             :margin="[10, 10]"  style="padding: 10px;">
            <template #default="{ gridItemProps }">
                <grid-item v-for="item in layout" :key="item.i" v-bind="gridItemProps" :x="item.x" :y="item.y"
                    :w="item.w" :h="item.h" :i="item.i" :auto-size="false"  >
                    <div class="item">
                        <label>{{ item.i }}</label>
                    </div>
                </grid-item>
            </template>
        </grid-layout>
  </div></div>
</template>
<script setup lang="ts">
/*
 vue3-drr-grid-layout 中文文档
 https://www.itxst.com/vue3-drr-grid-layout/tutorial.html
*/
import { getCurrentInstance, onMounted, ref } from "vue";
import { GridLayout, GridItem } from "vue3-drr-grid-layout";
import "vue3-drr-grid-layout/dist/style.css";

const layout = ref([
  { x: 0, y: 0, w: 2, h: 2, i: 0 },
  { x: 2, y: 0, w: 2, h: 2, i: 1 },
  { x: 4, y: 0, w: 2, h: 2, i: 2 },
  { x: 0, y: 1, w: 6, h: 2, i: 3 },
]);

// 镜像反转
const isMirrored =ref(true);
</script>

<style scoped>
.btn{
  margin: 10px 20px 0px 20px;
  border: solid 1px #ddd;
  background-color: #eee;
  display: inline-block;
  padding: 2px 6px;
  color: rgb(57, 21, 221);
  cursor: pointer;
}
.droppable-element {
  width: 120px;
  text-align: center;
  background: #fdd;
  border: 1px solid black;
  margin: 10px 0;
  padding: 10px;
}
.item {
  display: flex;
  justify-content: space-between;
}
.item > span {
  margin-left: 10px;
  padding: 1px;
  border: solid 1px #ddd;
  cursor: pointer;
  background-color: rgb(171, 171, 171);
  color: #000;
  font-size: 11px;
}
</style>