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