Vue自定义Tag标签
1、需求:项目中有好几处用到标签组,有单行、多行、单行显示不下省略(鼠标放上去提示)等等需求,为了方便使用提取为组件。单行样式如下:2、在项目的components文件下新建文件夹
·
1、需求:项目中有好几处用到标签组,有单行、多行、单行显示不下省略(鼠标放上去提示)等等需求,为了方便使用提取为组件。
2、在项目的components文件下新建文件夹TagList,文件下三个文件(index.vue、tag-atom.less、TagEllipsis.vue)。
①index.vue对应的代码:
<template>
<div
ref="tagListRef"
class="tag-list row-main"
:class="{ 'no-wrap': !isMulLines }"
:style="styleByLines()"
>
<!-- 最多展示maxLength -->
<tag-ellipsis
v-for="(tag, idx) in tagList.slice(0, maxCount)"
:key="idx"
:text="tagProps.text && tagProps.text(tag)"
:num="tagProps.num && tagProps.num(tag)"
:numStyle="tagProps.numStyle && tagProps.numStyle(tag)"
:tagStyle="tagProps.tagStyle && tagProps.tagStyle(tag)"
@click.native="$emit('tag-click', idx)"
/>
<!-- 多出maxCount个则悬浮显示 -->
<template v-if="tagList.length > maxCount">
<el-tooltip
popper-class="more-tooltip"
enterable
>
<!-- 悬浮content -->
<ul slot="content">
<li
v-for="(tag, idx) in tagList.slice(maxCount)"
:key="idx"
>
<tag-ellipsis
:text="tagProps.text && tagProps.text(tag)"
:num="tagProps.num && tagProps.num(tag)"
:numStyle="tagProps.numStyle && tagProps.numStyle(tag)"
:tagStyle="tagProps.tagStyle && tagProps.tagStyle(tag)"
@click="$emit('tag-click')"
/>
</li>
</ul>
<!-- 本体 显示剩余多出的的个数 -->
<span class="more-hover">
<span class="tag-count">
+
{{ tagList.length - maxCount }}
</span>
</span>
</el-tooltip>
</template>
</div>
</template>
<script>
import TagEllipsis from "./TagEllipsis"
export default {
components: {
TagEllipsis,
},
props: {
tagList: {
type: Array,
default: () => [],
},
tagProps: {
type: Object,
default: () => {},
},
// 响应防抖 默认不防抖 大于0时显示效果不佳
debounce: {
type: Number,
default: 0,
},
// 限制行数
lines: {
type: Number,
default: null,
},
},
data () {
return {
maxCount: Infinity,
}
},
computed: {
isMulLines () {
return this.lines && this.lines >= 2
},
},
created () {
this.$nextTick(() => this.setObserver(true))
},
beforeDestroy () {
this.setObserver(false)
},
methods: {
// # style
styleByLines () {
return this.isMulLines
? // 多行
{
display: "-webkit-box",
overflow: "hidden",
"-webkit-box-orient": "vertical",
"-webkit-line-clamp": this.lines,
"white-space": "break-spaces",
}
: // 单行
{
"white-space": "nowrap",
}
},
// # main
onResize (target, entries) {
// 重置maxCount
this.maxCount = Infinity
this.$forceUpdate()
// 容器 宽度 高度
const wrapperWidth = Math.ceil(entries[0].contentRect.width)
const wrapperHeight = Math.ceil(entries[0].contentRect.height)
// 修正maxCount 使+N出现
this.$nextTick(() => {
const overflowNodeIndex = Array.from(target.childNodes).findIndex(
// 条件为:元素右边距(即元素的左侧偏移+元素的宽)溢出父容器
tagNode =>
tagNode.offsetLeft + tagNode.clientWidth > wrapperWidth ||
tagNode.offsetTop + tagNode.clientHeight > wrapperHeight,
)
if (overflowNodeIndex !== -1) {
this.maxCount = overflowNodeIndex
this.$forceUpdate()
}
})
},
// # utils
debounceFunc (fn, wait) {
var timer = null
return () => {
if (timer !== null) clearTimeout(timer)
timer = setTimeout(fn, wait)
}
},
// # init
setObserver (isAdd) {
// dom
const target = this.$refs.tagListRef
// 定义监听器
const resizeObserver = new ResizeObserver(
!this.debounce
? entries => this.onResize(target, entries)
: entries =>
this.debounceFunc(
() => this.onResize(target, entries),
this.debounce,
)(),
)
// 创建 or 销毁
isAdd ? resizeObserver.observe(target) : resizeObserver.disconnect()
},
},
}
</script>
<style lang="less" scoped>
@import "./tag-atom.less";
</style>
<style lang="less">
@space: 6px;
// 悬浮 内容
body .more-tooltip {
box-shadow: 0 4px 10px 0 rgba(107, 119, 158, 0.3);
border-radius: 2px;
&.el-tooltip__popper.is-light {
width: 200px;
padding: 10px;
background: #ffffff;
}
ul li {
&:not(:last-of-type) {
margin-bottom: @space;
}
.tag {
margin: 0;
border-radius: 2px;
.tag-count {
font-weight: 500;
}
}
}
}
</style>
②tag-atom.less对应的代码:
@space: 6px;
.tag-space {
margin: 0 @space @space 0;
}
.tag-space-no-wrap {
margin-right: @space;
}
// 省略号
.text-ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
// # 单个标签
.tag-ellipsis {
display: inline-block;
height: 22px;
padding: 0 8px;
border-radius: 2px;
line-height: 22px;
background: rgba(19, 19, 20, 0.6);
color: #6b779e;
cursor: pointer;
&--num {
font-weight: 700;
}
}
// # 标签列表
.tag-list.row-main {
position: relative;
min-height: 24px;
margin-right: 12px;
width: 100%;
// height: 100%;
// 多行
.tag-ellipsis {
.tag-space();
}
// 不换行
&.no-wrap {
min-height: 32px;
.tag-ellipsis {
.tag-space-no-wrap();
}
}
}
③TagEllipsis.vue对应的代码:
<template>
<!-- 限制max最大字数时 -->
<span
v-if="max !== false"
class="tag-ellipsis"
:title="text.length > max ? completeStr : ''"
:style="tagStyle"
>
<!-- 单个标签最多max个字 -->
<span>{{
`${text.slice(0, max)}${text.length > max ? "..." : ""}${
hasNumber ? ":" : ""
}`
}}</span>
<span
class="tag-ellipsis--num"
:style="numStyle"
>{{ num }}</span>
</span>
<!-- 无限制时 -->
<span
v-else
class="tag-ellipsis"
:style="tagStyle"
>
{{ completeStr }}
</span>
</template>
<script>
export default {
props: {
text: {
type: [String, Number],
default: "",
},
num: {
type: [String, Number],
default: "",
},
numStyle: {
type: [Object],
default: () => {},
},
tagStyle: {
type: [Object],
default: () => {},
},
max: {
type: [Number, Boolean],
default: 10,
},
primary: {
type: String,
default: "#2080F7",
},
},
computed: {
hasNumber () {
return ![undefined, null, ""].includes(this.num)
},
completeStr () {
return this.text + (this.num ? ":" + this.num : "")
},
},
}
</script>
<style lang="less" scoped>
@import "./tag-atom.less";
</style>
3、在vue文件中适用:
import TagList from "@/components/TagList"
<tag-list
style="min-height: 24px !important;"
:tagList="item.userLabels.split(',')"
:lines="1"
:tagProps="{
text: tag => tag,
tagStyle: () => ({
color: '#FF5959',
background: '#fff2f2',
}),
}"
/>
更多推荐
已为社区贡献4条内容
所有评论(0)