这次介绍的控件相对比较简单，鼠标悬停时显示弹出内容，效果如下：

为了增加灵活性，用 slot 实现，调用时的代码：

控件代码：

name: 'MouseOverPop',

data() { return {

isActive: false };

},

methods: {

mouseEnter() { this.isActive = true },

mouseOut() { this.isActive = false },

},

}

css 代码：

.toolbox-element .element-title{

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

cursor: default;

color: #c2c2c2;

font-size: 13px;

padding:5px 5px;

margin:3px;

display: flex;

flex-flow: row;

justify-content: space-between;

align-items: center;

}

.toolbox-element .element-title:hover{

color: #75b325;

box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4);

}

.toolbox-element{

}

.toolbox-element .pop-content{

position: absolute;

top:70px;

left:100%;

width: 320px;

padding:10px;

background: #eee;

}