的隐藏滚动组件el,基于iview的router常用控制方式

el-scrollbar/el-scrollbar

CTRL + SHIFT + F:格式化代码;

官方路由变更确实可以正常打开标签页,但在实现1中所提到的各种需求的时候,就有些不满足需求了.为此,需要参考3中,如何基于iview的outer控制.

高度由内容撑开

CTRL + SHIFT + Y:转换小写;

4 其他

为什么要用el-scrollbar,大家都知道,模拟一个滚动不难,而且市面上有很多这样的库。我考虑的,首先项目用的框架是Vue,然后用的组件库是Element,Element官网也有很多滚动,而且像是Select组件的下拉框也是有滚动的,所以就不用想选择什么了,简简单单的就用Element自己的scrollbar吧,也不用再引入什么别的包或者文件之类的。

ALT + SHIFT + R:重命名;

// 设置路由id,该方法在第一次保存后调用setData (id) { //这里的id是保存后从后台传来的新id this.$router.push({ params: Object.assign(this.$route.params, { id }) })}

看Element的官网是不可能发现Scrollbar这个组件的。但是在源码中是有的。所以我们可以直接使用:

CTRL + SHIFT + /:用块注释注释选择的行;

app.js中的state.tagNavList是标签页中显示的标签集合;如果要改变一些内容,main.vue中对$route的监控是事件发起的开端,可考虑从这里修改;

但是我们需要微调一下样式,两种情况的演示代码如下:

CTRL + /:用行注释注释当前行或者选择的行;

3.2 如何实现需求1.2

已知内容高度

CTRL + SHIFT + X:转换大写;

最近在使用iview框架写项目,遇到了一些路由控制上的问题,解决过程中也有一些心得,故在此记录下来.每个项目在开发时,对于类似tags(标签页)的控制需求都不尽相同,故以下先列出本文所述项目对标签页的控制要求(如有不同需求,本文当也可提供一些思路):

div style='height:800px'el-scrollbar class='page-component__scroll'/el-scrollbardivstyle.page-component__scroll{ height: 100%;}.page-component__scroll .el-scrollbar__wrap { overflow-x: auto;}style

CTRL + SHIFT + C:和上面一样;

/** * 判断打开的标签列表里是否已存在这个新添加的路由对象 */export const routeHasExist = (tagNavList, routeItem) = { let len = tagNavList.length let res = false doCustomTimes(len, (index) = { if (routeEqual(tagNavList[index], routeItem)) res = true }) return res}

1、打开资源

//变更当前路由(有历史记录,建议使用此方式)this.$router.push({ name:'routerName', params:routerParam})//变更当前路由(无历史记录)this.$router.replace({ name:'routerName', routerParam})

CTRL + SHIFT + M:导入需要的类引用;

在进行3.1的操作后,问题得到了部分解决.余下的问题在于需求1.2没有得到实现和解决.首先是,如何实现从列表中打开或新建的,替换原来的标签页,在来回切换后不会回到原来的标签页.
只需在app.js中注册改变标签页参数的方法:

10.添加注释

/** * @description 根据name/params/query判断两个路由对象是否相等 * @param {*} route1 路由对象 * @param {*} route2 路由对象 */export const routeEqual = (route1, route2) = { return route1.name === route2.name // 此处改变相同路由的判断方式,改为name相同即认为相同 // const params1 = route1.params || {} // const params2 = route2.params || {} // const query1 = route1.query || {} // const query2 = route2.query || {} // return (route1.name === route2.name)  objEqual(params1, params2)  objEqual(query1, query2)}

CTRL + E:显示所有打开的编辑器列表;

3.1 如何实现需求1.1

ALT + 上下方向键:向上/下替换行;

其次,如果出现像保存并新增,或者从未保存到已保存,这两种情况来回切换后不会回到原来的情况.保存并新增,关键是”新增”效果:

CTRL + SHIFT + T:打开 Java 类型文件,包括 JAR 包;

明显可以看出,这个方法内调用routeEqual,就是用以判断是否为相同路由的实际方法(当然是通过比较新路由与已有路由进行比较),如此,仅需改变routeEqual即可.以防万一,全局搜索下调用这个routeEqual的所有方法,发现所有调用的地方再routeEqual在改变后不会出现新的问题.

发表评论

电子邮件地址不会被公开。 必填项已用*标注