feat(Design): 优化题目和选项的移动操作
- 在 OptionAction 组件中添加新的移动选项功能 - 在 QuestionAction 组件中增加题目移动和复制功能- 更新组件样式,替换部分图标 - 优化移动操作的交互逻辑
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user