Blog

重写 Twitter Monitor 的时候用过 element-ui,~~ 其实还是不错的~~,就是~~有时有点~~坑……

大图浏览无法显示第一张图

对的,看了下组件代码,新版的在 previewSrcList 找了 src 的索引,为了点开预览打开的是 src 这张图,如果找不到返回 - 1 就显示不出来图片
@wuli-little-frog

issue 和 pr 下有不少相关的讨论,我随便找了一个放上来

其中一个解决方法是把 packages/image/src/main.vue 的第 97 行的

1
return this.previewSrcList.indexOf (this.src);

改为

1
return this.previewSrcList.indexOf (this.src) > 0 ? this.previewSrcList.indexOf (this.src) : 0;

大图浏览不 lazy

设置了 lazyload,小图确实 lazy 了,我的大图怎么全都加载了?这是一个老传统艺能了,修改 packages/image/src/main.vue18

1
<template v-if="preview">

1
<template v-if="preview && showViewer">

show 也不是不可以,但如果有下一条这种需求就很尴尬了

大图与小图链接不一致

** 警告 **:达到这个需求的目的需要魔改,可能会导致在未来的版本无法兼容

为了更快地加载图片,直接展示给用户的图片应该尽可能地压缩体积,但在 element-ui,src 需要在 previewSrcList 内才会寻找该图,所以默认的版本必须保持两者一致

1
2
3
4
5
6
7
<el-image
src="small1.png"
:preview-src-list="[
'large1.png',
'large2.png',
]"
></el-image>

比如上面这种~~奇葩~~需求,虽然可以抽出 preview-src-list 单独扔到 <image-viewer> 里面,但不如直接改源码快捷:

  • packages/image/src/main.vue 的 props 添加

    1
    2
    3
    4
    previewSrcListOrder: { // 这个名字随便取,只要用的时候记得是啥就行 
    type: Number,
    default: 0
    }
  • 修改上述文件的计算属性 imageIndex ()

    1
    2
    3
    imageIndex () {
    return this.previewSrcListOrder > 0 ? this.previewSrcListOrder : (this.previewSrcList.indexOf (this.src) > 0 ? this.previewSrcList.indexOf (this.src) : 0);
    }

调用的时候加上就好

1
2
3
4
5
6
7
8
<el-image
src="small1.png"
:preview-src-list="[
'large1.png',
'large2.png',
]"
:preview-src-list-order="1"
></el-image>

不可 npm 加 git 直接用

** 注 **:这个 Q&A 说了

1
npm install ElemeFE/element

然后呢?然后你还要老老实实去打个包,不然就等着找不到 lib 文件夹吧

1
npm run dist

进度条 (progress) 的 format

为了处理网页的投票结果,我选择了线性进度条来比较直观地表示,然而在线性进度条里面,有一个 format 属性可以指定进度条文字内容,文档里面 ** 语焉不详 ** 地 提了一下

Progress 组件设置 percentage 属性即可,表示进度条对应的百分比,必填,必须在 0-100。** 通过 format 属性来指定进度条文字内容 **。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<el-progress :percentage="50"></el-progress>
<el-progress :percentage="100" :format="format"></el-progress>
<el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="100" status="warning"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress>

<script>
export default {
methods: {
format (percentage) {
return percentage === 100 ? ' 满 ' : `${percentage}%`;
}
}
};
</script>

原谅我水平不高,没怎么看明白,于是我又翻到底下的那堆参数说明,嗯,根 本 没 提 !于是我干脆试试再说,就塞了个变量进去…… 喜闻乐见地无效了

1
<el-progress :percentage="..." :format="value"></el-progress>

这是一张图

于是我又去翻 issue,在 一条关于不兼容更新的 issue 里面的回复发现

1
2
3
4
5
6
7
content () {
if (typeof this.format === 'function') {
return this.format (this.percentage) || '';
} else {
return `${this.percentage}%`;
}
}

好吧,改了改变成

1
<el-progress :percentage="..." :format="()=>value"></el-progress>

问题就解决了。

回到顶部 (Backtop)

打开文档,看到~~言简意赅~~啥都没写的页面,我甚是欣喜,以为自己终于可以优雅地处理这个组件了,几分钟后现实告诉我事情并没那么简单。

文档的示例是这样的:

1
2
3
4
<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>

只有一个 target,那看起来挺轻松的,再看看下面:

参数 说明 类型 可选值 默认值
target 触发滚动的对象 string

?

很多人说不知道 .page-component__scroll.el-scrollbar__wrap 哪来的,我补张截图就易懂了

where is the

翻 issue,发现大家都是一头雾水,然后翻网上的其他踩坑人都是在搞固定高度的页面,可是我不知道我的页面的高度啊,这就很难办了。
在我绝望的时候,翻到一条回复(一时没找到来源,下次补上),提到可以自定义样式

1
2
3
4
5
6
7
8
#app {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
}

改完确实能用了,不过侧面一直保留了滚动条,在不需要滚动条的页面就会非常丑,于是我翻了 MDN,经过一番修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<div id="app" class="el-top">
...
<el-backtop target="#app"></el-backtop>
</div>
</template>

<style scoped>
.el-top {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
}
</style>

这样用是能用了,也好看了,然后你就可以惊喜地发现 window.scrollTo () 不能用了,在这里我封装了一个函数

1
2
3
4
5
6
scrollToTop: function (top = 0) {
document.getElementById ("app").scrollTo ({
top: top,
behavior: "smooth"
});
},

需要的时候调用即可。

~~ 在群里闹了半天以后~~群友给出了更好的方法,此时可以使用 window.scrollTo ()

1
2
3
4
5
6
7
<template>
<div id="app">
<div style="position: absolute"></div>
<el-backtop></el-backtop>
...
</div>
</template>

 评论

 无法加载Disqus评论系统,请确保您的网络能够正常访问。

Copyright © 2018 - 2020 バンカ の メモ帳

本站使用 Material X 作为主题 。