Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5942
Star 89
Fork 162
H
hello uni-app x

体验新版 GitCode，发现更多精彩内容 >>

提交 711ac6c4 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

feat(component): text \n

上级 58152aa3
隐藏空白更改
内联 并排
Showing with 120 addition and 98 deletion
pages/component/text/text-props.test.js 0 → 100644
浏览文件 @ 711ac6c4
const PAGE_PATH = '/pages/component/text/text-props'
describe('text-props', () => {
beforeAll(async () => {
const page = await program.navigateTo(PAGE_PATH)
await page.waitFor(1000)
})
it('screenshot', async () => {
const image = await program.screenshot({ fullPage: true })
expect(image).toMatchImageSnapshot()
})
})
pages/component/text/text-props.uvue
浏览文件 @ 711ac6c4
<template>
<scroll-view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">text相关属性示例</text>
</view>
<scroll-view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">text相关属性示例</text>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">根据宽度自动折行</text>
</view>
<view class="text-box">
<text>{{multiLineText}}</text>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">\\n换行</text>
</view>
<view class="text-box">
<text>\n换\n行\n</text>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">根据宽度自动折行</text>
</view>
<view class="text-box">
<text>{{ multiLineText }}</text>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">截断（clip）</text>
</view>
<view class="text-box" style="height: 200rpx;">
<text class="uni-flex-item" style="text-overflow: clip;">{{multiLineText}}</text>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">截断（ellipsis）</text>
</view>
<view class="text-box" style="height: 200rpx;">
<text class="uni-flex-item" style="text-overflow: ellipsis;">{{multiLineText}}</text>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">\\n换行</text>
</view>
<view class="text-box">
<text>\n 换行</text>
<text>\\n 换行</text>
<text>\\\n 换行</text>
<text>\n 换行 \\n 换行 \\\n 换行 \\\\n 换行 \\\\\n 换行</text>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">selectable</text>
</view>
<view class="text-box">
<text :selectable="true">{{singleLineText}}</text>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">截断（clip）</text>
</view>
<view class="text-box" style="height: 200rpx">
<text class="uni-flex-item" style="text-overflow: clip">{{
multiLineText
}}</text>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">space</text>
<text class="uni-subtitle-text">依次为nbsp ensp emsp效果</text>
</view>
<view class="text-box">
<text space="nbsp">{{singleLineText}}</text>
<text space="ensp">{{singleLineText}}</text>
<text space="emsp">{{singleLineText}}</text>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">截断（ellipsis）</text>
</view>
<view class="text-box" style="height: 200rpx">
<text class="uni-flex-item" style="text-overflow: ellipsis">{{
multiLineText
}}</text>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">decode</text>
<text class="uni-subtitle-text">依次为lt gt amp apos nbsp ensp emsp效果</text>
</view>
<view class="text-box">
<text :decode="true">&lt; &gt; &amp; &apos;</text>
<text :decode="true">uni-app&nbsp;x，终极跨平台方案</text>
<text :decode="true">uni-app&ensp;x，终极跨平台方案</text>
<text :decode="true">uni-app&emsp;x，终极跨平台方案</text>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">嵌套</text>
</view>
<view class="text-box">
<text>一级节点黑色
<text style="color: red;">二级节点红色
<text>三级节点不继承二级的颜色</text>
</text>
<text style="font-size: 50px;">二级节点大字体</text>
</text>
</view>
</view>
</scroll-view>
<view class="uni-title">
<text class="uni-subtitle-text">selectable</text>
</view>
<view class="text-box">
<text :selectable="true">{{ singleLineText }}</text>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">space</text>
<text class="uni-subtitle-text">依次为nbsp ensp emsp效果</text>
</view>
<view class="text-box">
<text space="nbsp">{{ singleLineText }}</text>
<text space="ensp">{{ singleLineText }}</text>
<text space="emsp">{{ singleLineText }}</text>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">decode</text>
<text class="uni-subtitle-text"
>依次为lt gt amp apos nbsp ensp emsp效果</text
>
</view>
<view class="text-box">
<text :decode="true">&lt; &gt; &amp; &apos;</text>
<text :decode="true">uni-app&nbsp;x，终极跨平台方案</text>
<text :decode="true">uni-app&ensp;x，终极跨平台方案</text>
<text :decode="true">uni-app&emsp;x，终极跨平台方案</text>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">嵌套</text>
</view>
<view class="text-box">
<text
>一级节点黑色
<text style="color: red"
>二级节点红色
<text>三级节点不继承二级的颜色</text>
</text>
<text style="font-size: 50px">二级节点大字体</text>
</text>
</view>
</view>
</scroll-view>
</template>
<script>
export default {
data() {
return {
title: 'text-props',
multiLineText: 'HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言；HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言',
singleLineText: 'uni-app x，终极跨平台方案'
}
},
methods: {
}
}
export default {
data() {
return {
title: 'text-props',
multiLineText:
'HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言；HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言',
singleLineText: 'uni-app x，终极跨平台方案',
}
},
methods: {},
}
</script>
<style>
.text-box {
margin-bottom: 40rpx;
padding: 40rpx 0;
display: flex;
background-color: #FFFFFF;
justify-content: center;
align-items: center;
}
.text-box {
margin-bottom: 40rpx;
padding: 40rpx 0;
display: flex;
background-color: #ffffff;
justify-content: center;
align-items: center;
}
.text {
font-size: 30rpx;
color: #353535;
line-height: 54rpx;
text-align: center;
}
</style>
\ No newline at end of file
.text {
font-size: 30rpx;
color: #353535;
line-height: 54rpx;
text-align: center;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或