perf: 优化排序显示图标

This commit is contained in:
jmal 2024-05-08 13:08:19 +08:00
parent 20b901142a
commit ad629765d1
5 changed files with 25 additions and 6 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -5,7 +5,7 @@
import { Icon } from 'ant-design-vue' import { Icon } from 'ant-design-vue'
const IconFont = Icon.createFromIconfontCN({ const IconFont = Icon.createFromIconfontCN({
scriptUrl: document.location.protocol + '/resource/font_2024484_7ls286itnz9.js' scriptUrl: document.location.protocol + '/resource/font_2024484_ziwmm4cu4r.js'
}) })
// 把此段代码贴到iconfont项目页面的控制台中, 以获取图标列表 // 把此段代码贴到iconfont项目页面的控制台中, 以获取图标列表

View File

@ -169,9 +169,13 @@
style="height: 40px;" style="height: 40px;"
@command="contextmenuClick" @command="contextmenuClick"
> >
<el-button type="text" class="sort"> <div>
<svg-icon icon-class="sort" /> <el-button type="text" class="sort">
</el-button> <svg-icon v-if="sortable.order === 'descending'" icon-class="sort-amount-down-solid"/>
<svg-icon v-else icon-class="sort-amount-up-alt-solid"/>
<span class="sort-name">{{sortName}}</span>
</el-button>
</div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="orderName"> <el-dropdown-item command="orderName">
<span <span
@ -1161,6 +1165,18 @@ export default {
computed: { computed: {
...mapState(["message"]), ...mapState(["message"]),
...mapGetters(["name"]), ...mapGetters(["name"]),
sortName() {
switch (this.sortable.prop) {
case "name":
return "名称";
case "size":
return "大小";
case "updateDate":
return "日期";
default:
return "名称";
}
},
gridFilename() { gridFilename() {
// 优化文件名,如果文件名过长,则进行截取 // 优化文件名,如果文件名过长,则进行截取
return function(item) { return function(item) {

View File

@ -198,8 +198,11 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
.sort{ .sort{
padding: 5px 10px; padding: 5px 5px;
margin-left: 5px; margin-left: 5px;
.sort-name {
margin-left: -5px;
}
} }
.vmode{ .vmode{
padding: 5px 10px; padding: 5px 10px;