520242ec51
- 新增 OptionAction 组件用于选项操作 - 更新 BaseSelect 组件，集成 OptionAction 功能 - 优化 Paging 组件样式 - 调整 Design 页面布局和样式
126 lines
2.5 KiB
Vue
126 lines
2.5 KiB
Vue
<template>
|
||
<div class="page" :class="{ active: active }">
|
||
<div class="page-text">
|
||
<div class="page-text-line"></div>
|
||
<span class="page-text-content">
|
||
第 {{ info.page }}/{{ info.total }} 页：{{ info.first_title }}-{{ info.last_title }}
|
||
</span>
|
||
<div class="page-text-line"></div>
|
||
<div v-if="!isOneQuestionPerPage" class="page-icon">
|
||
<i
|
||
class="iconfont active-icon"
|
||
:style="{ marginRight: isLastPage ? '0' : '16px' }"
|
||
@click="activePage"
|
||
></i
|
||
>
|
||
<template v-if="!isLastPage">
|
||
<i class="iconfont moverQues" style="margin-right: 16px"></i>
|
||
<i class="iconfont" @click="deleteHandle"></i>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue';
|
||
import { useCounterStore } from '@/stores/counter';
|
||
import { storeToRefs } from 'pinia';
|
||
|
||
// Props 定义
|
||
const props = defineProps({
|
||
info: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
index: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
active: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
});
|
||
|
||
// 使用 Pinia Store
|
||
const counterStore = useCounterStore();
|
||
const { questionsInfo } = storeToRefs(counterStore);
|
||
|
||
// 计算属性
|
||
const isOneQuestionPerPage = computed(() => {
|
||
return !!questionsInfo.value?.survey?.is_one_page_one_question;
|
||
});
|
||
|
||
const isLastPage = computed(() => {
|
||
return props.index === (questionsInfo.value?.questions?.length - 1 || -1);
|
||
});
|
||
|
||
// 自定义事件
|
||
const emit = defineEmits(['activePage', 'removePage']);
|
||
|
||
function activePage() {
|
||
emit('activePage');
|
||
}
|
||
|
||
function deleteHandle() {
|
||
emit('removePage');
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/style/whole/whole';
|
||
|
||
.page {
|
||
&.active {
|
||
color: $yili-default-color;
|
||
|
||
.page-text-line {
|
||
border-color: $yili-default-color;
|
||
}
|
||
|
||
.active-icon {
|
||
color: $yili-default-color;
|
||
}
|
||
}
|
||
|
||
.page-text {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
height: 38px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.page-text-line {
|
||
flex: 1;
|
||
height: 1px;
|
||
border: 1px dashed #bfbfbf;
|
||
}
|
||
|
||
.page-text-content {
|
||
margin: 0 3px;
|
||
cursor: default;
|
||
}
|
||
|
||
.page-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-right: 18px;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.iconfont {
|
||
width: 24px;
|
||
height: 24px;
|
||
color: #dadada;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
color: $yili-default-color;
|
||
}
|
||
}
|
||
}
|
||
</style>
|