修改显示逻辑
于肖磊
parent
ed35ed11e3
commit
9adeac21a3
|
|
@ -2,11 +2,18 @@
|
||||||
<VueDraggable v-model="from" :animation="500" target=".sort-target" handle=".icon-drag" :scroll="true" :on-sort="on_sort">
|
<VueDraggable v-model="from" :animation="500" target=".sort-target" handle=".icon-drag" :scroll="true" :on-sort="on_sort">
|
||||||
<TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col gap-x-20">
|
<TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col gap-x-20">
|
||||||
<li v-for="(item, index) in from" :key="item.id" :class="className" class="flex gap-y-16 re" @click="on_click(item, index)">
|
<li v-for="(item, index) in from" :key="item.id" :class="className" class="flex gap-y-16 re" @click="on_click(item, index)">
|
||||||
<el-icon class="iconfont icon-drag size-16 cursor-move" />
|
<template v-if="!props.isNotCloseIndex.includes(index)">
|
||||||
|
<el-icon class="iconfont icon-drag size-16 cursor-move" />
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<el-icon class="iconfont icon-drag size-16 cursor-move" />
|
||||||
|
</template>
|
||||||
<slot :row="item" :index="index" />
|
<slot :row="item" :index="index" />
|
||||||
<el-icon v-if="isShowEdit" class="iconfont icon-commodity-edit size-16 cr-primary do-not-trigger two-click" @click="edit(index)" />
|
<el-icon v-if="isShowEdit" class="iconfont icon-commodity-edit size-16 cr-primary do-not-trigger two-click" @click="edit(index)" />
|
||||||
<el-icon v-if="type == 'line'" class="iconfont icon-del-o size-16 do-not-trigger" @click="remove(index)" />
|
<template v-if="!props.isNotCloseIndex.includes(index)">
|
||||||
<el-icon v-if="type == 'card'" class="iconfont icon-close-o size-16 abs cr-c top-de-5 right-de-5" @click="remove(index)" />
|
<el-icon v-if="type == 'line'" class="iconfont icon-del-o size-16 do-not-trigger" @click="remove(index)" />
|
||||||
|
<el-icon v-if="type == 'card'" class="iconfont icon-close-o size-16 abs cr-c top-de-5 right-de-5" @click="remove(index)" />
|
||||||
|
</template>
|
||||||
</li>
|
</li>
|
||||||
</TransitionGroup>
|
</TransitionGroup>
|
||||||
</VueDraggable>
|
</VueDraggable>
|
||||||
|
|
@ -22,11 +29,13 @@ interface Props {
|
||||||
spaceCol?: number; // 上下间距
|
spaceCol?: number; // 上下间距
|
||||||
iconPosition?: string; // top/bottom/center
|
iconPosition?: string; // top/bottom/center
|
||||||
isShowEdit?: boolean;
|
isShowEdit?: boolean;
|
||||||
|
isNotCloseIndex?: number[];
|
||||||
}
|
}
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
type: () => 'line',
|
type: () => 'line',
|
||||||
isShowEdit: false,
|
isShowEdit: false,
|
||||||
spaceCol: () => 5,
|
spaceCol: () => 5,
|
||||||
|
isNotCloseIndex: () => [],
|
||||||
iconPosition: 'center',
|
iconPosition: 'center',
|
||||||
});
|
});
|
||||||
const className = ref('');
|
const className = ref('');
|
||||||
|
|
|
||||||
|
|
@ -17,26 +17,28 @@
|
||||||
<div class="divider-line"></div>
|
<div class="divider-line"></div>
|
||||||
<card-container>
|
<card-container>
|
||||||
<div class="mb-12">选项卡设置</div>
|
<div class="mb-12">选项卡设置</div>
|
||||||
<drag :data="form.tabs_list" type="card" :space-col="25" @remove="remove" @on-sort="on_sort">
|
<drag :data="form.tabs_list" type="card" :space-col="25" :is-not-close-index="[0]" @remove="remove" @on-sort="on_sort">
|
||||||
<template #default="scoped">
|
<template #default="scoped">
|
||||||
<div class="flex-col align-c jc-s gap-20 flex-1 w">
|
<div class="flex-col align-c jc-s gap-20 flex-1 w">
|
||||||
<el-form-item label="显示文字" class="w mb-0">
|
<el-form-item label="显示文字" class="w mb-0">
|
||||||
<el-input v-model="scoped.row.title" placeholder="请输入标题文字" clearable />
|
<el-input v-model="scoped.row.title" placeholder="请输入标题文字" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="数据类型" class="w mb-0">
|
<template v-if="scoped.index != 0">
|
||||||
<el-radio-group v-model="scoped.row.data_type">
|
<el-form-item label="数据类型" class="w mb-0">
|
||||||
<el-radio value="0">微页面</el-radio>
|
<el-radio-group v-model="scoped.row.data_type">
|
||||||
<el-radio value="1">选择分类</el-radio>
|
<el-radio value="0">微页面</el-radio>
|
||||||
</el-radio-group>
|
<el-radio value="1">选择分类</el-radio>
|
||||||
</el-form-item>
|
</el-radio-group>
|
||||||
<el-form-item :label="scoped.row.data_type == '0' ? '微页面' : '商品分类'" class="w mb-0">
|
</el-form-item>
|
||||||
<template v-if="scoped.row.data_type == '0'">
|
<el-form-item :label="scoped.row.data_type == '0' ? '微页面' : '商品分类'" class="w mb-0">
|
||||||
<url-value v-model="scoped.row.micro_page_list"></url-value>
|
<template v-if="scoped.row.data_type == '0'">
|
||||||
</template>
|
<url-value v-model="scoped.row.micro_page_list"></url-value>
|
||||||
<template v-else>
|
</template>
|
||||||
<url-value v-model="scoped.row.classify" :type="['goods-category']"></url-value>
|
<template v-else>
|
||||||
</template>
|
<url-value v-model="scoped.row.classify" :type="['goods-category']"></url-value>
|
||||||
</el-form-item>
|
</template>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</drag>
|
</drag>
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@ const defaultTabs: defaultTabs = {
|
||||||
tabs_theme: '0',
|
tabs_theme: '0',
|
||||||
tabs_top_up: '1',
|
tabs_top_up: '1',
|
||||||
tabs_list: [
|
tabs_list: [
|
||||||
{ id: get_math(), title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
|
{ id: get_math(), title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
|
||||||
{ id: get_math(), title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
|
{ id: get_math(), title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
|
||||||
{ id: get_math(), title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
|
{ id: get_math(), title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -206,7 +206,7 @@ const url_computer = (name: string) => {
|
||||||
const show_model_border = ref(true);
|
const show_model_border = ref(true);
|
||||||
// 点击添加tabs组件
|
// 点击添加tabs组件
|
||||||
const draggable_click = (item: componentsData) => {
|
const draggable_click = (item: componentsData) => {
|
||||||
if (item.key == 'tabs' && isEmpty(tabs_data.value.length)) {
|
if (item.key == 'tabs' && isEmpty(tabs_data.value)) {
|
||||||
// 添加tabs组件
|
// 添加tabs组件
|
||||||
tabs_data.value.push({
|
tabs_data.value.push({
|
||||||
name: item.name,
|
name: item.name,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue