增加自定义数据源标识
于肖磊
parent
fe92a49a9f
commit
c980584158
|
|
@ -17,7 +17,12 @@
|
|||
<icon name="arrow-bottom" size="14" color="f" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="plug-in-name">{{ item.name }}</div>
|
||||
<div class="plug-in-name">
|
||||
<div class="re w h">
|
||||
{{ item.name }}
|
||||
<div v-if="!isEmpty(item.mark_name)" class="plug-in-mark-name mark-name-style">{{ item.mark_name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-content" :class="{ 'plug-in-close': item.is_enable != '1' }" :style="mainContentStyle">
|
||||
<!-- 基础组件 -->
|
||||
<!-- 视频 -->
|
||||
|
|
@ -117,6 +122,8 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { isEmpty } from 'lodash';
|
||||
|
||||
interface Props {
|
||||
diyData: any[];
|
||||
showModelBorder: boolean;
|
||||
|
|
@ -339,6 +346,11 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
|
|||
margin-top: -0.5rem;
|
||||
}
|
||||
}
|
||||
.plug-in-mark-name {
|
||||
position: absolute;
|
||||
top: -0.6rem;
|
||||
left: -0.6rem;
|
||||
}
|
||||
.plug-in-close::before {
|
||||
position: absolute;
|
||||
content: '\5DF2\9690\85CF';
|
||||
|
|
|
|||
|
|
@ -314,6 +314,7 @@ const processing_data = (key: string) => {
|
|||
const url_value_dialog_visible = ref(false);
|
||||
const default_type_data = ref<any>({})
|
||||
const url_value_multiple_bool = ref(true);
|
||||
const emits = defineEmits(['data_source_change']);
|
||||
const changeDataSource = (key: string) => {
|
||||
form.value.is_custom_data = '0';
|
||||
const type_data = options.value.filter((item) => item.type == key);
|
||||
|
|
@ -331,8 +332,10 @@ const changeDataSource = (key: string) => {
|
|||
form.value.data_source_direction = 'vertical';
|
||||
// 如果存在默认数据类型的时候，就直接赋值给data_list
|
||||
if (type_data.length > 0 && !isEmpty(type_data[0].appoint_data)) {
|
||||
emits('data_source_change', type_data[0].name)
|
||||
form.value.data_source_content.data_list = [ type_data[0].appoint_data ];
|
||||
} else if (type_data.length > 0 && !isEmpty(type_data[0].custom_config)) {
|
||||
emits('data_source_change', type_data[0].name)
|
||||
// 是自定义数据类型
|
||||
form.value.is_custom_data = '1';
|
||||
// 自定义数据取值
|
||||
|
|
@ -348,6 +351,8 @@ const changeDataSource = (key: string) => {
|
|||
default_data();
|
||||
// 筛选数据处理
|
||||
filter_data_handling('new');
|
||||
} else {
|
||||
emits('data_source_change', '')
|
||||
}
|
||||
};
|
||||
const filter_form_change = (val: any) => {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="w">
|
||||
<template v-if="type == '1'">
|
||||
<model-custom-content :value="value.content"></model-custom-content>
|
||||
<model-custom-content :value="value.content" :all-value="allValue" @data_source_change="data_source_change"></model-custom-content>
|
||||
</template>
|
||||
<template v-if="type == '2'">
|
||||
<model-custom-styles :value="value.style" :content="value.content" ></model-custom-styles>
|
||||
|
|
@ -9,6 +9,8 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { isEmpty } from 'lodash';
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
|
|
@ -18,6 +20,19 @@ const props = defineProps({
|
|||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
allValue: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const all_content = ref(props.allValue);
|
||||
const data_source_change = (name: string) => {
|
||||
// 改变所有内容的名称
|
||||
if (!isEmpty(name)) {
|
||||
all_content.value.mark_name = name;
|
||||
} else {
|
||||
all_content.value.mark_name = '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -312,4 +312,13 @@
|
|||
.dot-item {
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
}
|
||||
.mark-name-style {
|
||||
background: #D8D8D8 linear-gradient(107deg, #FC6F31 0%, #E22C08 100%);
|
||||
font-size: 1rem;
|
||||
line-height: 1.2rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
border-radius: 0.8rem 0 0.8rem 0;
|
||||
}
|
||||
|
|
@ -34,7 +34,10 @@
|
|||
<TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col">
|
||||
<li v-for="(item, index) in diy_data" :key="index" :class="['flex ptb-12 plr-10 gap-y-8 re align-c drawer-drag', { 'drawer-drag-bg': item.show_tabs == '1' }]" @click="on_choose(index, item.show_tabs)">
|
||||
<el-icon class="iconfont icon-drag size-16 cr-d" />
|
||||
<span class="size-12 cr-6">{{ item.name }}</span>
|
||||
<span class="size-12 cr-6 re">
|
||||
{{ item.name }}
|
||||
<div v-if="!isEmpty(item.mark_name)" class="plug-drawer-mark-name mark-name-style">{{ item.mark_name }}</div>
|
||||
</span>
|
||||
<el-icon class="iconfont icon-close-round-o size-16 abs" :style="[item.show_tabs == '1' ? '' : 'display:none']" @click.stop="del(index, false)" />
|
||||
</li>
|
||||
</TransitionGroup>
|
||||
|
|
@ -270,6 +273,7 @@ const draggable_click = (item: componentsData) => {
|
|||
// 添加tabs组件
|
||||
tabs_data.value.push({
|
||||
name: item.name,
|
||||
mark_name: '',
|
||||
show_tabs: '1',
|
||||
is_enable: '1',
|
||||
src: '',
|
||||
|
|
@ -298,6 +302,7 @@ watchEffect(() => {
|
|||
const clone_item_com_data = (item: commonComponentData) => {
|
||||
return {
|
||||
name: item.name,
|
||||
mark_name: '',
|
||||
show_tabs: '1',
|
||||
is_enable: '1',
|
||||
src: item.src,
|
||||
|
|
@ -576,4 +581,9 @@ const footer_nav_event = () => {
|
|||
align-items: stretch;
|
||||
flex: 1;
|
||||
}
|
||||
.plug-drawer-mark-name {
|
||||
position: absolute;
|
||||
top: -1.3rem;
|
||||
left: -0.6rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@
|
|||
</template>
|
||||
<!-- 自定义 -->
|
||||
<template v-else-if="value.key == 'custom'">
|
||||
<model-custom-setting :type="radio" :value="value.com_data"></model-custom-setting>
|
||||
<model-custom-setting :type="radio" :value="value.com_data" :all-value="value"></model-custom-setting>
|
||||
</template>
|
||||
<!-- 底部导航 -->
|
||||
<template v-else-if="value.key == 'footer-nav'">
|
||||
|
|
|
|||
Loading…
Reference in New Issue