<!-- 视频云-离线视频列表 --> <template> <div class="children"> <div v-for="(item, index) in list" class="menu-item children-item" @click="menuClick(item)"> {{ item.name }} </div> </div> </template> <script> export default { name: 'LayerManager', props: { list: { type: Array, default: () => ([]) } }, data() { return { indexNum: 0, refreshDown: true, layer: require('@/assets/images/function/通用功能/图层管理未选中.png'), layerHover: require('@/assets/images/function/通用功能/图层管理选中.png'), childrednName: 0, } }, computed: { current: { set(v) { this.refreshDown = false this.$nextTick(() => { this.indexNum = this.menuTab.findIndex(item => item.value === v) this.refreshDown = true }) }, get() { return this.menuTab[this.indexNum].value } } }, methods: { // btnClick(e) { // this.$emit('btnClick', e) // }, menuClick(e) { console.log(e, '列表点击') this.childrednName = e this.$emit('menuClick', e) }, // childrenClick(e) { // console.log(e, this.childrednName, '子列表点击') // this.$emit('childrenClick', e, this.childrednName) // }, // handleRightClick() { // this.childrednName = null // }, // // 切换菜单 // changeSelect() { // this.$emit('changeSelect', this.current) // // 清空二级菜单 // this.handleRightClick() // console.log(this.current, 'current') // } } } </script> <style scoped> .search-menu { display: flex; z-index: 111111111; position: relative; left: 0px; top: 0px; } @keyframes slide-down { 0% { transform: scale(1, 0); } 100% { transform: scale(1, 1); } } @-webkit-keyframes slide-down { 0% { -webkit-transform: scale(1, 0); } 100% { -webkit-transform: scale(1, 1); } } .common-menu { position: absolute; left: 0rem; top: 7rem; width: 25rem; background: url("../../../../assets/images/popup/case/事件看板背景.png") !important; background-size: 100% 101% !important; } .menu-down { position: relative; left: 0rem; top: 0rem; animation: slide-down 0.3s ease-in; -webkit-animation: slide-down 0.3s ease-in; transition: max-height .3s ease-in; transform-origin: 50% 0; margin: 20px 20px 10px 10px; width: calc(100% - 45px); } .children { position: absolute; z-index: 111111; left: 1rem; top: 8rem; width: 300px; background: url("../../../../assets/images/popup/case/事件看板背景.png") !important; background-size: 100% 101% !important; height: 400px; overflow-y: scroll; } .children-item { width: 80% !important; margin: 10px auto !important; color: #fff !important; } </style>