<script lang="ts" setup>
|
import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
|
import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
|
import { useAppStoreWithOut } from '@/store/modules/app'
|
const appStore = useAppStoreWithOut()
|
defineProps({
|
isInside: {
|
type: Boolean,
|
default: false
|
}
|
})
|
const emits = defineEmits(['changeSideTreeStatus'])
|
const handleClick = val => {
|
appStore.setArrowSide(val)
|
emits('changeSideTreeStatus', val)
|
}
|
</script>
|
|
<template>
|
<div
|
@click="handleClick(false)"
|
v-if="appStore.getArrowSide && !isInside"
|
class="arrow-side-tree arrow-side-tree-left"
|
>
|
<el-icon>
|
<Icon name="icon_left_outlined"><icon_left_outlined class="svg-icon" /></Icon>
|
</el-icon>
|
</div>
|
<div
|
@click="handleClick(true)"
|
v-else-if="!appStore.getArrowSide && isInside"
|
class="arrow-side-tree arrow-side-tree-right"
|
>
|
<el-icon>
|
<Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
|
</el-icon>
|
</div>
|
</template>
|
|
<style lang="less" scoped>
|
.arrow-side-tree-left {
|
top: 44px;
|
height: 24px;
|
width: 24px;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
box-shadow: 0px 5px 10px 0px #1f23291a;
|
}
|
|
.arrow-side-tree-right {
|
box-shadow: 0px 4px 8px 0px #0000001a;
|
top: 44px;
|
height: 24px;
|
width: 20px;
|
display: flex;
|
align-items: center;
|
padding-left: 2px;
|
border-top-right-radius: 12px;
|
border-bottom-right-radius: 12px;
|
&:hover {
|
padding-left: 4px;
|
width: 24px;
|
}
|
}
|
|
.arrow-side-tree {
|
position: absolute;
|
border: 1px solid #dee0e3;
|
background: #fff;
|
cursor: pointer;
|
z-index: 10;
|
&:hover {
|
.ed-icon {
|
color: var(--ed-color-primary);
|
}
|
}
|
.ed-icon {
|
font-size: 12px;
|
}
|
}
|
</style>
|
