Browse Source
# Conflicts: # README.md # ruoyi-ui/package.json # ruoyi-ui/src/assets/styles/index.scss # ruoyi-ui/src/utils/generator/js.js # ruoyi-ui/src/views/index.vue # ruoyi-ui/vue.config.jsmaster
tony
3 years ago
38 changed files with 459 additions and 288 deletions
|
After Width: | Height: | Size: 137 KiB |
@ -1,68 +1,104 @@ |
|||||
<!-- @author zhengjie --> |
<!-- @author zhengjie --> |
||||
<template> |
<template> |
||||
<div class="icon-body"> |
<div class="icon-body"> |
||||
<el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons"> |
<el-input v-model="name" class="icon-search" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons"> |
||||
<i slot="suffix" class="el-icon-search el-input__icon" /> |
<i slot="suffix" class="el-icon-search el-input__icon" /> |
||||
</el-input> |
</el-input> |
||||
<div class="icon-list"> |
<div class="icon-list"> |
||||
<div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)"> |
<div class="list-container"> |
||||
<svg-icon :icon-class="item" style="height: 30px;width: 16px;" /> |
<div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)"> |
||||
<span>{{ item }}</span> |
<div :class="['icon-item', { active: activeIcon === item }]"> |
||||
</div> |
<svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;"/> |
||||
</div> |
<span>{{ item }}</span> |
||||
</div> |
</div> |
||||
</template> |
</div> |
||||
|
</div> |
||||
<script> |
</div> |
||||
import icons from './requireIcons' |
</div> |
||||
export default { |
</template> |
||||
name: 'IconSelect', |
|
||||
data() { |
<script> |
||||
return { |
import icons from './requireIcons' |
||||
name: '', |
export default { |
||||
iconList: icons |
name: 'IconSelect', |
||||
} |
props: { |
||||
}, |
activeIcon: { |
||||
methods: { |
type: String |
||||
filterIcons() { |
} |
||||
this.iconList = icons |
}, |
||||
if (this.name) { |
data() { |
||||
this.iconList = this.iconList.filter(item => item.includes(this.name)) |
return { |
||||
} |
name: '', |
||||
}, |
iconList: icons |
||||
selectedIcon(name) { |
} |
||||
this.$emit('selected', name) |
}, |
||||
document.body.click() |
methods: { |
||||
}, |
filterIcons() { |
||||
reset() { |
this.iconList = icons |
||||
this.name = '' |
if (this.name) { |
||||
this.iconList = icons |
this.iconList = this.iconList.filter(item => item.includes(this.name)) |
||||
} |
} |
||||
} |
}, |
||||
} |
selectedIcon(name) { |
||||
</script> |
this.$emit('selected', name) |
||||
|
document.body.click() |
||||
<style rel="stylesheet/scss" lang="scss" scoped> |
}, |
||||
.icon-body { |
reset() { |
||||
width: 100%; |
this.name = '' |
||||
padding: 10px; |
this.iconList = icons |
||||
.icon-list { |
} |
||||
height: 200px; |
} |
||||
overflow-y: scroll; |
} |
||||
div { |
</script> |
||||
height: 30px; |
|
||||
line-height: 30px; |
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
margin-bottom: -5px; |
.icon-body { |
||||
cursor: pointer; |
width: 100%; |
||||
width: 33%; |
padding: 10px; |
||||
float: left; |
.icon-search { |
||||
} |
position: relative; |
||||
span { |
margin-bottom: 5px; |
||||
display: inline-block; |
} |
||||
vertical-align: -0.15em; |
.icon-list { |
||||
fill: currentColor; |
height: 200px; |
||||
overflow: hidden; |
overflow: auto; |
||||
} |
.list-container { |
||||
} |
display: flex; |
||||
} |
flex-wrap: wrap; |
||||
</style> |
.icon-item-wrapper { |
||||
|
width: calc(100% / 3); |
||||
|
height: 25px; |
||||
|
line-height: 25px; |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
.icon-item { |
||||
|
display: flex; |
||||
|
max-width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 0 5px; |
||||
|
&:hover { |
||||
|
background: #ececec; |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
.icon { |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
span { |
||||
|
display: inline-block; |
||||
|
vertical-align: -0.15em; |
||||
|
fill: currentColor; |
||||
|
padding-left: 2px; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
.icon-item.active { |
||||
|
background: #ececec; |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|||||
@ -1,94 +1,94 @@ |
|||||
<template> |
<template> |
||||
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll"> |
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll"> |
||||
<slot /> |
<slot /> |
||||
</el-scrollbar> |
</el-scrollbar> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
const tagAndTagSpacing = 4 // tagAndTagSpacing |
const tagAndTagSpacing = 4 // tagAndTagSpacing |
||||
|
|
||||
export default { |
export default { |
||||
name: 'ScrollPane', |
name: 'ScrollPane', |
||||
data() { |
data() { |
||||
return { |
return { |
||||
left: 0 |
left: 0 |
||||
} |
} |
||||
}, |
}, |
||||
computed: { |
computed: { |
||||
scrollWrapper() { |
scrollWrapper() { |
||||
return this.$refs.scrollContainer.$refs.wrap |
return this.$refs.scrollContainer.$refs.wrap |
||||
} |
} |
||||
}, |
}, |
||||
mounted() { |
mounted() { |
||||
this.scrollWrapper.addEventListener('scroll', this.emitScroll, true) |
this.scrollWrapper.addEventListener('scroll', this.emitScroll, true) |
||||
}, |
}, |
||||
beforeDestroy() { |
beforeDestroy() { |
||||
this.scrollWrapper.removeEventListener('scroll', this.emitScroll) |
this.scrollWrapper.removeEventListener('scroll', this.emitScroll) |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
handleScroll(e) { |
handleScroll(e) { |
||||
const eventDelta = e.wheelDelta || -e.deltaY * 40 |
const eventDelta = e.wheelDelta || -e.deltaY * 40 |
||||
const $scrollWrapper = this.scrollWrapper |
const $scrollWrapper = this.scrollWrapper |
||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 |
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 |
||||
}, |
}, |
||||
emitScroll() { |
emitScroll() { |
||||
this.$emit('scroll') |
this.$emit('scroll') |
||||
}, |
}, |
||||
moveToTarget(currentTag) { |
moveToTarget(currentTag) { |
||||
const $container = this.$refs.scrollContainer.$el |
const $container = this.$refs.scrollContainer.$el |
||||
const $containerWidth = $container.offsetWidth |
const $containerWidth = $container.offsetWidth |
||||
const $scrollWrapper = this.scrollWrapper |
const $scrollWrapper = this.scrollWrapper |
||||
const tagList = this.$parent.$refs.tag |
const tagList = this.$parent.$refs.tag |
||||
|
|
||||
let firstTag = null |
let firstTag = null |
||||
let lastTag = null |
let lastTag = null |
||||
|
|
||||
// find first tag and last tag |
// find first tag and last tag |
||||
if (tagList.length > 0) { |
if (tagList.length > 0) { |
||||
firstTag = tagList[0] |
firstTag = tagList[0] |
||||
lastTag = tagList[tagList.length - 1] |
lastTag = tagList[tagList.length - 1] |
||||
} |
} |
||||
|
|
||||
if (firstTag === currentTag) { |
if (firstTag === currentTag) { |
||||
$scrollWrapper.scrollLeft = 0 |
$scrollWrapper.scrollLeft = 0 |
||||
} else if (lastTag === currentTag) { |
} else if (lastTag === currentTag) { |
||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth |
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth |
||||
} else { |
} else { |
||||
// find preTag and nextTag |
// find preTag and nextTag |
||||
const currentIndex = tagList.findIndex(item => item === currentTag) |
const currentIndex = tagList.findIndex(item => item === currentTag) |
||||
const prevTag = tagList[currentIndex - 1] |
const prevTag = tagList[currentIndex - 1] |
||||
const nextTag = tagList[currentIndex + 1] |
const nextTag = tagList[currentIndex + 1] |
||||
|
|
||||
// the tag's offsetLeft after of nextTag |
// the tag's offsetLeft after of nextTag |
||||
const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing |
const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing |
||||
|
|
||||
// the tag's offsetLeft before of prevTag |
// the tag's offsetLeft before of prevTag |
||||
const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing |
const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing |
||||
|
|
||||
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) { |
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) { |
||||
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth |
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth |
||||
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) { |
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) { |
||||
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft |
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.scroll-container { |
.scroll-container { |
||||
white-space: nowrap; |
white-space: nowrap; |
||||
position: relative; |
position: relative; |
||||
overflow: hidden; |
overflow: hidden; |
||||
width: 100%; |
width: 100%; |
||||
::v-deep { |
::v-deep { |
||||
.el-scrollbar__bar { |
.el-scrollbar__bar { |
||||
bottom: 0px; |
bottom: 0px; |
||||
} |
} |
||||
.el-scrollbar__wrap { |
.el-scrollbar__wrap { |
||||
height: 49px; |
height: 49px; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue