feat(Design): 优化题目和选项的移动操作

- 在 OptionAction 组件中添加新的移动选项功能
- 在 QuestionAction 组件中增加题目移动和复制功能- 更新组件样式,替换部分图标
- 优化移动操作的交互逻辑
This commit is contained in:
陈昱达
2025-03-05 19:41:35 +08:00
parent 9cb1f508fe
commit c47a997636
3 changed files with 74 additions and 13 deletions

View File

@@ -5,6 +5,7 @@
<slot name="item" :element="item" :index="index"></slot>
<span v-if="active" class="flex">
<van-icon name="close" @click="deleteOption(index)"></van-icon>
<van-icon name="setting-o" @click="openMoveModel(item, index)"></van-icon>
<van-icon name="more-o" @click="openOptionActionModel(item, index)"></van-icon>
</span>
</div>
@@ -43,6 +44,21 @@
<van-cell title="上移选项" :border="false" @click="optionMove('up')"></van-cell>
</van-cell-group>
</van-action-sheet>
<van-action-sheet
v-model:show="moveShow"
cancel-text="取消"
@select="optionMove"
@cancel="moveShow = false"
:actions="actions"
>
<!-- <template #description>-->
<!-- <div class="flex flex-start">操作选项</div>-->
<!-- </template>-->
<!-- <van-cell-group :border="false" class="ml10">-->
<!-- <van-cell title="下移选项" :border="false" @click="optionMove('down')"></van-cell>-->
<!-- <van-cell title="上移选项" :border="false" @click="optionMove('up')"></van-cell>-->
<!-- </van-cell-group>-->
</van-action-sheet>
</template>
<script setup>
import { ref } from 'vue';
@@ -61,8 +77,14 @@ const props = defineProps({
default: false
}
});
const actions = [
{ name: '上移选项', action: 'up' },
{ name: '下移选项', action: 'down' }
];
// const emit = defineEmits(['update:data']);
const show = ref(false);
const moveShow = ref(false);
const activeOption = ref({});
const activeIndex = ref(-1);
const element = ref(props.data);
@@ -78,23 +100,27 @@ const openOptionActionModel = (item, index) => {
activeOption.value = item;
activeIndex.value = index;
};
const openMoveModel = (item, index) => {
moveShow.value = true;
activeOption.value = item;
activeIndex.value = index;
};
// 上下移动
const optionMove = (action) => {
switch (action) {
switch (action.action) {
case 'up':
if (activeIndex.value === 0) {
show.value = false;
return;
moveShow.value = false;
return false;
}
// 向上移动
element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
activeIndex.value -= 1;
break;
case 'down':
if (activeIndex.value === element.value.length) {
show.value = false;
return;
if (activeIndex.value === element.value.length - 1) {
moveShow.value = false;
return false;
}
element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
activeIndex.value += 1;