Skip to content

O
office-web
Commit 092395d1 by xiaohai
Options

.

parent b0133da7
Showing with 122 additions and 134 deletions
src/components/contacts/searchMenu.vue
<template>
<div class="searh-menu-container">
<el-input prefix-icon="el-icon-search" placeholder="请输入内容"></el-input>
<ul class="search-menu">
<li class="cpn-submenu" style="padding: 0;">
<div class="cpn-submenu_title">
<i class="iconfont icon-2zuzhijiagou"></i>
<span>品牌一</span>
</div>
<ul>
<li class="menuitem cpn-submenu-item">
<i class="iconfont icon-chengyuan"></i>
<span>陈景良</span>
</li>
<li class="cpn-submenu">
<div class="cpn-submenu_title">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
<span>人事部</span>
</div>
<ul>
<li class="menuitem cpn-submenu-item">
<i class="iconfont icon-chengyuan"></i>
<span>陈景良</span>
</li>
<li class="cpn-submenu">
<div class="cpn-submenu_title">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
<span>人事部</span>
</div>
<ul>
<li class="menuitem cpn-submenu-item">
<i class="iconfont icon-chengyuan"></i>
<span>陈景良</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- <el-menu
<el-input prefix-icon="el-icon-search" v-model="searchKey" placeholder="请输入内容" clearable @clear="clearFn" @keyup.enter.native="searchFn"></el-input>
<el-tree
v-show="!searchResultShow"
class="search-menu"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="iconfont icon-2zuzhijiagou"></i>
<span>品牌一</span>
</template>
<el-submenu index="1-1">
<template slot="title">
<i class="icon-tongshi-zuzhijiagou iconfont"></i>
<span>选项4</span>
</template>
<el-menu-item index="1-1-1">
<i class="iconfont icon-chengyuan"></i>
<span>张三</span>
</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu> -->
:default-expanded-keys="[1, 2]"
:data="data"
:highlight-current="true"
:expand-on-click-node="false"
@node-click="handleNodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }">
<i class="iconfont" :class="node.level == 1 ? 'icon-2zuzhijiagou' : node.isLeaf ? 'icon-chengyuan' : 'icon-tongshi-zuzhijiagou'"></i>
<span>{{ node.label }}</span>
</span>
</el-tree>
</div>
</template>
<script>
export default {
name: "searchMenu",
components: {},
props: {},
data: {
data: [
{
brand_name: "江南布衣",
brand_code: "001",
brand_id: "jnby001",
sort: 1,
status: 1,
name: "searchMenu",
components: {},
props: {},
data() {
return {
data: [ // el-tree mock data
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '二级 1-1',
children: [
{
id: 9,
label: '三级 1-1-1'
},
{
id: 10,
label: '三级 1-1-2'
}
]
}
]
},
{
id: 2,
label: '一级 2',
children: [
{
id: 5,
label: '二级 2-1'
},
{
id: 6,
label: '二级 2-2'
}
]
},
{
id: 3,
label: '一级 3',
children: [
{
id: 7,
label: '二级 3-1'
},
{
id: 8,
label: '二级 3-2'
}
]
}
],
searchKey: "",
searchResultShow: false,
};
},
created() {},
methods: {
/**
* 清楚输入框
*/
clearFn() {},
/**
* 关键字搜索
*/
searchFn() {
console.log(this.searchKey);
},
}
]
},
created() {},
metods: {},
filter: {},
computed: {},
watch: {}
/**
* 树形菜单选择
*/
handleNodeClick(obj, node) {
console.log(obj, node);
this.$emit("handleTreeSelection", obj, node);
}
},
filter: {},
computed: {},
watch: {}
};
</script>
<style lang="scss">
.searh-menu-container {
overflow-y: scroll;
overflow-x: scroll;
width: 260px;
background: #eef1f8;
height: 100%;
min-height: 600px;
height: 690px;
padding: 20px 15px;
box-sizing: border-box;
.search-menu {
margin-top: 30px;
color: #606266;
font-size: 14px;
background: #EEF1F8;
.iconfont {
color: #409EFF;
font-size: 16px;
margin-right: 5px;
}
.cpn-submenu {
list-style: none;
margin: 0;
}
.cpn-submenu_title {
height: 36px;
line-height: 36px;
padding: 0 20px;
&:hover {
background:#409EFF;
color: #fff;
min-width: 100%;
display:inline-block !important;
.el-tree-node {
.el-tree-node__content {
height: 36px;
.iconfont {
color: #fff;
color: #409EFF;
margin-right: 5px;
}
}
}
.cpn-submenu-item {
height: 36px;
line-height: 36px;
padding: 0 40px;
&:hover {
background: #409EFF;
color: #fff;
.iconfont {
&:hover {
color: #fff;
background: #409EFF;
.iconfont {
color: #fff;
}
}
}
}
}
// .search-menu {
// margin-top: 30px;
// background: none;
// border: none;
// .el-submenu__title {
// height: 36px;
// line-height: 36px;
// .iconfont {
// font-size: 16px;
// color: #409EFF;
// margin-right: 5px;
// }
// }
// .el-menu {
// background: none;
// .el-menu-item {
// height: 36px;
// line-height: 36px;
// .iconfont {
// font-size: 16px;
// color: #409EFF;
// margin-right: 5px;
// }
// }
// }
// }
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background: #409EFF;
color: #fff;
.iconfont {
color: #fff;
}
}
}
</style>
......
static/css/public.css
......@@ -327,6 +327,9 @@ input:focus {
.m-t-10 {
margin-top: 10px;
}
.m-t-30 {
margin-top: 30px;
}
.font-0 .el-form-item__content, .dialog-footer {
font-size: 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment