说明
该插件可以实现输入数组后座位自动分布、拖拽修改座位分布、分布图保存到本地等 当前版本为最初版本，功能单一，后续将不断更新迭代。目前仅适用vue2，其他功能及版本适配将陆续开发。
演示

安装
通过npm下载 npm install seatassign 在main.js中引用
import Vue from 'vue';
import seatassign from 'seatassign';
Vue.use(seatassign)使用
<template>
<div class="container">
<seatAssign ref="seatAssignRef" :roundConfig="roundConfig">
<!-- 桌子自定义 -->
<template v-slot:table>
<div style="width:200px;height:200px;background:rgb(0, 128, 124);border-radius:100%;display:flex;justify-content:center;align-items:center;font-size:30px;color:white">
自定义桌布
</div>
</template>
<!-- 座位自定义 -->
<template v-slot:seat="{seatInfo,index}">
<div style="color:red;width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:20px;background-color: pink;border-radius: 100%;width: 80px;height: 80px;">
{{index}}:{{seatInfo.name}}
</div>
</template>
</seatAssign>
</div>
</template>
<script>
export default {
name: "test",
data() {
return {
roundConfig: {
PersonList: [
{
name: "刘备1",
initialX: "260px", //初始x轴位置
initialY: "60px", //初始y轴位置
// currentX: "", //移动后的x轴位置
// currentY: "", //移动后的y轴位置
},
{
name: "曹操2",
initialX: "280px", //初始x轴位置
initialY: "60px", //初始y轴位置
},
{
name: "孙权3",
initialX: "300px", //初始x轴位置
// initialY: "60px", //初始y轴位置
},
],
boxWidth: 600, //“画布”宽度
boxHeight: 600, //“画布”高度
tableDiameter: 300, //圆桌直径
seatDiameter: 80, //座位直径
tableDistance: 10, //座位和圆桌的距离
btnVisiable: ["reset", "staging", "saveImg"], //reset重置座位，staging暂存分布及恢复暂存，saveImg保存图片
assignType: "normal", //选座模式1.free自由拖拽，2.exchange座位互换，3.slide滑动互换
},
};
},
methods: {
},
created() {},
mounted() {
},
};
</script>
<style lang="less" scoped>
.container {
padding-top: 100px;
}
</style>
功能说明
通过传入数组，实现座位的初始化、拖拽等功能
roundConfig绑定圆桌配置参数列表
| 参数名称 | 类型 | 默认取值 | 是否必须 | 说明 |
|---|---|---|---|---|
| PersonList | Array | [{name:’姓名1’}, {name:’姓名2’},{name:’姓名3’}] | ✓ | 数组里存储将要渲染的人员信息 |
| boxWidth | Number | 600 | × | 桌子外的“画布”宽度 |
| boxHeight | Number | 600 | × | 桌子外的“画布”高度 |
| tableDiameter | Number | 300 | × | 中间圆桌的直径 |
| seatDiameter | Number | 80 | × | 座位直径 |
| tableDistance | Number | 10 | × | 座位和圆桌的距离 |
| btnVisiable | Array | ["reset", "staging", "saveImg"] | × | 按钮展示,reset重置座位，staging暂存分布及恢复暂存，saveImg保存图片 |
slot
| 名称 | 说明 |
|---|---|
| table | 桌布元素自定义，可以自己给定样式和交互 |
| seat | 座位元素自定义，可以自己给定样式和交互，返回所有座位信息和当下座位的index |
Methods
| 名称 | 说明 |
|---|---|
| resetInterPos | 根据绑定的roundConfig中的PersonList信息重置座位。注意回显数据的格式要正确 |
| resetRoundTableSeat | 重置座位，重新计算座位分布坐标并将座位重置 |
更多功能正在开发中。。。。