|
|
@@ -1,14 +1,17 @@
|
|
|
<template>
|
|
|
<div class="head">
|
|
|
- <div class="head-items">
|
|
|
+ <div
|
|
|
+ ref="scrollItem"
|
|
|
+ class="head-items"
|
|
|
+ >
|
|
|
<template
|
|
|
v-for="(item, index) in list"
|
|
|
:key="index"
|
|
|
>
|
|
|
<div
|
|
|
class="head-items-item"
|
|
|
- :class="{ active: index === selectKey }"
|
|
|
- @click="check(index)"
|
|
|
+ :class="{ active: index === selectTab }"
|
|
|
+ @click.stop="e=>onChange(index, 'change')"
|
|
|
>
|
|
|
<div>
|
|
|
<div>
|
|
|
@@ -19,9 +22,10 @@
|
|
|
{{ item.label }}
|
|
|
</div>
|
|
|
<Icon
|
|
|
+ v-if="index !== 0"
|
|
|
name="close"
|
|
|
:size="12"
|
|
|
- @click="close"
|
|
|
+ @click.stop="onChange(index, 'del')"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -29,7 +33,7 @@
|
|
|
</div>
|
|
|
<div
|
|
|
class="head-add"
|
|
|
- @click="emit('update:showAdd',true)"
|
|
|
+ @click="emit('update:showAdd', true)"
|
|
|
>
|
|
|
<Icon
|
|
|
name="add"
|
|
|
@@ -39,74 +43,37 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang='ts'>
|
|
|
-import { ref } from 'vue'
|
|
|
+import { ref, watch } from 'vue'
|
|
|
import { FormData } from '@/components/edit.vue'
|
|
|
|
|
|
const props = withDefaults(defineProps<{
|
|
|
- showAdd?:boolean,
|
|
|
- list:FormData[]
|
|
|
+ showAdd?: boolean,
|
|
|
+ list: FormData[],
|
|
|
+ selectTab: number
|
|
|
}>(), {
|
|
|
showAdd: false,
|
|
|
+ selectTab: 0,
|
|
|
list: () => []
|
|
|
})
|
|
|
+const scrollItem = ref()
|
|
|
|
|
|
-const emit = defineEmits<{
|
|
|
- (evt: 'update:showAdd', value: boolean): void,
|
|
|
+const emit = defineEmits<{(evt: 'update:showAdd', value: boolean): void,
|
|
|
(evt: 'update:list', value: FormData[]): void,
|
|
|
-
|
|
|
+ (evt: 'onChange', value: { id: number, type: string }): void,
|
|
|
}>()
|
|
|
|
|
|
-// const tabs = ref([
|
|
|
-// {
|
|
|
-// name: '0', label: 'Home', icon: 'home', size: 15
|
|
|
-// },
|
|
|
-// {
|
|
|
-// name: '1', label: 'Home', icon: 'cmd', size: 14
|
|
|
-// }, {
|
|
|
-// name: '2', label: 'Home', icon: 'home', size: 15
|
|
|
-// }, {
|
|
|
-// name: '3', label: 'Home', icon: 'home', size: 15
|
|
|
-// }, {
|
|
|
-// name: '4', label: 'Home', icon: 'home', size: 15
|
|
|
-// }, {
|
|
|
-// name: '5', label: 'Home', icon: 'home', size: 15
|
|
|
-// }, {
|
|
|
-// name: '6', label: 'Home', icon: 'home', size: 15
|
|
|
-// }, {
|
|
|
-// name: '7', label: 'Home', icon: 'home', size: 15
|
|
|
-// }, {
|
|
|
-// name: '8', label: 'Home', icon: 'home', size: 15
|
|
|
-// }, {
|
|
|
-// name: '9', label: 'Home', icon: 'home', size: 15
|
|
|
-// }, {
|
|
|
-// name: '10', label: 'Home', icon: 'home', size: 15
|
|
|
-// },
|
|
|
-// {
|
|
|
-// name: '11', label: 'Home', icon: 'home', size: 15
|
|
|
-// },
|
|
|
-// {
|
|
|
-// name: '12', label: 'Home', icon: 'home', size: 15
|
|
|
-// },
|
|
|
-// {
|
|
|
-// name: '13', label: 'Home', icon: 'home', size: 15
|
|
|
-// },
|
|
|
-// {
|
|
|
-// name: '14', label: 'Home', icon: 'home', size: 15
|
|
|
-// },
|
|
|
-// {
|
|
|
-// name: '15', label: 'Home', icon: 'home', size: 15
|
|
|
-// }
|
|
|
-// ])
|
|
|
-const selectKey = ref(0)
|
|
|
-
|
|
|
-function check(id: number) {
|
|
|
- selectKey.value = id
|
|
|
+function onChange(id: number, type: string) {
|
|
|
+ emit('onChange', { id, type })
|
|
|
}
|
|
|
|
|
|
-function close(id: number) {
|
|
|
- // tabs.value.splice(id, 1)
|
|
|
- console.log(1)
|
|
|
-}
|
|
|
+watch(() => props.selectTab, (v) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ // 滚动
|
|
|
+ const dom = scrollItem.value.children[v]
|
|
|
+ const scrollNum = dom.offsetLeft - scrollItem.value.offsetWidth / 2 + dom.offsetWidth / 2
|
|
|
+ scrollItem.value.scrollLeft = scrollNum
|
|
|
+ }, 0)
|
|
|
+})
|
|
|
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -129,6 +96,7 @@ function close(id: number) {
|
|
|
align-items: flex-end;
|
|
|
overflow-x: auto;
|
|
|
-webkit-app-region: no-drag;
|
|
|
+ scroll-behavior: smooth;
|
|
|
padding: 0 12px;
|
|
|
|
|
|
/* 隐藏滚动条 */
|
|
|
@@ -160,7 +128,7 @@ function close(id: number) {
|
|
|
align-items: center;
|
|
|
|
|
|
&>svg {
|
|
|
- margin-right: 3px;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
}
|
|
|
}
|
