初始提交
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
// 导航栏标题
|
||||
.title {
|
||||
height: 90rpx;
|
||||
padding: 0 32rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: 30rpx;
|
||||
background-color: #f5f5f5;
|
||||
color: #606064;
|
||||
// 导航栏图标样式
|
||||
.iconclass {
|
||||
display: inline-block;
|
||||
margin: 0 12rpx;
|
||||
color: #D0D4DB;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
// 导航栏项样式
|
||||
.inline-item {
|
||||
display: inline-block
|
||||
}
|
||||
// 导航栏项-启用状态
|
||||
.active {
|
||||
color: #4297ED !important;
|
||||
}
|
||||
// 导航栏项-无状态
|
||||
.none {
|
||||
color: #666666;
|
||||
}
|
||||
168
pages/workFlow/document/components/navigation/NaviGation.vue
Normal file
168
pages/workFlow/document/components/navigation/NaviGation.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<view class="title" style="background-color: #fff;margin-top: 20rpx;">
|
||||
<scroll-view ref="sea" scroll-x style="width: 100%;white-space: nowrap;">
|
||||
<!-- 全部 -->
|
||||
<view class="inline-item" @click="clickItem(null,-1)">
|
||||
<text v-if="!isre && treeStack.length == 0" class="none">全部</text>
|
||||
<text v-else class="active">全部</text>
|
||||
</view>
|
||||
<!-- 全部 -->
|
||||
<!-- 搜索结果 -->
|
||||
<view v-if="isre" @click="clickItem(null,-2)"
|
||||
:class="activeSearch?'active inline-item':' none inline-item'">
|
||||
<i class="iconfont icon-z043 iconclass" />
|
||||
搜索结果
|
||||
</view>
|
||||
<!-- 搜索结果 -->
|
||||
<!-- 当前树的层级值 -->
|
||||
<view v-for="(item,index) in treeStack" class="inline-item" :key="index">
|
||||
<view class="inline-item" @click="clickItem(item,index)">
|
||||
<i class="iconfont icon-z043 iconclass" />
|
||||
<text v-if="index== treeStack.length-1" class="none inline-item">
|
||||
{{item[slabel]}}
|
||||
</text>
|
||||
<text v-else class="active">
|
||||
{{item[slabel]}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 当前树的层级值 -->
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 无限级树-面包屑导航
|
||||
* @description 无限级树的面包屑导航
|
||||
* @property {String} slabel 显示的label值
|
||||
* @return {Function} clickItem（item , index） 点击导航栏的索引
|
||||
* @item 表示导航项对应的值
|
||||
* @index 表示导航项的层级别索引
|
||||
* @value -1 全部
|
||||
* @value -2 表示层级
|
||||
* @value 其他 （从最外层开始，依次0,1,2,3……）
|
||||
* @return {Object} outF 导航条内部的方法
|
||||
* @param {Function} isIre 设置是否搜索状态
|
||||
* @param {Function} setTreeStack 设置导航树的值
|
||||
* @param {Function} pushTreeStack 为导航树添加项
|
||||
* @param {Function} clearTreeStack 清空导航树
|
||||
*/
|
||||
// scrollLeft : 暂时
|
||||
export default {
|
||||
name: "luyj-tree-navigation",
|
||||
props: {
|
||||
// 显示的label值
|
||||
slabel: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isre: false, // 是否进行了搜索(返回是否进行了搜索)
|
||||
treeStack: [], // 当前搜索值
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 是否可点击搜索结果
|
||||
activeSearch() {
|
||||
return this.treeStack.length > 0;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 浅拷贝导航列表的每一个对象（为了不改变item值，也不复制过多的数据）
|
||||
this.treeStack.forEach(item => {
|
||||
let tempItem = Object.assign(item);
|
||||
this.treeStack.push(tempItem);
|
||||
});
|
||||
let obj = {
|
||||
setIsre: this.setIsre,
|
||||
getIsre: this.getIsre,
|
||||
setTreeStack: this.setTreeStack,
|
||||
concatTreeStack: this.concatTreeStack,
|
||||
pushTreeStack: this.pushTreeStack,
|
||||
clearTreeStack: this.clearTreeStack,
|
||||
getTreeStack: this.getTreeStack
|
||||
};
|
||||
this.$emit("inF", obj); // 导出的导航栏调用方法
|
||||
},
|
||||
methods: {
|
||||
// ================================== 初始化时导出方法（用于外部调用内部结果） =========================================================
|
||||
/** 设置isre值(是否搜索)
|
||||
* @param {Boolean} isre 设置是否搜索
|
||||
*/
|
||||
setIsre(isre) {
|
||||
this.isre = isre;
|
||||
},
|
||||
/**
|
||||
* 获取isr值（获取是否搜索中）
|
||||
*/
|
||||
getIsre() {
|
||||
return this.isre;
|
||||
},
|
||||
/** 设置导航树
|
||||
* @param {Array} treeStack 导航树
|
||||
*/
|
||||
setTreeStack(treeStack) {
|
||||
this.treeStack = treeStack;
|
||||
},
|
||||
/** 拼接导航树
|
||||
* @param {Object} treeStack 导航树
|
||||
*/
|
||||
concatTreeStack(treeStack) {
|
||||
this.treeStack = this.treeStack.concat(treeStack);
|
||||
},
|
||||
/** 为导航树添加项
|
||||
* @param {Object} item 待添加的对象
|
||||
*/
|
||||
pushTreeStack(item) {
|
||||
this.treeStack.push(item);
|
||||
},
|
||||
/**
|
||||
* 获取当前导航条
|
||||
*/
|
||||
getTreeStack() {
|
||||
return this.treeStack;
|
||||
},
|
||||
/**
|
||||
* 清空导航树
|
||||
*/
|
||||
clearTreeStack() {
|
||||
this.treeStack.splice(0);
|
||||
},
|
||||
// ================================== 监听事件 ===========================================================
|
||||
/** 点击导航栏索引
|
||||
* @param {Object} item 当前层的值
|
||||
* @param {Number} index 索引值
|
||||
*/
|
||||
clickItem(item, index) {
|
||||
if (index == -1) {
|
||||
// 点击全部
|
||||
this.isre = false;
|
||||
this.treeStack.splice(0);
|
||||
} else if (index == -2) {
|
||||
// 搜索结果
|
||||
if (this.activeSearch) {
|
||||
this.isre = true;
|
||||
this.treeStack.splice(0);
|
||||
}
|
||||
} else {
|
||||
// 点击某一层级树
|
||||
this.isre = false;
|
||||
if (this.treeStack.length - 1 > index) {
|
||||
this.treeStack.splice(index + 1);
|
||||
}
|
||||
}
|
||||
this.$emit("clickItem", item, index);
|
||||
},
|
||||
},
|
||||
// ============================================================================================================
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "navigation.scss";
|
||||
@import "icon.css";
|
||||
</style>
|
||||
342
pages/workFlow/document/components/navigation/icon.css
Normal file
342
pages/workFlow/document/components/navigation/icon.css
Normal file
@@ -0,0 +1,342 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2009600 */
|
||||
src: url('https://at.alicdn.com/t/font_2009600_gpzp7pxtnw.woff2?t=1620633089023') format('woff2'),
|
||||
url('https://at.alicdn.com/t/font_2009600_gpzp7pxtnw.woff?t=1620633089023') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_2009600_gpzp7pxtnw.ttf?t=1620633089023') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-banxuanzhongshousuo1-shi:before {
|
||||
content: "\e682";
|
||||
}
|
||||
|
||||
.icon-xuanzhong3:before {
|
||||
content: "\e6bb";
|
||||
}
|
||||
|
||||
.icon-weixuanzhong2:before {
|
||||
content: "\e62e";
|
||||
}
|
||||
|
||||
.icon-danxuanxuanzhong:before {
|
||||
content: "\e631";
|
||||
}
|
||||
|
||||
.icon-xuanzhong4:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.icon-xuanzhong1:before {
|
||||
content: "\e62d";
|
||||
}
|
||||
|
||||
.icon-xuanzhong2:before {
|
||||
content: "\e656";
|
||||
}
|
||||
|
||||
.icon-selected:before {
|
||||
content: "\e615";
|
||||
}
|
||||
|
||||
.icon-weixuanzhong1:before {
|
||||
content: "\e614";
|
||||
}
|
||||
|
||||
.icon-xingzhuang6kaobei3-copy-copy:before {
|
||||
content: "\e613";
|
||||
}
|
||||
|
||||
.icon-radio-checked:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.icon-huifu:before {
|
||||
content: "\e619";
|
||||
}
|
||||
|
||||
.icon-dizhi:before {
|
||||
content: "\e64a";
|
||||
}
|
||||
|
||||
.icon-kuaijiecaidan:before {
|
||||
content: "\e60a";
|
||||
}
|
||||
|
||||
.icon-z043:before {
|
||||
content: "\e62f";
|
||||
}
|
||||
|
||||
.icon-guanbi:before {
|
||||
content: "\e607";
|
||||
}
|
||||
|
||||
.icon-xuanze:before {
|
||||
content: "\e623";
|
||||
}
|
||||
|
||||
.icon-caidanzhaolinggan:before {
|
||||
content: "\e616";
|
||||
}
|
||||
|
||||
.icon-xitongshezhi:before {
|
||||
content: "\e60c";
|
||||
}
|
||||
|
||||
.icon-xitongshezhi1:before {
|
||||
content: "\e633";
|
||||
}
|
||||
|
||||
.icon-lunbo:before {
|
||||
content: "\e692";
|
||||
}
|
||||
|
||||
.icon-shuping:before {
|
||||
content: "\e659";
|
||||
}
|
||||
|
||||
.icon-tongzhi:before {
|
||||
content: "\e641";
|
||||
}
|
||||
|
||||
.icon-pinglunguanlishezhi:before {
|
||||
content: "\e6ac";
|
||||
}
|
||||
|
||||
.icon-icon:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-liuyanguanli:before {
|
||||
content: "\e61d";
|
||||
}
|
||||
|
||||
.icon-xuanzhong:before {
|
||||
content: "\e669";
|
||||
}
|
||||
|
||||
.icon--:before {
|
||||
content: "\e622";
|
||||
}
|
||||
|
||||
.icon-tushu:before {
|
||||
content: "\e604";
|
||||
}
|
||||
|
||||
.icon-huishouzhan:before {
|
||||
content: "\e61c";
|
||||
}
|
||||
|
||||
.icon-yonghutouxiang:before {
|
||||
content: "\e617";
|
||||
}
|
||||
|
||||
.icon-liebiao:before {
|
||||
content: "\e630";
|
||||
}
|
||||
|
||||
.icon-fenlei:before {
|
||||
content: "\e621";
|
||||
}
|
||||
|
||||
.icon-tushu1:before {
|
||||
content: "\e605";
|
||||
}
|
||||
|
||||
.icon-tubiao-:before {
|
||||
content: "\e620";
|
||||
}
|
||||
|
||||
.icon-weixuanze:before {
|
||||
content: "\e624";
|
||||
}
|
||||
|
||||
.icon-tushujieyue:before {
|
||||
content: "\e690";
|
||||
}
|
||||
|
||||
.icon-lunbo1:before {
|
||||
content: "\e6c5";
|
||||
}
|
||||
|
||||
.icon-shanchu:before {
|
||||
content: "\e67b";
|
||||
}
|
||||
|
||||
.icon-lunbo2:before {
|
||||
content: "\e61e";
|
||||
}
|
||||
|
||||
.icon-huaban:before {
|
||||
content: "\e663";
|
||||
}
|
||||
|
||||
.icon-kehuan:before {
|
||||
content: "\e608";
|
||||
}
|
||||
|
||||
.icon-icon02:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.icon-huishouzhan1:before {
|
||||
content: "\e612";
|
||||
}
|
||||
|
||||
.icon-huishouzhan2:before {
|
||||
content: "\e63d";
|
||||
}
|
||||
|
||||
.icon-sousuo:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
|
||||
.icon-xingzhuang:before {
|
||||
content: "\e625";
|
||||
}
|
||||
|
||||
.icon-lunbobankuai:before {
|
||||
content: "\e61f";
|
||||
}
|
||||
|
||||
.icon-shangchuan:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-yonghu:before {
|
||||
content: "\e761";
|
||||
}
|
||||
|
||||
.icon-tongzhi1:before {
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
.icon-jingsong:before {
|
||||
content: "\e65c";
|
||||
}
|
||||
|
||||
.icon-fenlei1:before {
|
||||
content: "\e6c6";
|
||||
}
|
||||
|
||||
.icon-xieshupingicon:before {
|
||||
content: "\e72d";
|
||||
}
|
||||
|
||||
.icon-liuyan:before {
|
||||
content: "\e626";
|
||||
}
|
||||
|
||||
.icon-weixuanzhong:before {
|
||||
content: "\e627";
|
||||
}
|
||||
|
||||
.icon-youxiang:before {
|
||||
content: "\e646";
|
||||
}
|
||||
|
||||
.icon-lunboguanggao:before {
|
||||
content: "\e6b3";
|
||||
}
|
||||
|
||||
.icon-xuanze1:before {
|
||||
content: "\e60d";
|
||||
}
|
||||
|
||||
.icon-chushaixuanxiang:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.icon-liuyanguanli1:before {
|
||||
content: "\e61a";
|
||||
}
|
||||
|
||||
.icon-shanchu1:before {
|
||||
content: "\e609";
|
||||
}
|
||||
|
||||
.icon-huishouzhan3:before {
|
||||
content: "\e642";
|
||||
}
|
||||
|
||||
.icon-shangchuan1:before {
|
||||
content: "\e823";
|
||||
}
|
||||
|
||||
.icon-huishouzhan4:before {
|
||||
content: "\e61b";
|
||||
}
|
||||
|
||||
.icon-chuangzuo:before {
|
||||
content: "\e8ad";
|
||||
}
|
||||
|
||||
.icon-dianzan:before {
|
||||
content: "\e8ae";
|
||||
}
|
||||
|
||||
.icon-paihangbang:before {
|
||||
content: "\e8b3";
|
||||
}
|
||||
|
||||
.icon-shouye:before {
|
||||
content: "\e8b9";
|
||||
}
|
||||
|
||||
.icon-shoucang:before {
|
||||
content: "\e8c6";
|
||||
}
|
||||
|
||||
.icon-addApp:before {
|
||||
content: "\e60b";
|
||||
}
|
||||
|
||||
.icon-huishouzhan5:before {
|
||||
content: "\e63a";
|
||||
}
|
||||
|
||||
.icon-add1:before {
|
||||
content: "\e60e";
|
||||
}
|
||||
|
||||
.icon-shoucang1:before {
|
||||
content: "\e60f";
|
||||
}
|
||||
|
||||
.icon-canshutongji:before {
|
||||
content: "\e618";
|
||||
}
|
||||
|
||||
.icon-rizhiguanli:before {
|
||||
content: "\e628";
|
||||
}
|
||||
|
||||
.icon-shanchu2:before {
|
||||
content: "\e629";
|
||||
}
|
||||
|
||||
.icon-xinzeng:before {
|
||||
content: "\e62a";
|
||||
}
|
||||
|
||||
.icon-zhankailiebiao:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
.icon-xiala-copy:before {
|
||||
content: "\e610";
|
||||
}
|
||||
|
||||
.icon-shangla:before {
|
||||
content: "\e64e";
|
||||
}
|
||||
|
||||
.icon-xianxingshezhi:before {
|
||||
content: "\e611";
|
||||
}
|
||||
Reference in New Issue
Block a user