修改显示逻辑
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">
|
||||
<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)">
|
||||
<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" />
|
||||
<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)" />
|
||||
<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 v-if="!props.isNotCloseIndex.includes(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>
|
||||
</TransitionGroup>
|
||||
</VueDraggable>
|
||||
|
|
@ -22,11 +29,13 @@ interface Props {
|
|||
spaceCol?: number; // 上下间距
|
||||
iconPosition?: string; // top/bottom/center
|
||||
isShowEdit?: boolean;
|
||||
isNotCloseIndex?: number[];
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
type: () => 'line',
|
||||
isShowEdit: false,
|
||||
spaceCol: () => 5,
|
||||
isNotCloseIndex: () => [],
|
||||
iconPosition: 'center',
|
||||
});
|
||||
const className = ref('');
|
||||
|
|
|
|||
|
|
@ -17,26 +17,28 @@
|
|||
<div class="divider-line"></div>
|
||||
<card-container>
|
||||
<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">
|
||||
<div class="flex-col align-c jc-s gap-20 flex-1 w">
|
||||
<el-form-item label="显示文字" class="w mb-0">
|
||||
<el-input v-model="scoped.row.title" placeholder="请输入标题文字" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="数据类型" class="w mb-0">
|
||||
<el-radio-group v-model="scoped.row.data_type">
|
||||
<el-radio value="0">微页面</el-radio>
|
||||
<el-radio value="1">选择分类</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="scoped.row.data_type == '0' ? '微页面' : '商品分类'" class="w mb-0">
|
||||
<template v-if="scoped.row.data_type == '0'">
|
||||
<url-value v-model="scoped.row.micro_page_list"></url-value>
|
||||
</template>
|
||||
<template v-else>
|
||||
<url-value v-model="scoped.row.classify" :type="['goods-category']"></url-value>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<template v-if="scoped.index != 0">
|
||||
<el-form-item label="数据类型" class="w mb-0">
|
||||
<el-radio-group v-model="scoped.row.data_type">
|
||||
<el-radio value="0">微页面</el-radio>
|
||||
<el-radio value="1">选择分类</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="scoped.row.data_type == '0' ? '微页面' : '商品分类'" class="w mb-0">
|
||||
<template v-if="scoped.row.data_type == '0'">
|
||||
<url-value v-model="scoped.row.micro_page_list"></url-value>
|
||||
</template>
|
||||
<template v-else>
|
||||
<url-value v-model="scoped.row.classify" :type="['goods-category']"></url-value>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</drag>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const defaultTabs: defaultTabs = {
|
|||
tabs_theme: '0',
|
||||
tabs_top_up: '1',
|
||||
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: {} },
|
||||
],
|
||||
|
|
|
|||
|
|
@ -206,7 +206,7 @@ const url_computer = (name: string) => {
|
|||
const show_model_border = ref(true);
|
||||
// 点击添加tabs组件
|
||||
const draggable_click = (item: componentsData) => {
|
||||
if (item.key == 'tabs' && isEmpty(tabs_data.value.length)) {
|
||||
if (item.key == 'tabs' && isEmpty(tabs_data.value)) {
|
||||
// 添加tabs组件
|
||||
tabs_data.value.push({
|
||||
name: item.name,
|
||||
|
|
|
|||
Loading…
Reference in New Issue