Breadcrumb 面包屑
动态生成el-breadcrumb-item时,不能使用v-text,会导致图标分隔符失效,并且无法跳转;需使用双括号语法
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: $router.currentRoute.fullpath}">{{$router.currentRoute.name}}</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
</el-breadcrumb>
//后面的写法会导致图标分隔符失效,并且无法跳转
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: $router.currentRoute.fullpath}" v-text="$router.currentRoute.name"></el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
</el-breadcrumb>
当el-breadcrumb-item只有一个时,默认不能跳转
点击按钮 el-input 框 显示并自动聚焦
input框和按钮都是动态遍历生成的
<el-input size="mini" v-if="flag" v-model="input" @blur="inputBlur(item1)" autocomplete="on" placeholder="请输入内容" :ref="'ref'+item1.id"></el-input>
<el-button @click="btnClick(item1)">按钮</el-button>
//按钮点击事件
btnClick(opt){
this.flag=true
this.$refs['ref'+opt.id][0].focus();
}
这么写的话input会显示,但是始终无法聚焦;解决方案
//按钮点击事件
btnClick(opt){
this.flag=true
setTimeout(()=>{
this.$refs['ref'+opt.id][0].focus();
})
}
这样就好了,具体原因不清楚;可能是渲染速度的问题
el-tree的展开和关闭图标问题
项目中UI设计图纸有一个树形目录,但是icon图标和element默认图标不一致;一开始想通过修改源代码换掉,找了半天找到了,但是element打开和关闭做的不是图标切换,而是图标旋转,没办法只能自己写一个
下面是代码,支持新建目录,最多只支持三级;第三级不提供新建目录功能
<template>
<div class="tree">
<div class="treeChild">
<div class="childList" v-for="item1 in dataList">
<div class="title_all">
<span :class="{'icon':true,'active':item1.flag}" @click="iconClick(item1)" v-if="item1.children&&item1.children.length" v-text="item1.flag?'+':'-'"></span>
<span :class="{title:true,active:item1.label===activeLabel,all:true}" v-text="item1.label" @click="nodeClick(item1)"></span>
<span class="createTreeNode" title="新建文件" v-show="createNodeBtnFlag&&!nodeCreating" @click="createTreeNode(item1)">+</span>
</div>
<div class="children childrenFirst" v-show="!item1.flag">
<div v-for="item2,index2 in item1.children" :class="{childList:true,'last_child':index2===item1.children.length-1}">
<div class="title_header" @mouseenter="createTreeBtnShow(item2)" @mouseleave="createTreeBtnHide(item2)">
<span :class="{'icon':true,'active':item2.flag}" @click="iconClick(item2)" v-if="item2.children&&item2.children.length" v-text="item2.flag?'+':'-'"></span>
<span :class="{title:true,active:item2.label===activeLabel}" v-text="item2.label" @click="nodeClick(item2)"></span>
<span class="createTreeNode" title="新建文件" v-show="item2.createNodeBtnFlag&&!nodeCreating" @click="createTreeNode(item2)">+</span>
</div>
<div class="children" v-show="!item2.flag">
<div v-for="item3,index3 in item2.children" :class="{childList:true,'last_child':index3===item2.children.length-1}">
<div class="title_header" @mouseenter="createTreeBtnShow(item3)" @mouseleave="createTreeBtnHide(item3)">
<span :class="{'icon':true,'active':item3.flag}" @click="iconClick(item3)" v-if="item3.children&&item3.children.length" v-text="item3.flag?'+':'-'"></span>
<span :class="{title:true,active:item3.label===activeLabel}" v-text="item3.label" @click="nodeClick(item3)"></span>
<span class="createTreeNode" title="新建文件" v-show="item3.createNodeBtnFlag&&!nodeCreating" @click="createTreeNode(item3)">+</span>
</div>
<div class="children" v-show="!item3.flag">
<div v-for="item4,index4 in item3.children" :class="{childList:true,'last_child':index4===item3.children.length-1}">
<div class="title_header">
<span :class="{'icon':true,'active':item4.flag}" @click="iconClick(item4)" v-if="item4.children&&item4.children.length" v-text="item3.flag?'+':'-'"></span>
<span :class="{title:true,active:item4.label===activeLabel}" v-text="item4.label" @click="nodeClick(item4)"></span>
</div>
</div>
<div class="createTreeNodeInput" v-show="item3.createNodeFlag" >
<el-input size="mini" v-model="input" @blur="inputBlur(item3)" autocomplete="on" placeholder="请输入内容" :ref="'ref'+item3.id"></el-input>
</div>
</div>
</div>
<div class="createTreeNodeInput" v-show="item2.createNodeFlag" >
<el-input size="mini" v-model="input" @blur="inputBlur(item2)" autocomplete="on" placeholder="请输入内容" :ref="'ref'+item2.id"></el-input>
</div>
</div>
</div>
<div class="createTreeNodeInput" v-show="item1.createNodeFlag" >
<el-input size="mini" v-model="input" @blur="inputBlur(item1)" autocomplete="on" placeholder="请输入内容" :ref="'ref'+item1.id"></el-input>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
dataList : [],
input:"",
activeLabel : "全部图片",
createNodeBtnFlag:true,
nodeCreating:false,
}
},
props : ['data'],
computed : {},
methods : {
//触发数形目录点击事件
nodeClick(opt){
this.activeLabel = opt.label;
this.$emit('node-click', opt)
},
//展开与关闭
iconClick(opt){
opt.flag = !opt.flag;
this.dataList = JSON.parse(JSON.stringify(this.dataList))
},
//点击新建目录按钮
createTreeNode(opt){
this.nodeCreating=opt.createNodeFlag = true;
this.dataList = JSON.parse(JSON.stringify(this.dataList));
setTimeout(()=>{
console.log(this.$refs['ref'+opt.id][0]);
this.$refs['ref'+opt.id][0].focus();
})
},
//新建目录input框失去焦点事件
inputBlur(opt){
if(this.input){
this.$emit('createTreeNode', opt,this.input);
this.input="";
}
this.nodeCreating= opt.createNodeFlag = false;
this.dataList = JSON.parse(JSON.stringify(this.dataList))
},
//新建目录按钮显示
createTreeBtnShow(opt){
this.createNodeBtnFlag=false;
opt.createNodeBtnFlag=true;
this.dataList = JSON.parse(JSON.stringify(this.dataList))
},
//新建目录按钮隐藏
createTreeBtnHide(opt){
this.createNodeBtnFlag=true;
opt.createNodeBtnFlag=false;
this.dataList = JSON.parse(JSON.stringify(this.dataList))
}
},
mounted(){
this.dataList = this.data;
}
}
</script>
<style scoped>
.tree{
width:100%;
height:100%;
position:relative;
overflow:hidden;
}
.treeChild{
overflow:auto;
width:100%;
height:100%;
}
.icon{
width:11px;
height:11px;
text-align:center;
line-height:11px;
border:1px solid #ccc;
display:inline-block;
font-size:14px;
color:#ccc;
margin:0 6px;
cursor:pointer;
position:relative;
background-color:#fff;
}
.title{
color:#333;
font-size:14px;
line-height:30px;
cursor:pointer;
display:inline-block;
padding:0 5px;
white-space:nowrap;
}
.title.active{
color:#377ee8;
background-color:#e6e6e6;
}
.title.all{
background-color:#e6e6e6;
height:30px;
padding:0 5px;
}
.title_all{
padding-right:30px;
}
.title_header{
white-space:nowrap;
width:100%;
box-sizing:border-box;
padding-right:30px;
background:linear-gradient(to right, #eaedf1, #eaedf1) no-repeat left center;
background-size:20px 1px;
}
.title_header .icon{
left:-13px;
}
.children{
margin-left:30px;
background:linear-gradient(to bottom, #eaedf1, #eaedf1) no-repeat left top;
background-size:1px 5px;
padding-top:5px;
}
.children.childrenFirst{
margin-left:50px;
}
.children .childList{
background:linear-gradient(to bottom, #eaedf1, #eaedf1) no-repeat left top;
background-size:1px 100%;
}
.children .last_child{
background-size:1px 15px;
}
.createTreeNode{
padding:0 10px;
height:30px;
vertical-align:middle;
/*margin-right:15px;*/
font-size:24px;
cursor:pointer;
background-color:#fff;
position:absolute;
right: 0;
}
.createTreeNodeInput{
height:30px;
padding:0 10px;
line-height:20px;
}
</style>
组件调用
<Tree :data="treeData" @node-click="treeNodeClick" @createTreeNode="createTreeNode"></Tree>
data树状图的数据结构,这里没有做设置;写死了,可以自己设置
data:[{
label:"目录",
children:[]
}]
node-click节点点击事件 createTreeNode新建节点事件