(1)实现效果
(2)具体代码
html
<vxe-form-item title="设计文档:" field="icon" span="23">
<template #default>
<!-- 按钮区域 -->
<div class="design_file">
<div class="design_file_click" @click="handleClick()">
<!-- 回显icon -->
<div class="design_file_icon"></div>
<!-- 回显文本内容 -->
<div class="design_file_txt">点击调用文件查询框</div>
</div>
<!-- 右侧按钮 -->
<div class="design_file_btn">
<vxe-button status="primary" @click="newBuilt()"> 新建 </vxe-button>
</div>
</div>
</template>
</vxe-form-item>
css
// 设计文档
.design_file{
width:100%;
height:35px;
line-height:35px;
}
// 按钮区域
.design_file_click{
width:75%;
height:35px;
line-height:35px;
float:left;
cursor: pointer;
border:1px solid #dcdfe6;
border-radius: 3px;
}
// 回显icon
.design_file_icon{
max-width:30%;
height:35px;
float:left
}
// 回显文本内容
.design_file_txt{
float:left;
padding-left: 3%;
color: rgb(221, 223, 228);
}
// 鼠标经过
.design_file_click:hover{
border: 1px solid #409eff;
}
// 右侧按钮
.design_file_btn{
width:25%;
height:35px;
float:left;
display: flex;
justify-content: center;
align-items: center;
}