SelectZenEmpty 下拉框 支持 最大长度 超出... vue 组件
<template>
<Select v-model="innerValue"
:disabled="disabled"
:clearable='clearable'
@on-change="onChangeHandle">
<Option v-for="item in this.selectList"
:title="item.nameTitle"
:value="item.code"
:key="item.code"> {{ item.nameLimit }}
</Option>
</Select>
</template>
<script>
export default {
name: 'SelectZenEmpty',
components: {},
props: {
disabled: {
type: Boolean,
default: false
},
value: {
type: String,
default: ''
},
clearable: {
type: Boolean,
default: false
}
},
data () {
return {
nameMaxSingleLength: 30,
innerValue: '',
selectList: []
}
},
watch: {
value (val) {
this.innerValue = val
}
},
computed: {},
methods: {
getSingleLength2 (str, length) {
let retLength = length
let len = 0
for (let i = 0; i < str.length; i++) {
const c = str.charAt(i)
if (escape(c).length > 4) {
len += 2
} else if (c !== "\r") {
len++
}
if (len >= length) {
retLength = i + 1
break
}
}
return retLength
},
getSingleLength (str) { // 中文2 英文 数字 1
return str.replace(/[^\\x00-\\xff]/g, "00").length
},
nameByLimit (name) {
if (this.getSingleLength(name) > this.nameMaxSingleLength) {
const singleLength = this.getSingleLength2(name, this.nameMaxSingleLength - 2)
console.info('singleLength', singleLength)
return name.substring(0, singleLength) + '...'
} else {
return name
}
},
nameByTitle (name) {
if (this.getSingleLength(name) > this.nameMaxSingleLength) {
return name
} else {
return ''
}
},
setSelectList (arr) {
if (arr.length > 0) {
this.selectList = arr.map(item => {
return {
...item,
nameTitle: this.nameByTitle(item.name),
nameLimit: this.nameByLimit(item.name)
}
})
} else {
this.selectList = arr
}
console.info('setSelectList this.selectList', this.selectList)
},
getItem (code) {
console.info('getItem code', code)
console.info('selectList', this.selectList)
return this.selectList.filter(item => {
return item.code === code
})[0]
},
onChange (code) { },
onChangeHandle (code) {
console.info('onChangeHandle', code)
// console.info('onChange', this.onChange)
this.$emit('input', code)
this.$emit('getItem', this.getItem(code))
this.onChange(code)
}
},
created () { },
activated () { },
mounted () { },
beforeDestroy () { }
}
</script>
<style>
</style>
---------------------------------------------
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)