You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.1 KiB
59 lines
1.1 KiB
8 months ago
|
<template>
|
||
|
|
<view :style="{ color }">
|
||
|
|
<view
|
||
|
|
style="
|
||
|
|
font-size: 13px;
|
||
|
|
line-height: 160%;
|
||
|
|
position: relative;
|
||
|
|
transform: 0.2s all;
|
||
|
|
color: inherit;
|
||
|
|
"
|
||
|
|
v-if="value.length < splitLength"
|
||
|
|
>
|
||
|
|
{{ value }}
|
||
|
|
</view>
|
||
|
|
<view
|
||
|
|
v-else
|
||
|
|
style="
|
||
|
|
font-size: 13px;
|
||
|
|
line-height: 160%;
|
||
|
|
position: relative;
|
||
|
|
transform: 0.2s all;
|
||
|
|
color: inherit;
|
||
|
|
"
|
||
|
|
@tap="isShowAllText = !isShowAllText"
|
||
|
|
>
|
||
|
|
{{ isShowAllText ? value : `${value.slice(1, splitLength)}...` }}
|
||
|
|
<text style="color: #17c653; padding-left: 4px">
|
||
|
|
{{ isShowAllText ? '收起' : '展开' }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'cs-text-more',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isShowAllText: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
value: {
|
||
|
|
type: String,
|
||
|
|
default: '文本简介'.repeat(20)
|
||
|
|
},
|
||
|
|
color: {
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
splitLength: {
|
||
|
|
type: Number,
|
||
|
|
default: 60
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss"></style>
|