167 lines
3.7 KiB
Vue
167 lines
3.7 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"
|
|
></question-action>
|
|
</template>
|
|
<!-- <div-->
|
|
<!-- v-for="item in questionAction"-->
|
|
<!-- :key="item.key"-->
|
|
<!-- class=""-->
|
|
<!-- :class="item.class ? item.class : ''"-->
|
|
<!-- @click="itemAction(item)"-->
|
|
<!-- >-->
|
|
<!-- <i class="icon iconfont choose-question-active-container-icon" v-html="item.icon"></i>-->
|
|
<!-- <div class="choose-question-active-container-name">-->
|
|
<!-- {{ item.name }}-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
</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 questionAction = ref([
|
|
// {
|
|
// icon: '',
|
|
// name: '编辑',
|
|
// key: 'edit',
|
|
// class: ''
|
|
// },
|
|
// {
|
|
// icon: '',
|
|
// name: '复制',
|
|
// key: 'copy',
|
|
// class: ''
|
|
// },
|
|
// {
|
|
// icon: '',
|
|
// name: '移动',
|
|
// key: 'moveUp',
|
|
// class: 'moverQues'
|
|
// },
|
|
// // {
|
|
// // icon:'',
|
|
// // name:'下移',
|
|
// // key:'moveDown',
|
|
// // class:''
|
|
// // },
|
|
// {
|
|
// icon: '',
|
|
// name: '删除',
|
|
// key: 'delete',
|
|
// class: ''
|
|
// }
|
|
// ]);
|
|
const emit = defineEmits(['getChooseQuestionId']);
|
|
|
|
// 选中题目
|
|
const chooseItem = () => {
|
|
// 使用从 defineProps 接收的 element 对象
|
|
emit('getChooseQuestionId', props.element);
|
|
};
|
|
|
|
// const itemAction = (item) => {
|
|
// switch (item.key) {
|
|
// case 'edit':
|
|
// // vue router跳转到/edit
|
|
//
|
|
// router.push({
|
|
// path: '/design/edit',
|
|
// query: {
|
|
// id: props.element.id
|
|
// }
|
|
// });
|
|
// break;
|
|
// case 'copy':
|
|
// break;
|
|
// case 'moveUp':
|
|
// break;
|
|
// case 'moveDown':
|
|
// break;
|
|
// case 'delete':
|
|
// break;
|
|
// }
|
|
// };
|
|
</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>
|