Skip to content
项目
群组
代码片段
帮助
正在加载...
帮助
提交反馈
为 GitLab 提交贡献
登录
切换导航
iBiz-Vue-R7-Res
项目
项目
详情
动态
版本
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
计划
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
统计图
创建新议题
作业
提交
议题看板
打开侧边栏
iBiz-R7前端标准模板
iBiz-Vue-R7-Res
提交
a49ad640
提交
a49ad640
编写于
5月 13, 2020
作者:
tony001
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
zpc --- 调整快速分组栏
上级
a561d2ba
变更
2
显示空白字符变更
内嵌
并排
正在显示
2 个修改的文件
包含
57 行增加
和
16 行删除
+57
-16
app-quick-group.less
src/components/app-quick-group/app-quick-group.less
+32
-1
app-quick-group.vue
src/components/app-quick-group/app-quick-group.vue
+25
-15
未找到文件。
src/components/app-quick-group/app-quick-group.less
浏览文件 @
a49ad640
.app-quick-group{
.app-quick-group{
padding: 4px;
background-color: #F1F1F1;
.app-quick-item{
.app-quick-item{
margin-right: 4px;
margin-right: 8px;
padding: 8px;
cursor: pointer;
cursor: pointer;
.app-quick-item-label{
margin-left:4px;
}
.app-seleted-item{
display: inline-block;
font-weight: 700;
color: #0c64eb !important;
padding: 4px;
border-bottom: 2px solid;
}
.app-seleted-item:focus {
outline: none;
}
.app-quick-item-counter{
border-radius: 12px;
padding-left: 4px;
font-size: 12px;
font-weight: 400;
vertical-align: middle;
display: inline-block;
width: 18px;
height: 18px;
margin-left: 4px;
background-color: #ddd;
}
}
.app-quick-item :hover{
color: #0c64eb !important;
}
}
}
}
\ No newline at end of file
src/components/app-quick-group/app-quick-group.vue
浏览文件 @
a49ad640
<
template
>
<
template
>
<div
class=
"app-quick-group"
>
<div
class=
"app-quick-group"
>
<span
class=
"app-quick-item"
v-for=
"item in renderArray"
:key=
"item.id"
@
click=
"handleClick(item)"
>
<span
class=
"app-quick-item"
v-for=
"item in renderArray"
:key=
"item.id"
@
click=
"handleClick(item)"
>
<el-tag
:type=
"selectedUiItem.id === item.id?'':'info'"
v-if=
"!item.children"
>
<span
v-if=
"!item.children"
:style=
"
{color:item.color}" :class="{'app-seleted-item':isSelectedItem(item)}">
<span
:style=
"
{color:item.color}">
<i
v-if=
" item.iconcls && !Object.is(item.iconcls, '')"
:class=
"item.iconcls"
></i>
<i
v-if=
" item.iconcls && !Object.is(item.iconcls, '')"
:class=
"item.iconcls"
></i>
<img
v-else-if=
"item.icon && !Object.is(item.icon, '')"
:src=
"item.icon"
/>
<img
v-else-if=
"item.icon && !Object.is(item.icon, '')"
:src=
"item.icon"
/>
<el-badge
v-if=
"counterName"
:value=
"''"
class=
"item"
type=
"primary"
>
{{
item
.
label
}}
</el-badge
>
<span
class=
"app-quick-item-label"
>
{{
item
.
label
}}
</span
>
<span
v-else
>
{{
item
.
label
}}
</span>
<span
v-show=
"isSelectedItem(item)"
class=
"app-quick-item-counter"
>
0
</span>
</span>
</span>
</el-tag>
<el-dropdown
v-if=
"item.children"
style=
"outline: none !important;"
trigger=
"click"
@
command=
"handleCommand($event,item)"
>
<el-dropdown
v-if=
"item.children"
@
command=
"handleCommand($event,item)"
>
<span
:style=
"
{color:item.color}" :class="{'app-seleted-item':isSelectedItem(item)}">
<el-tag
:type=
"selectedUiItem.id === item.id?'':'info'"
>
<span
:style=
"
{color:item.color}">
<i
v-if=
" item.iconcls && !Object.is(item.iconcls, '')"
:class=
"item.iconcls"
></i>
<i
v-if=
" item.iconcls && !Object.is(item.iconcls, '')"
:class=
"item.iconcls"
></i>
<img
v-else-if=
"item.icon && !Object.is(item.icon, '')"
:src=
"item.icon"
/>
<img
v-else-if=
"item.icon && !Object.is(item.icon, '')"
:src=
"item.icon"
/>
<el-badge
v-if=
"counterName"
:value=
"''"
class=
"item"
type=
"primary"
>
{{
item
.
label
}}
</el-badge
>
<span
class=
"app-quick-item-label"
>
{{
item
.
label
}}
</span
>
<span
v-else
>
{{
item
.
label
}}
</span>
<span
v-show=
"isSelectedItem(item)"
class=
"app-quick-item-counter"
>
0
</span>
</span>
</span>
</el-tag>
<el-dropdown-menu
slot=
"dropdown"
>
<el-dropdown-menu
slot=
"dropdown"
>
<el-dropdown-item
v-for=
"childitem in item.children"
:command=
"childitem"
:key=
"childitem.id"
>
<el-dropdown-item
v-for=
"childitem in item.children"
:command=
"childitem"
:key=
"childitem.id"
>
<span
:style=
"
{color:childitem.color}">
<span
:style=
"
{color:childitem.color}">
<i
v-if=
" childitem.iconcls && !Object.is(childitem.iconcls, '')"
:class=
"childitem.iconcls"
></i>
<i
v-if=
" childitem.iconcls && !Object.is(childitem.iconcls, '')"
:class=
"childitem.iconcls"
></i>
<img
v-else-if=
"childitem.icon && !Object.is(childitem.icon, '')"
:src=
"childitem.icon"
/>
<img
v-else-if=
"childitem.icon && !Object.is(childitem.icon, '')"
:src=
"childitem.icon"
/>
{{
childitem
.
label
}}
<span
:style=
"
{color:(childitem.label == item.label)?'#0c64eb':''}">
{{
childitem
.
label
}}
</span>
</span>
</span>
</el-dropdown-item>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown-menu>
...
@@ -94,6 +90,20 @@ export default class AppQuickGroup extends Vue {
...
@@ -94,6 +90,20 @@ export default class AppQuickGroup extends Vue {
}
}
}
}
/**
* 是否选中当前项
*
* @param item 传入当前项
* @memberof AppQuickGroup
*/
public
isSelectedItem
(
item
:
any
){
if
(
this
.
selectedUiItem
&&
(
this
.
selectedUiItem
.
id
===
item
.
id
)){
return
true
;
}
else
{
return
false
;
}
}
/**
/**
* 处理代码表返回数据(树状结构)
* 处理代码表返回数据(树状结构)
*
*
...
...
编辑
预览
Markdown
格式
0%
请重试
or
添加新附件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
先完成此消息的编辑!
取消
想要评论请
注册
或
登录