flat: 暂存

This commit is contained in:
Apcallover
2024-05-29 10:21:39 +08:00
parent c9167aac36
commit eb96014379

View File

@@ -2,11 +2,13 @@
<div> <div>
<el-tooltip v-if="content.length > length" class="item" effect="dark" placement="top-start"> <el-tooltip v-if="content.length > length" class="item" effect="dark" placement="top-start">
<div slot="content"> <div slot="content">
<div v-for="(item, index) in clipStr(content)" :key="index"><div>{{item}}</div></div> <div v-for="(item, index) in clipStr(content)" :key="index">
<div>{{ item }}</div>
</div> </div>
<span>{{ content.length > length ? `${content.substring(0, this.length)}...` : content}}</span> </div>
<span>{{ content.length > length ? `${content.substring(0, this.length)}...` : content }}</span>
</el-tooltip> </el-tooltip>
<span v-else>{{content}}</span> <span v-else>{{ content }}</span>
</div> </div>
</template> </template>
@@ -14,10 +16,10 @@
export default { export default {
name: "textTooltip", name: "textTooltip",
props: { props: {
length: { default: 50, required: false }, length: {default: 50, required: false},
content: { default: '', required: true }, content: {default: '', required: true},
empty: { default: '', required: false }, empty: {default: '', required: false},
tipWidth: { default: 40, required: false }, tipWidth: {default: 40, required: false},
}, },
watch: { watch: {
content(val) { content(val) {
@@ -27,9 +29,10 @@ export default {
methods: { methods: {
clipStr(str) { clipStr(str) {
const clip = [] const clip = []
if(str && str.length > this.tipWidth) { const tipWidth = Number(this.tipWidth)
for (let i = 0; i < Math.ceil(str.length / this.tipWidth); i++) { if (str && str.length > tipWidth) {
clip.push(str.slice(i * this.tipWidth,i * this.tipWidth + this.tipWidth)) for (let i = 0; i < Math.ceil(str.length / tipWidth); i++) {
clip.push(str.slice(i * tipWidth, (i * tipWidth) + tipWidth))
} }
return clip return clip
} }
@@ -40,7 +43,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.toolTipImg{ .toolTipImg {
margin-bottom: -5px; margin-bottom: -5px;
margin-right: 10px; margin-right: 10px;
} }