<template>
<el-popover
placement="bottom"
width="300"
trigger="hover"
:content="textInfo"
><!--弹窗内容--><!--这里的info我们不直接使用传值过来的text,我们自己定义一个参数,然后通过init初始化的时候匹配类型计算应该给他的值-->
<el-button slot="reference">{{ textInfo | textFiler }}</el-button><!--按钮内容-->
</el-popover>
</template>
<script>
export default {
name: 'TeamTextAll',
filters: {
/* 控制文本长度的过滤器*/
textFiler(txt) {
if (txt === null || txt.length === 0) {
return 'blank'
}
if (txt.trim().length <= 8) {
return txt
}
return txt.substring(0, 8)
}
},
props: {
// 文本
text: {
type: String,
required: false,
default: 'null'
},
// 长度
size: {
type: Number,
required: false,
default: 8
},
// 类型,可以自己设定,然后通过if进行对应操作
type: {
type: String,
required: false,
default: 'text'
},
// 我这里需要roles所以使用了这个传list专用的
roles: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
return {
name: 'TeamTextAll',
textInfo: ''
}
},
// 生命周期初始化方法
created() {
this.init()
},
methods: {
// 初始化方法,如果是role类型就取名字拼接并设置给文档区,如果是txt类型设置原内容到文档区,稍后简略和全文都会读取文档区内容
init() {
if (this.type === 'role') {
this.textInfo = this.roleNameFilter(this.roles)
}
if (this.type === 'text') {
this.textInfo = this.text
}
},
// 拼接角色用的
roleNameFilter(userRole) {
console.log('1')
let roleText = '|'
console.log('2')
userRole.forEach(role => {
roleText = roleText + role.roleName + '|'
})
console.log('roleText')
console.log(roleText)
return roleText
}
}
}
</script>
<style scoped>
</style>
使用方法调用替代了过滤器
<template>
<el-popover
placement="bottom"
width="300"
trigger="hover"
:content="textInfo"
><!--弹窗内容--><!--这里的info我们不直接使用传值过来的text,我们自己定义一个参数,然后通过init初始化的时候匹配类型计算应该给他的值-->
<!-- <el-button slot="reference">{{ textInfo | textFiler }}</el-button>--><!--按钮内容-->
<el-button slot="reference">{{ textFiler(textInfo) }}</el-button><!--按钮内容-->
</el-popover>
</template>
<script>
export default {
name: 'TeamTextAll',
filters: {
/* 控制文本长度的过滤器*/
textFiler(txt) {
const size = this.size
if (txt === null || txt.length === 0) {
return 'blank'
}
if (txt.trim().length <= size) {
return txt
}
return txt.substring(0, size)
}
},
props: {
// 文本
text: {
type: String,
required: false,
default: 'null'
},
// 长度
size: {
type: Number,
required: false,
default: 8
},
// 类型,可以自己设定,然后通过if进行对应操作
type: {
type: String,
required: false,
default: 'text'
},
// 我这里需要roles所以使用了这个传list专用的
roles: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
return {
name: 'TeamTextAll',
textInfo: ''
}
},
// 生命周期初始化方法
created() {
this.init()
},
methods: {
// 初始化方法,如果是role类型就取名字拼接并设置给文档区,如果是txt类型设置原内容到文档区,稍后简略和全文都会读取文档区内容
init() {
if (this.type === 'role') {
this.textInfo = this.roleNameFilter(this.roles)
}
if (this.type === 'text') {
this.textInfo = this.text
}
},
// 拼接角色用的
roleNameFilter(userRole) {
let roleText = '|'
userRole.forEach(role => {
roleText = roleText + role.roleName + '|'
})
console.log(this.size)
return roleText
},
/* 控制文本长度的过滤器*/
textFiler(txt) {
const size = this.size
if (txt === null || txt.length === 0) {
return 'blank'
}
if (txt.trim().length <= size) {
return txt
}
return txt.substring(0, size)
}
}
}
</script>
<style scoped>
</style>