drag拖拽

纵向拖拽

<template>
  <EyDrag
    v-model:list="titleList"
    :listItemWrapStyle="{ width: '200px' }"
    labelKey="data"
  />
</template>

<script setup lang="ts">
import { titleList as titleListData } from './config';
import { ref } from 'vue';
import { EyDrag } from 'ey-admin';

const titleList = ref(titleListData);
</script>

<style scoped>
.wrap-box {
  flex-direction: column;
  border: 1px solid #f0f0f0;
}
.book-bg {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 180px;
  height: 250px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-direction: column;
  position: relative;
  margin: 20px 0;
}
.title {
  font-size: 18px;
  padding-top: 40px;
  text-align: center;
}
.no-drag-text {
  color: red;
  text-align: center;
}
.auth {
  text-align: center;
}
.descript {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-box {
  width: 100%;
  height: 30px;
  border-top: 1px solid #f0f0f0;
}
</style>

export const titleList = [
  { data: '昔人已乘黄鹤去' },
  { data: '此地空余黄鹤楼' },
  { data: '黄鹤一去不复返' },
  { data: '白云千载空悠悠' },
  { data: '晴川历历汉阳树' },
  { data: '芳草萋萋鹦鹉洲' },
];

隐藏代码

横向拖拽&禁止拖拽&自定义内容

<template>
  <EyDrag v-model:list="list" :itemWidth="'25%'" direction="horizontal">
    <template #item="{ index, item }">
      <div class="flex-wrap flex-y-center wrap-box">
        <div class="book-bg">
          <h2 class="title">《{{ item.title }}》</h2>
          <div class="auth">{{ item.auth }}</div>
          <div v-if="item.noDrag" class="no-drag-text">禁止移动</div>
          <div class="descript">{{ item.descript }}</div>
        </div>
        <div class="tool-box flex-wrap flex-x-center flex-y-center">
          <DeleteOutlined style="cursor: pointer" @click="remove(index)" />
        </div>
      </div>
    </template>
  </EyDrag>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { DeleteOutlined } from '@ant-design/icons-vue';
import { bookList } from './config';
import { EyDrag } from 'ey-admin';
const list = ref(bookList);
function remove(index: number) {
  list.value.splice(index, 1);
}
</script>

<style scoped>
.wrap-box {
  flex-direction: column;
  border: 1px solid #f0f0f0;
}
.book-bg {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 180px;
  height: 250px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-direction: column;
  position: relative;
  margin: 20px 0;
}
.title {
  font-size: 18px;
  padding-top: 40px;
  text-align: center;
}
.no-drag-text {
  color: red;
  text-align: center;
}
.auth {
  text-align: center;
}
.descript {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-box {
  width: 100%;
  height: 30px;
  border-top: 1px solid #f0f0f0;
}
</style>

export const bookList = [
  {
    title: '三国演义',
    descript: '东汉末年群雄争霸的历撒旦发射点发射点发射点发射点发史演义',
    auth: '罗贯中',
    noDrag: true,
  },
  {
    title: '水浒传',
    descript: '北宋梁山好汉反抗压迫的侠义故事',
    auth: '施耐庵',
  },
  {
    title: '西游记',
    descript: '唐僧师徒西天取经的神魔冒险',
    auth: '吴承恩',
  },
  {
    title: '红楼梦',
    descript: '贾府兴衰与宝黛爱情的家族史诗',
    auth: '曹雪芹',
  },
  {
    title: '安徒生童话',
    descript: '充满奇幻与哲理的经典童话集',
    auth: '安徒生',
  },
  {
    title: '老人与海',
    descript: '老渔夫与大海搏斗的勇气之歌',
    auth: '海明威',
  },
  {
    title: '生活',
    descript: '记录平凡人生的真实与感悟',
    auth: '佚名',
  },
  {
    title: '钢铁是怎样炼成的',
    descript: '保尔·柯察金坚韧成长的励志传奇',
    auth: '奥斯特洛夫斯基',
  },
];

隐藏代码

API

Attributes

成员	说明	类型	默认值
disabled	禁用	boolean	false
direction	插入区域方向，默认为垂直方向	'vertical' | 'horizontal'	'vertical'
padding	设置内边距，也可以理解为空隙	number	6
list	需要拖动的列表，如有需禁止移动的项请设置 noDrag:true	any[]	—
labelKey	默认布局中要展示的名称	string	'label'
itemWidth	可移动模块的宽度占比(可由propListItemWrapStyle覆盖)	string | number	'auto'
listItemWrapStyle	外部容器的自定义样式	CSSProperties	{}