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

1.选项卡轮播，例如：内容设置中tab定位在轮播，那么样式设置中tab也应该定位在轮播，体验会好些。

v1.0.0
sws 2024-10-15 15:15:04 +08:00
parent fd761bec7f
commit fd9e316a3e
3 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/model-tabs-carousel/model-tabs-carousel-content.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="common-content-height"> <div class="common-content-height">
<el-tabs v-model="tabs_name" class="content-tabs"> <el-tabs v-model="tabs_name" class="content-tabs" @tab-change="change_tab_event">
<el-tab-pane label="选项卡" name="tabs"> <el-tab-pane label="选项卡" name="tabs">
<model-tabs-content :value="form" :tab-style="styles"></model-tabs-content> <model-tabs-content :value="form" :tab-style="styles"></model-tabs-content>
</el-tab-pane> </el-tab-pane>
@ -33,6 +33,10 @@ const state = reactive({
const { form, styles } = toRefs(state); const { form, styles } = toRefs(state);
const tabs_name = ref(props.tabsActive); const tabs_name = ref(props.tabsActive);
const emit = defineEmits(['update:tabs']);
const change_tab_event = (val: any) => {
emit('update:tabs', val);
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.el-tabs.content-tabs) { :deep(.el-tabs.content-tabs) {

11
src/components/model-tabs-carousel/model-tabs-carousel-setting.vue
View File

@ -2,10 +2,10 @@
<div class="setting-content"> <div class="setting-content">
{{ tabs_active }} {{ tabs_active }}
<template v-if="type == '1'"> <template v-if="type == '1'">
<model-tabs-carousel-content :value="value.content" :tabs-active="tabs_active" :tab-carousel-style="value.style"></model-tabs-carousel-content> <model-tabs-carousel-content :value="value.content" :tabs-active="tabs_active" :tab-carousel-style="value.style" @update:tabs="update_tabs"></model-tabs-carousel-content>
</template> </template>
<template v-if="type == '2'"> <template v-if="type == '2'">
<model-tabs-carousel-styles :value="value.style" :tabs-active="tabs_active" :tabs-style="value.content.tabs_theme" :content="value.content"></model-tabs-carousel-styles> <model-tabs-carousel-styles :value="value.style" :tabs-active="tabs_active" :tabs-style="value.content.tabs_theme" :content="value.content" @update:tabs="update_tabs"></model-tabs-carousel-styles>
</template> </template>
</div> </div>
</template> </template>
@ -21,5 +21,12 @@ const props = defineProps({
}, },
}); });
const tabs_active = ref('tabs'); const tabs_active = ref('tabs');
const update_tabs = (val: string) => {
if (val === 'common') {
tabs_active.value = 'tabs';
} else {
tabs_active.value = val;
}
};
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

6
src/components/model-tabs-carousel/model-tabs-carousel-styles.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="w"> <div class="w">
{{ tabs_name }} {{ tabs_name }}
<el-tabs v-model="tabs_name" class="content-tabs"> <el-tabs v-model="tabs_name" class="content-tabs" @tab-change="change_tab_event">
<el-tab-pane label="选项卡" name="tabs"> <el-tab-pane label="选项卡" name="tabs">
<model-tabs-styles :value="form" :tabs-style="tabsStyle" :is-common="false"></model-tabs-styles> <model-tabs-styles :value="form" :tabs-style="tabsStyle" :is-common="false"></model-tabs-styles>
</el-tab-pane> </el-tab-pane>
@ -49,6 +49,10 @@ const state = reactive({
}); });
const tabs_name = ref(props.tabsActive); const tabs_name = ref(props.tabsActive);
const emit = defineEmits(['update:tabs']);
const change_tab_event = (val: any) => {
emit('update:tabs', val);
};
// 如果需要解构，确保使用toRefs // 如果需要解构，确保使用toRefs
const { form, new_content } = toRefs(state); const { form, new_content } = toRefs(state);
const common_styles_update = (val: Object) => { const common_styles_update = (val: Object) => {