show loading 示例调整

pages/API/show-loading/show-loading.uvue

@@ -6,9 +6,24 @@
 		    <view class="uni-list-cell-db">是否显示透明蒙层-屏蔽点击事件</view>
 		    <switch :checked="maskSelect" @change="maskChange"/>
 		  </view>
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">超长标题</view>
-		    <switch :checked="titleSelect" @change="titleChange"/>
+		  <view class="uni-padding-wrap">
+		    <view class="uni-title uni-common-mt">
+		      <text class="uni-title-text"> 设置标题 </text>
+		    </view>
+		  </view>
+		  <view class="uni-list uni-common-pl">
+		    <radio-group @change="radioChange" class="radio-group">
+		      <radio
+		        class="uni-list-cell uni-list-cell-pd radio"
+		        v-for="(item, index) in items"
+		        :key="item.value"
+		        :class="index < items.length - 1 ? 'uni-list-cell-line' : ''"
+		        :value="item.value"
+		        :checked="index === current"
+		      >
+		        {{ item.name }}
+		      </radio>
+		    </radio-group>
 		  </view>
 		</view>
         <view class="uni-padding-wrap">
@@ -22,33 +37,61 @@
     </view>
 </template>
 <script lang="ts">
+	type ItemType = {
+	  value: string
+	  name: string
+	}
     export default {
         data() {
             return {
                 title: 'loading',
+				items: [
+					{
+					  value: 'null',
+					  name: '无标题',
+					},
+				  {
+				    value: '三秒后自动关闭',
+				    name: '普通标题',
+				  },
+				  {
+				    value: '超长文本内容，测试超出范围-超长文本内容，测试超出范围-三秒后自动关闭',
+				    name: '长标题',
+				  },
+				] as ItemType[],
+				current: 0,
 				maskSelect:false,
-				titleSelect:false
+				titleSelect:"null"
             }
         },
         methods: {
+			
+			radioChange(e: RadioGroupChangeEvent) {
+			  const selected = this.items.find((item): boolean => {
+			    return item.value == e.detail.value
+			  })
+			  if(selected != null){
+				  this.titleSelect = selected!!.value
+			  }
+			},
 			maskChange: function (e : SwitchChangeEvent) {
 				this.maskSelect = e.detail.value
 			},
-			titleChange: function (e : SwitchChangeEvent) {
-				this.titleSelect = e.detail.value
-			},
             showLoading: function() {
 				
-				let titleVal = "三秒后自动关闭"
-				if(this.titleSelect){
-					titleVal = "超长文本内容，测试超出范围-超长文本内容，测试超出范围"
+				console.log(this.titleSelect)
+				if(this.titleSelect == "null"){
+					// 测试空的情况 todo
+					uni.showLoading({
+						title: "",
+						mask:this.maskSelect
+					});
+				}else{
+					uni.showLoading({
+					    title: this.titleSelect,
+						mask:this.maskSelect
+					});
 				}
-                
-				
-				uni.showLoading({
-				    title: titleVal,
-					mask:this.maskSelect
-				});
 
                 // #ifdef MP-ALIPAY
                 this._showTimer && clearTimeout(this._showTimer);