Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
U
uview-ui
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
李晖
uview-ui
Commits
9d07eb46
Commit
9d07eb46
authored
Jul 23, 2020
by
wlxuqu
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
新增read-more组件控制字符缩进的text-indent参数
parent
c6f6818d
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
43 additions
and
34 deletions
+43
-34
u-read-more.vue
uview-ui/components/u-read-more/u-read-more.vue
+43
-34
No files found.
uview-ui/components/u-read-more/u-read-more.vue
View file @
9d07eb46
<
template
>
<view
class=
""
>
<view
class=
"u-content"
:class=
"[elId]"
:style=
"
{ height: isLongContent
&&
!showMore ? showHeight + 'rpx' : 'auto' }">
<view
class=
"u-content"
:class=
"[elId]"
:style=
"
{
height: isLongContent
&&
!showMore ? showHeight + 'rpx' : 'auto',
textIndent: this.textIndent
}">
<slot></slot>
</view>
<view
@
tap=
"toggleReadMore"
v-if=
"isLongContent"
class=
"u-showmore-wrap"
:class=
"
{ 'u-show-more': showMore }"
:style="[innerShadowStyle]"
>
<text
class=
"u-readmore-btn"
:style=
"
{
<view
@
tap=
"toggleReadMore"
v-if=
"isLongContent"
class=
"u-content__showmore-wrap"
:class=
"
{ 'u-content__show-more': showMore }"
:style="[innerShadowStyle]">
<text
class=
"u-content__showmore-wrap__readmore-btn"
:style=
"
{
fontSize: fontSize + 'rpx',
color: color
}">
{{
showMore
?
openText
:
closeText
}}
</text>
<u-icon
:color=
"color"
:size=
"fontSize"
class=
"u-icon"
:name=
"showMore ? 'arrow-up' : 'arrow-down'"
></u-icon>
<view
class=
"u-content__showmore-wrap__readmore-btn__icon u-flex"
>
<u-icon
:color=
"color"
:size=
"fontSize"
:name=
"showMore ? 'arrow-up' : 'arrow-down'"
></u-icon>
</view>
</view>
</view>
</
template
>
...
...
@@ -27,6 +31,7 @@
* @property {Boolean} toggle 展开后是否显示收起按钮(默认false)
* @property {String} close-text 关闭时的提示文字(默认“展开阅读全文”)
* @property {String Number} font-size 提示文字的大小,单位rpx(默认28)
* @property {String} text-indent 段落首行缩进的字符个数(默认2em)
* @property {String} open-text 展开时的提示文字(默认“收起”)
* @property {String} color 提示文字的颜色(默认#2979ff)
* @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
...
...
@@ -67,13 +72,18 @@
// 是否显示阴影
shadowStyle
:
{
type
:
Object
,
default
()
{
default
()
{
return
{
backgroundImage
:
"
linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)
"
,
paddingTop
:
"
300rpx
"
,
marginTop
:
"
-300rpx
"
}
}
},
// 段落首行缩进的字符个数
textIndent
:
{
type
:
String
,
default
:
'
2em
'
}
},
watch
:
{
...
...
@@ -87,7 +97,7 @@
},
// 展开后无需阴影,收起时才需要阴影样式
innerShadowStyle
()
{
if
(
this
.
showMore
)
return
{};
if
(
this
.
showMore
)
return
{};
else
return
this
.
shadowStyle
}
},
...
...
@@ -99,7 +109,7 @@
};
},
mounted
()
{
this
.
$nextTick
(
function
(){
this
.
$nextTick
(
function
()
{
this
.
init
();
})
},
...
...
@@ -125,39 +135,38 @@
<
style
lang=
"scss"
scoped
>
@import
"../../libs/css/style.components.scss"
;
.u-content
{
font-size
:
30rpx
;
color
:
$u-content-color
;
line-height
:
1
.8
;
text-align
:
left
;
text-indent
:
2em
;
overflow
:
hidden
;
}
.u-showmore-wrap
{
position
:
relative
;
width
:
100%
;
padding-bottom
:
26rpx
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
}
&
__show-more
{
padding-top
:
0
;
background
:
none
;
margin-top
:
20rpx
;
}
.u-show-more
{
padding-top
:
0
;
background
:
none
;
margin-top
:
20rpx
;
}
&
__showmore-wrap
{
position
:
relative
;
width
:
100%
;
padding-bottom
:
26rpx
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
.u-readmore-btn
{
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
line-height
:
1
;
}
&
__readmore-btn
{
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
line-height
:
1
;
.u-icon
{
margin-left
:
14rpx
;
&
__icon
{
margin-left
:
14rpx
;
}
}
}
}
</
style
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment