sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

暂存数据

v1.1.0
于肖磊 2024-11-26 13:33:13 +08:00
parent 0f9b5d1969
commit 6050b53929
2 changed files with 114 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/url-value/index.vue
View File

@ -1,6 +1,6 @@
<!-- 链接组件 -->
<template>
<div :class="['flex-row align-c gap-10 br-d radius-sm plr-11 url-value-input', props.isDisabled ? 'c-pointer' : '']" @click="dialogVisible = props.isDisabled">
<div :class="['flex-row align-c gap-10 br-d radius-sm plr-11 url-value-input', !props.isDisabled ? 'c-pointer' : '']" @click="dialogVisible = !props.isDisabled">
<div class="flex-1 flex-width size-12 text-line-1">
<text v-if="!is_obj_empty(modelValue)">{{ modelValue.name || modelValue.title }}</text>
<text v-else class="cr-9">{{ placeholder }}</text>
@ -10,7 +10,7 @@
<icon name="arrow-right" size="12" color="9"></icon>
</template>
<template v-else>
<div v-if="props.isDisabled" @click.stop="clear_model_value">
<div v-if="!props.isDisabled" @click.stop="clear_model_value">
<icon name="close-fillup" size="12" color="c"></icon>
</div>
</template>
@ -44,7 +44,7 @@ const props = defineProps({
},
isDisabled: {
type: Boolean,
default: true,
default: false,
},
});
const modelValue = defineModel({ type: Object, default: {} });

140
src/components/footer-nav/footer-nav-content.vue
View File

@ -28,35 +28,82 @@
</div>
<div class="size-12 cr-c mb-20">图片建议宽高80*80,鼠标拖拽左侧圆点可调整导航顺序</div>
<div class="nav-list">
<drag :data="form.nav_content" type="card" :space-col="20" :model-type="!config.sync_bool ? '': 'footer'" @remove="nav_content_remove" @on-sort="on_sort">
<template #default="{ row, index}">
<div class="w">
<el-form-item label="图标" label-width="45">
<div class="flex-col jc-c align-c mr-12">
<upload v-model="row.img" :limit="1" :size="44" :styles="1" :dialog-position-top="footerDialogPositionTop"></upload>
<text class="cr-9 size-12">未选中</text>
</div>
<div class="flex-col jc-c align-c">
<upload v-model="row.img_checked" :limit="1" :size="44" :styles="1" :dialog-position-top="footerDialogPositionTop"></upload>
<text class="cr-9 size-12">选中</text>
</div>
</el-form-item>
<el-form-item label="名称" label-width="45">
<el-input v-model="row.name" placeholder="请输入名称" clearable />
</el-form-item>
<el-form-item label="链接" label-width="45">
<div class="w h re">
<url-value v-model="row.link" :dialog-position-top="footerDialogPositionTop" :is-disabled="index === 0 ? !config.sync_bool : true"></url-value>
<template v-if="index === 0 && config.sync_bool">
<template v-if="!config.sync_bool">
<drag :data="form.nav_content" type="card" :space-col="20" @remove="nav_content_remove" @on-sort="on_sort">
<template #default="{ row }">
<div class="w">
<el-form-item label="图标" label-width="45">
<div class="flex-col jc-c align-c mr-12">
<upload v-model="row.img" :limit="1" :size="44" :styles="1" :dialog-position-top="footerDialogPositionTop"></upload>
<text class="cr-9 size-12">未选中</text>
</div>
<div class="flex-col jc-c align-c">
<upload v-model="row.img_checked" :limit="1" :size="44" :styles="1" :dialog-position-top="footerDialogPositionTop"></upload>
<text class="cr-9 size-12">选中</text>
</div>
</el-form-item>
<el-form-item label="名称" label-width="45">
<el-input v-model="row.name" placeholder="请输入名称" clearable />
</el-form-item>
<el-form-item label="链接" label-width="45">
<url-value v-model="row.link" :dialog-position-top="footerDialogPositionTop"></url-value>
</el-form-item>
</div>
</template>
</drag>
</template>
<template v-else>
<div class="flex-col gap-x-20">
<div v-for="item in not_drag_list" :key="item.id" class="flex-row gap-y-16 card-background box-shadow-sm pb-20 pt-20">
<icon name="drag" size="16" class="cursor-move" />
<div class="w">
<el-form-item label="图标" label-width="45">
<div class="flex-col jc-c align-c mr-12">
<upload v-model="item.img" :limit="1" :size="44" :styles="1" :dialog-position-top="footerDialogPositionTop"></upload>
<text class="cr-9 size-12">未选中</text>
</div>
<div class="flex-col jc-c align-c">
<upload v-model="item.img_checked" :limit="1" :size="44" :styles="1" :dialog-position-top="footerDialogPositionTop"></upload>
<text class="cr-9 size-12">选中</text>
</div>
</el-form-item>
<el-form-item label="名称" label-width="45">
<el-input v-model="item.name" placeholder="请输入名称" clearable />
</el-form-item>
<el-form-item label="链接" label-width="45">
<div class="w h re link-disabled">
<url-value v-model="item.link" :dialog-position-top="footerDialogPositionTop" :is-disabled="true"></url-value>
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="首页地址不能更改" raw-content placement="top">
<icon class="abs top-0 right-12 z-i" name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</template>
</div>
</el-form-item>
</div>
</el-form-item>
</div>
</div>
</template>
</drag>
<drag :data="drag_list" type="card" :space-col="20" @remove="nav_content_remove($event, 'not-drag')" @on-sort="on_sort($event, 'not-drag')">
<template #default="{ row }">
<div class="w">
<el-form-item label="图标" label-width="45">
<div class="flex-col jc-c align-c mr-12">
<upload v-model="row.img" :limit="1" :size="44" :styles="1" :dialog-position-top="footerDialogPositionTop"></upload>
<text class="cr-9 size-12">未选中</text>
</div>
<div class="flex-col jc-c align-c">
<upload v-model="row.img_checked" :limit="1" :size="44" :styles="1" :dialog-position-top="footerDialogPositionTop"></upload>
<text class="cr-9 size-12">选中</text>
</div>
</el-form-item>
<el-form-item label="名称" label-width="45">
<el-input v-model="row.name" placeholder="请输入名称" clearable />
</el-form-item>
<el-form-item label="链接" label-width="45">
<url-value v-model="row.link" :dialog-position-top="footerDialogPositionTop"></url-value>
</el-form-item>
</div>
</template>
</drag>
</div>
</template>
<el-button class="mtb-20 w" @click="add">+添加</el-button>
</div>
</card-container>
@ -95,6 +142,16 @@ const props = defineProps({
});
const form = ref(props.value);
const emit = defineEmits(['update:value']);
const not_drag_list = ref<any[]>([]);
const drag_list = ref<any[]>([]);
onBeforeMount(() => {
// 先将数组拆分成两个数组
const data = form.value.nav_content;
not_drag_list.value = [{...data[0] }];
drag_list.value = data.splice(1);
// 为确保数据渲染，将两个数组合并成原有数组，确保数据渲染正常
form.value.nav_content = not_drag_list.value.concat(drag_list.value);
});
// 导航样式change事件
const nav_style_change = (style: any) => {
form.value.nav_style = style;
@ -106,13 +163,23 @@ const nav_type_change = (type: any) => {
emit('update:value', form.value);
};
// data_list移除事件
const nav_content_remove = (index: number) => {
form.value.nav_content.splice(index, 1);
const nav_content_remove = (index: number, type?: string) => {
if (type === 'not-drag') {
form.value.nav_content.splice(index + 1, 1);
} else {
form.value.nav_content.splice(index, 1);
}
emit('update:value', form.value);
};
// 拖拽排序事件
const on_sort = (item: any) => {
form.value.nav_content = item;
const on_sort = (item: any[], type?: string) => {
if (type === 'not-drag') {
item.forEach((item1: any, index: number) => {
form.value.nav_content[index + 1] = item1;
});
} else {
form.value.nav_content = item;
}
};
// 添加导航
const add = () => {
@ -154,4 +221,19 @@ const reset_event = () => {
width: 100%;
height: 100%;
}
.link-disabled {
background: #f5f5f5;
color: #999;
border-radius: 0px;
}
.card-background {
background: #fff;
padding-left: 1.6rem;
padding-right: 2rem;
border-radius: 4px;
}
.cursor-move {
color: #ddd;
}
</style>