<ul>
<li v-for="(item, index) in 20" :key="index" v-on:mouseenter="showDialog(index)" v-on:mouseleave="hideDialog(index)" :accesskey="index" style="position: relative;width: 100px;height: 50px;">
{{index}}
<div class="handleDialog" v-if="ishow && index==current"></div>
</li>
</ul>
<script>
export default {
name: 'index',
data () {
return {
ishow: false,
current: 0 // 當前操作按鈕
}
},
mounted () {
},
methods: {
// 顯示操作項
showDialog (index, item) {
this.ishow = true
this.current = index
},
hideDialog (index, item) { // 隱藏蒙層
this.ishow = false
this.current = null
}
}
}
</script>
<style lang="scss" scoped>
.handleDialog {
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
border-radius: 4px;
}
</style>
