<!--
|
* @Author: your name
|
* @Date: 2019-10-21 15:40:58
|
* @LastEditTime: 2019-11-22 17:28:21
|
* @LastEditors: Please set LastEditors
|
* @Description: In User Settings Edit
|
* @FilePath: \cts-web\src\views\area\projectManagement\details\components\DetailsInput.vue
|
-->
|
<template>
|
<el-col :span="8" v-if="config.visible">
|
<el-form-item :label="config.filedDescription + ':'">
|
<el-tooltip v-if="showTooltip" class="item" effect="dark" :content="svalue" placement="top-start">
|
<!-- <el-input v-model="svalue" readonly="readonly"></el-input> -->
|
<p class="content">{{svalue === '' ? '--' : svalue}}</p>
|
</el-tooltip>
|
<!-- <el-input v-if="!showTooltip" v-model="svalue" readonly="readonly"></el-input> -->
|
<p class="content" v-if="!showTooltip">{{svalue === '' ? '--' : svalue}}</p>
|
</el-form-item>
|
</el-col>
|
</template>
|
|
<script>
|
export default {
|
props: ['config'],
|
data: function() {
|
return {
|
showTooltip: false
|
}
|
},
|
computed: {
|
svalue() {
|
if (this._.isEmpty(this.config.codeNo)) {
|
this.showTooltip = Boolean(this.config.value.length > 14)
|
return this.config.value
|
} else {
|
this.showTooltip = Boolean(this.config.valueDesc.length > 14)
|
return this.config.valueDesc
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="stylus" scoped>
|
>>> .el-form-item
|
height 48px
|
margin-bottom 0px
|
.content
|
// max-width 220px
|
// max-height 30px
|
display -webkit-box
|
-webkit-line-clamp 2
|
text-overflow ellipsis
|
overflow hidden
|
word-wrap break-word
|
line-height 16px
|
-webkit-box-orient vertical
|
</style>
|
