更新text示例

pages.json

@@ -25,7 +25,13 @@
       "style": {
         "navigationBarTitleText": "text"
       }
-    },
+    },
+	{
+	  "path": "pages/component/text/text-props",
+	  "style": {
+	    "navigationBarTitleText": "text-props"
+	  }
+	},
     {
       "path": "pages/component/progress/progress",
       "style": {

pages/component/text/text-props.uvue

+<template>
+	<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">截断（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">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>
+	</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: {
+			
+		}
+	}
+</script>
+
+<style>
+	.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

pages/component/text/text.uvue

@@ -7,7 +7,8 @@
             </view>
             <view class="uni-btn-v">
                 <button class="uni-btn" type="primary" :disabled="!canAdd" @click="add">add line</button>
-                <button class="uni-btn" type="warn" :disabled="!canRemove" @click="remove">remove line</button>
+                <button class="uni-btn" type="warn" :disabled="!canRemove" @click="remove">remove line</button>
+				<button class="uni-btn" type="primary" @click="textProps">更多属性示例</button>
             </view>
         </view>
     </view>
@@ -52,7 +53,12 @@
                     this.canAdd = this.extraLine.length < 12;
                     this.canRemove = this.extraLine.length > 0;
                 }
-            }
+            },
+			textProps: function () {
+			    uni.navigateTo({
+			    	url: '/pages/component/text/text-props'
+			    })
+			}
         }
     }
 </script>