104 lines
2.3 KiB
Vue
104 lines
2.3 KiB
Vue
<template>
|
|
<div class="choose-question-container">
|
|
<div
|
|
class="choose-question-context"
|
|
:class="chooseQuestionId === element.id ? 'choose-question-active' : ''"
|
|
@click="chooseItem"
|
|
>
|
|
<slot></slot>
|
|
<!-- 题目操作-->
|
|
<van-cell v-if="chooseQuestionId === element.id" class="choose-question-active-container">
|
|
<template #icon>
|
|
<slot name="action" :element="element" :index="index"></slot>
|
|
</template>
|
|
<template #title>{{}}</template>
|
|
<template #right-icon>
|
|
<question-action
|
|
v-model:data="element"
|
|
:questions="questions"
|
|
:questionIndex="index"
|
|
@move="emit('move', $event)"
|
|
@copy="emit('copy', $event)"
|
|
@delete="emit('delete', $event)"
|
|
@setting="emit('setting', $event)"
|
|
@logics="emit('logics', $event)"
|
|
></question-action>
|
|
</template>
|
|
</van-cell>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import QuestionAction from '@/views/Design/components/ActionCompoents/QuestionAction.vue';
|
|
import { ref } from 'vue';
|
|
const props = defineProps({
|
|
element: {
|
|
type: Object,
|
|
default: () => {
|
|
// 此方法目前为空，未来可能扩展
|
|
}
|
|
},
|
|
index: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
questions: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
chooseQuestionId: {
|
|
type: String,
|
|
default: '0'
|
|
}
|
|
});
|
|
const element = ref(props.element);
|
|
// 选中题目后出现的操作
|
|
const emit = defineEmits(['getChooseQuestionId', 'move', 'copy']);
|
|
|
|
// 选中题目
|
|
const chooseItem = () => {
|
|
// 使用从 defineProps 接收的 element 对象
|
|
emit('getChooseQuestionId', props.element);
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.choose-question-container {
|
|
padding: 5px;
|
|
|
|
& .choose-question-context {
|
|
overflow: hidden;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
& .choose-question-active {
|
|
outline: 2px solid #70b936;
|
|
}
|
|
|
|
& .ml10 {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
& .fs20 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
& .choose-question-active-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
//margin: 0 20px;
|
|
color: #666;
|
|
font-size: 12px;
|
|
|
|
& .choose-question-active-container-icon {
|
|
font-size: 14px;
|
|
}
|
|
|
|
& .choose-question-active-container-name {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|