@@ -55,9 +55,21 @@
-
-
- 搜索-+ +左++
+
+
-
+
+ 右++
+
+
-
+
+ 最近+
@font-face {
font-family: 'iconfont';
- src: url('iconfont.woff2?t=1676945701463') format('woff2'),
- url('iconfont.woff?t=1676945701463') format('woff'),
- url('iconfont.ttf?t=1676945701463') format('truetype');
+ src: url('iconfont.woff2?t=1710383734701') format('woff2'),
+ url('iconfont.woff?t=1710383734701') format('woff'),
+ url('iconfont.ttf?t=1710383734701') format('truetype');
}
第二步：定义使用 iconfont 的样式
@@ -107,11 +119,29 @@-
-
+
+ + 左 ++.icon-left ++
+
+
-
+
+ + 右 ++.icon-right ++
+
+
-
+
- 搜索 + 最近-.icon-gym-Gsearch +.icon-recent@@ -131,7 +161,7 @@
<link rel="stylesheet" href="./iconfont.css">第二步：挑选相应图标并获取类名，应用于页面：
-<span class="iconfont icon-gymxxx"></span> +<span class="iconfont icon-xxx"></span>" @@ -144,10 +174,26 @@
- +
+ +左+#icon-left+- + +
+ +右+#icon-right+- + -
diff --git a/ruoyi-ui/src/assets/iconfont/iconfont.css b/ruoyi-ui/src/assets/iconfont/iconfont.css new file mode 100644 index 00000000..cf6b330a --- /dev/null +++ b/ruoyi-ui/src/assets/iconfont/iconfont.css @@ -0,0 +1,27 @@ +@font-face { + font-family: "iconfont"; /* Project id 4466169 */ + src: url('iconfont.woff2?t=1710383734701') format('woff2'), + url('iconfont.woff?t=1710383734701') format('woff'), + url('iconfont.ttf?t=1710383734701') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-left:before { + content: "\e622"; +} + +.icon-right:before { + content: "\e750"; +} + +.icon-recent:before { + content: "\e74f"; +} + diff --git a/ruoyi-ui/src/assets/iconfont/iconfont.js b/ruoyi-ui/src/assets/iconfont/iconfont.js new file mode 100644 index 00000000..c20d4ec5 --- /dev/null +++ b/ruoyi-ui/src/assets/iconfont/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_4466169='',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,i,c,d,s,a=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4466169,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?a(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(c=o,d=n.document,s=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,l())})}function l(){s||(s=!0,c())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window); \ No newline at end of file diff --git a/ruoyi-ui/src/assets/iconfont/iconfont.json b/ruoyi-ui/src/assets/iconfont/iconfont.json new file mode 100644 index 00000000..c86ae2dd --- /dev/null +++ b/ruoyi-ui/src/assets/iconfont/iconfont.json @@ -0,0 +1,30 @@ +{ + "id": "4466169", + "name": "济荷", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "8483536", + "name": "左", + "font_class": "left", + "unicode": "e622", + "unicode_decimal": 58914 + }, + { + "icon_id": "39545533", + "name": "右", + "font_class": "right", + "unicode": "e750", + "unicode_decimal": 59216 + }, + { + "icon_id": "9392635", + "name": "最近", + "font_class": "recent", + "unicode": "e74f", + "unicode_decimal": 59215 + } + ] +} diff --git a/ruoyi-ui/src/assets/iconfont/iconfont.ttf b/ruoyi-ui/src/assets/iconfont/iconfont.ttf new file mode 100644 index 0000000000000000000000000000000000000000..aeb0acc85210c5eca1e6c5c679b988e2a0bfdd16 GIT binary patch literal 1948 zcmd^AO>Y}j6g_WdY!jP?q)qGyqIP5zyMp4RPUMi(EfuA)gpd-oC5mXP))~*(uErmX zr=g)6ODL+UAdv+N7G(n~J{G7F3nUgGwJHl#RtSVpg;+F|2uO$zu>hO%X2uF6`~%+T zzIX0@_nv#-oi{cFfEe0PF搜索-#icon-gym-Gsearch+最近+#icon-recentpRjDDQ_ zW2U;j-@&9iyfS@qVe+V_%&)lO+WW=fjdel%_`pxBdcrhP=@YI0+CSKP@XBt|^!xa% zu#=I|LRT0(?JC8#bGe8ElDSHCzsq3dY7N}B*&X|@-qJ@>w-Mk&^X^#DZJ @@ -40,7 +42,7 @@ export default { UserArea, RecentPages }, - emit: ["change"], + // emit: ["change"], created() { this.activeIndex = this.$route.meta.menuId; this.menuLeft = []; @@ -59,11 +61,11 @@ export default { // console.log(this.activeIndex); }, methods: { - onChange(item, activeIndex) { - this.activeIndex = activeIndex; - // this.$router.push(item.name); - this.$emit("onChange", item) - } + // onChange(item, activeIndex) { + // this.activeIndex = activeIndex; + // // this.$router.push(item.name); + // this.$emit("onChange", item) + // } } }; diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/RecentPages/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/RecentPages/index.vue index ddc259a1..89987bd0 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/components/RecentPages/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/components/RecentPages/index.vue @@ -1,13 +1,21 @@- + + @@ -11,7 +12,8 @@-
+ + -最近使用:
+最近使用:
-@@ -15,12 +23,60 @@ import { mapMutations, mapState } from 'vuex'; export default{ data(){ - return {} + return { + posiLeft:0, //按钮列表绝对定位的数值 + widthBox:0, + widthTotal:0, + lastIndex:-1, //当前能显示的最后一个元素的索引 + startIndex:-1, //当前能显示的第一个元素的索引 + widthArr:[], + currentIndex : -1 + } }, computed:{ - ...mapState("menu", ["recentPages"]) + ...mapState("menu", ["recentPages"]), + btnListStyle(){ + return { + left : `${this.posiLeft}px` + }; + } }, watch:{ + recentPages:{ + handler(newV){ + this.$nextTick(()=>{ + // console.log("触发了Precentage的watch") + this.widthArr = []; + this.widthBox = this.$refs["box"].offsetWidth; + this.widthTotal = this.$refs["btnlist"].offsetWidth; + let temp = 0; + console.log(newV , "recentPagessssssssssssssss"); + newV.forEach((item,index)=>{ + let unitW = this.$refs["unit"][index].offsetWidth; + temp += unitW; + this.widthArr[index] = temp; + if(temp >= this.widthBox && this.lastIndex == -1){ + this.lastIndex = index; + } + if(item.active){ + this.currentIndex = index; + } + // console.log(this.currentIndex, "currentIndexcurrentIndex") + // console.log(this.startIndex, "startIndexstartIndex") + // console.log(this.lastIndex, "lastIndexlastIndex") + }) + + if (this.currentIndex >= this.lastIndex) { + this.moveByRight(this.currentIndex); + } else if (this.currentIndex <= this.startIndex) { + this.moveByLeft(this.currentIndex); + } + + }) + }, + immediate:true, + deep:true, + }, $route:{ handler(newV){ this.addRecent({ @@ -31,6 +87,15 @@ export default{ immediate : true } }, + mounted(){ + // 测试数据 + // for (let i = 0; i < 30; i++) { + // this.addRecent({ + // title: `第${i}项菜单示例`, + // path: "url" + i + // }); + // } + }, methods:{ ...mapMutations("menu", ["addRecent","removeRecent"]), onClickItem(item){ @@ -48,40 +113,129 @@ export default{ }, isActive(item) { return this.$route.path == item.path; + }, + onLeft(){ + this.moveByLeft(); + }, + onRight(){ + this.moveByRight(); + }, + moveByLeft(targetIndex){ + // console.log("左侧动", this.startIndex, targetIndex); + if (this.startIndex <= 0) { + return + } + if (targetIndex != undefined) { + this.startIndex = targetIndex; + } else { + this.startIndex -= 3; + } + if (this.startIndex < 0) { + this.startIndex = 0; + } + if(this.startIndex == 0){ + this.posiLeft = 0; + }else{ + this.posiLeft = this.widthArr[this.startIndex-1] * -1; + } + this.calcLastIndex(); + // console.log(this.posiLeft , "posiLeft++"); + }, + moveByRight(targetIndex){ + // console.log("右侧动", this.lastIndex, targetIndex); + if(this.lastIndex >= this.widthArr.length - 1){ + return + } + if(targetIndex!==undefined){ + this.lastIndex = targetIndex; + }else{ + this.lastIndex += 3; + } + if(this.lastIndex > this.widthArr.length-1){ + this.lastIndex = this.widthArr.length - 1; + } + // console.log(targetIndex, this.widthArr.length , "+++========") + this.posiLeft = this.widthBox - this.widthArr[this.lastIndex]; + this.calcStartIndex(); + }, + calcStartIndex(){ + try{ + this.widthArr.forEach((item,index)=>{ + if(item > -1*this.posiLeft){ + this.startIndex = index; + throw new Error('找到startIndex,退出循环') + } + }) + }catch(e){ + // console.log(e); + } + }, + calcLastIndex(){ + try{ + this.widthArr.forEach((item, index) => { + console.log(this.widthArr , "this.widthArrthis.widthArr"); + console.log(index, item, this.widthBox - this.posiLeft , item > (this.widthBox - this.posiLeft)); + if (item > (this.widthBox - this.posiLeft)) { //posiLeft是个负值 + this.lastIndex = index; + console.log(this.lastIndex , "lastIndexlastIndexlastIndexlastIndexlastIndexlastIndex") + // console.log(this.lastIndex , "this.lastIndex lastIndex lastIndex lastIndex") + throw new Error('找到lastIndex,退出循环') + } + }) + }catch(e){ + // console.log(e); + } } } }-{{ - item.title - }}
-x
++++++++ {{item.title}} +
++
+
+ - +