revert(component): multiple root node

1f8e77ee · DCloud-WZF · 660d69e0 · 1f8e77ee · 1f8e77ee · 1f8e77ee
6 changed file
--- a/pages/component/button/button.uvue
+++ b/pages/component/button/button.uvue
 <script>
-  import { type ItemType } from '@/components/enum-data/enum-data.vue'
+import { type ItemType } from '@/components/enum-data/enum-data.vue'
-  export default {
+export default {
  data() {
    return {
      plain_boolean: false,
@@ -31,28 +31,64 @@
    radio_change_size_enum(checked : number) { this.size_enum_current = checked },
    radio_change_type_enum(checked : number) { this.type_enum_current = checked }
  }
-  }
+}
 </script>
 <template>
-  <!-- #ifdef APP -->
-  <scroll-view style="flex:1">
-    <!-- #endif -->
  <view class="main">
-      <button :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
+    <button
-        :type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click"
+      :disabled="disabled_boolean"
-        @touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel"
+      :size="size_enum[size_enum_current].name"
-        @touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn"
+      :type="type_enum[type_enum_current].name"
-        :style="default_style ? 'color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19;': ''"
+      :plain="plain_boolean"
-        :hover-class="default_style ? 'is-hover': 'button-hover'">{{text}}</button>
+      @click="button_click"
+      @touchstart="button_touchstart"
+      @touchmove="button_touchmove"
+      @touchcancel="button_touchcancel"
+      @touchend="button_touchend"
+      @tap="button_tap"
+      @longpress="button_longpress"
+      class="btn"
+      :style="
+        default_style
+          ? 'color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19;'
+          : ''
+      "
+      :hover-class="default_style ? 'is-hover' : 'button-hover'"
+    >
+      {{ text }}
+    </button>
  </view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
    <view class="content">
-      <boolean-data :defaultValue="false" title="按钮是否镂空，背景色透明" @change="change_plain_boolean"></boolean-data>
+      <boolean-data
-      <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
+        :defaultValue="false"
-      <boolean-data :defaultValue="false" title="修改默认样式和点击效果(高优先)" @change="change_default_style"></boolean-data>
+        title="按钮是否镂空，背景色透明"
-      <enum-data :items="size_enum" title="按钮的大小" @change="radio_change_size_enum"></enum-data>
+        @change="change_plain_boolean"
-      <enum-data :items="type_enum" title="按钮的类型" @change="radio_change_type_enum"></enum-data>
+      ></boolean-data>
+      <boolean-data
+        :defaultValue="false"
+        title="是否禁用"
+        @change="change_disabled_boolean"
+      ></boolean-data>
+      <boolean-data
+        :defaultValue="false"
+        title="修改默认样式和点击效果(高优先)"
+        @change="change_default_style"
+      ></boolean-data>
+      <enum-data
+        :items="size_enum"
+        title="按钮的大小"
+        @change="radio_change_size_enum"
+      ></enum-data>
+      <enum-data
+        :items="type_enum"
+        title="按钮的类型"
+        @change="radio_change_type_enum"
+      ></enum-data>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
@@ -60,23 +96,23 @@
 </template>
 <style>
-  .main {
+.main {
  max-height: 500rpx;
  padding: 10rpx 0;
-    border-bottom: 1px solid rgba(0, 0, 0, .06);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-direction: row;
  justify-content: center;
-  }
+}
-  .main .list-item {
+.main .list-item {
  width: 100%;
  height: 200rpx;
  border: 1px solid #666;
-  }
+}
-  .is-hover {
+.is-hover {
  color: rgba(255, 255, 255, 0.6);
  background-color: #179b16;
  border-color: #179b16;
-  }
+}
 </style>
--- a/pages/component/checkbox/checkbox.uvue
+++ b/pages/component/checkbox/checkbox.uvue
 <script>
-	type ItemType = {
+type ItemType = {
 	value : string
 	name : string
 	checked : boolean
-	}
+}
-	export default {
+export default {
 	data() {
 		return {
 			items: [
@@ -89,37 +89,82 @@
 		confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
 		confirm_iconColor_input(value : string) { this.iconColor_input = value }
 	}
-	}
+}
 </script>
 <template>
-	<!-- #ifdef APP -->
-	<scroll-view style="flex:1">
-		<!-- #endif -->
  <view class="main">
-		<checkbox :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input"
+    <checkbox
-			:backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
+      :disabled="disabled_boolean"
-			:activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
+      :checked="checked_boolean"
-			:iconColor="iconColor_input" @click="checkbox_click" @touchstart="checkbox_touchstart"
+      :color="color_input"
-			@touchmove="checkbox_touchmove" @touchcancel="checkbox_touchcancel" @touchend="checkbox_touchend"
+      :backgroundColor="backgroundColor_input"
-			@tap="checkbox_tap" @longpress="checkbox_longpress"><text>uni-app-x</text></checkbox>
+      :borderColor="borderColor_input"
+      :activeBackgroundColor="activeBackgroundColor_input"
+      :activeBorderColor="activeBorderColor_input"
+      :iconColor="iconColor_input"
+      @click="checkbox_click"
+      @touchstart="checkbox_touchstart"
+      @touchmove="checkbox_touchmove"
+      @touchcancel="checkbox_touchcancel"
+      @touchend="checkbox_touchend"
+      @tap="checkbox_tap"
+      @longpress="checkbox_longpress"
+      ><text>uni-app-x</text></checkbox
+    >
  </view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
    <view class="content nvue">
      <page-head title="组件属性"></page-head>
-			<boolean-data :defaultValue="false" title="当前是否选中，可用来设置默认选中" @change="change_checked_boolean"></boolean-data>
+      <boolean-data
-			<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
+        :defaultValue="false"
-			<input-data defaultValue="#007aff" title="checkbox的颜色" type="text" @confirm="confirm_color_input"></input-data>
+        title="当前是否选中，可用来设置默认选中"
-			<input-data defaultValue="#ffffff" title="checkbox默认的背景颜色" type="text"
+        @change="change_checked_boolean"
-				@confirm="confirm_backgroundColor_input"></input-data>
+      ></boolean-data>
-			<input-data defaultValue="#d1d1d1" title="checkbox默认的边框颜色" type="text"
+      <boolean-data
-				@confirm="confirm_borderColor_input"></input-data>
+        :defaultValue="false"
-			<input-data defaultValue="#ffffff" title="checkbox选中时的背景颜色" type="text"
+        title="是否禁用"
-				@confirm="confirm_activeBackgroundColor_input"></input-data>
+        @change="change_disabled_boolean"
-			<input-data defaultValue="#d1d1d1" title="checkbox选中时的边框颜色" type="text"
+      ></boolean-data>
-				@confirm="confirm_activeBorderColor_input"></input-data>
+      <input-data
-			<input-data defaultValue="#007aff" title="checkbox的图标颜色，优先级大于color属性" type="text"
+        defaultValue="#007aff"
-				@confirm="confirm_iconColor_input"></input-data>
+        title="checkbox的颜色"
+        type="text"
+        @confirm="confirm_color_input"
+      ></input-data>
+      <input-data
+        defaultValue="#ffffff"
+        title="checkbox默认的背景颜色"
+        type="text"
+        @confirm="confirm_backgroundColor_input"
+      ></input-data>
+      <input-data
+        defaultValue="#d1d1d1"
+        title="checkbox默认的边框颜色"
+        type="text"
+        @confirm="confirm_borderColor_input"
+      ></input-data>
+      <input-data
+        defaultValue="#ffffff"
+        title="checkbox选中时的背景颜色"
+        type="text"
+        @confirm="confirm_activeBackgroundColor_input"
+      ></input-data>
+      <input-data
+        defaultValue="#d1d1d1"
+        title="checkbox选中时的边框颜色"
+        type="text"
+        @confirm="confirm_activeBorderColor_input"
+      ></input-data>
+      <input-data
+        defaultValue="#007aff"
+        title="checkbox的图标颜色，优先级大于color属性"
+        type="text"
+        @confirm="confirm_iconColor_input"
+      ></input-data>
    </view>
    <view>
@@ -129,12 +174,33 @@
          <text class="uni-title-text"> 默认样式 </text>
        </view>
        <view>
-					<checkbox-group class="uni-flex uni-row checkbox-group" @change="testChange" style="flex-wrap: wrap">
+          <checkbox-group
-						<checkbox value="cb" :checked="checked" :color="color" style="margin-right: 30rpx" class="checkbox cb">选中
+            class="uni-flex uni-row checkbox-group"
+            @change="testChange"
+            style="flex-wrap: wrap"
+          >
+            <checkbox
+              value="cb"
+              :checked="checked"
+              :color="color"
+              style="margin-right: 30rpx"
+              class="checkbox cb"
+              >选中
            </checkbox>
-						<checkbox value="cb1" style="margin-right: 30rpx" class="checkbox cb1">{{ text }}</checkbox>
+            <checkbox
-						<checkbox value="cb2" :disabled="disabled" class="checkbox cb2">禁用</checkbox>
+              value="cb1"
-						<checkbox value="cb3" style="margin-top: 20rpx" class="checkbox cb3">
+              style="margin-right: 30rpx"
+              class="checkbox cb1"
+              >{{ text }}</checkbox
+            >
+            <checkbox value="cb2" :disabled="disabled" class="checkbox cb2"
+              >禁用</checkbox
+            >
+            <checkbox
+              value="cb3"
+              style="margin-top: 20rpx"
+              class="checkbox cb3"
+            >
              {{ wrapText }}
            </checkbox>
          </checkbox-group>
@@ -144,10 +210,21 @@
        </view>
        <view>
          <checkbox-group class="uni-flex uni-row checkbox-group">
-						<checkbox value="cb1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 30rpx"
+            <checkbox
-							class="checkbox">选中
+              value="cb1"
+              :checked="true"
+              color="#FFCC33"
+              style="transform: scale(0.7); margin-right: 30rpx"
+              class="checkbox"
+              >选中
            </checkbox>
-						<checkbox value="cb" color="#FFCC33" style="transform: scale(0.7)" class="checkbox">未选中</checkbox>
+            <checkbox
+              value="cb"
+              color="#FFCC33"
+              style="transform: scale(0.7)"
+              class="checkbox"
+              >未选中</checkbox
+            >
          </checkbox-group>
        </view>
      </view>
@@ -159,8 +236,14 @@
      </view>
      <view class="uni-list uni-common-pl">
        <checkbox-group @change="checkboxChange" class="checkbox-group">
-					<checkbox class="uni-list-cell uni-list-cell-pd checkbox" v-for="(item, index) in items" :key="item.value"
+          <checkbox
-						:value="item.value" :checked="item.checked" :class="index < items.length - 1 ? 'uni-list-cell-line' : ''">
+            class="uni-list-cell uni-list-cell-pd checkbox"
+            v-for="(item, index) in items"
+            :key="item.value"
+            :value="item.value"
+            :checked="item.checked"
+            :class="index < items.length - 1 ? 'uni-list-cell-line' : ''"
+          >
            {{ item.name }}
          </checkbox>
        </checkbox-group>
@@ -173,21 +256,21 @@
 </template>
 <style>
-	.main {
+.main {
  max-height: 500rpx;
  padding: 10rpx 0;
-		border-bottom: 1px solid rgba(0, 0, 0, .06);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-direction: row;
  justify-content: center;
-	}
+}
-	.main .list-item {
+.main .list-item {
  width: 100%;
  height: 200rpx;
  border: 1px solid #666;
-	}
+}
-	.uni-list-cell {
+.uni-list-cell {
  justify-content: flex-start;
-	}
+}
 </style>
--- a/pages/component/progress/progress.uvue
+++ b/pages/component/progress/progress.uvue
 <script>
-	import { type ItemType } from '@/components/enum-data/enum-data.vue'
+import { type ItemType } from '@/components/enum-data/enum-data.vue'
-	export default {
+export default {
 	data() {
 		return {
 			title: 'progress',
@@ -48,58 +48,128 @@
 		confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
 		radio_change_active_mode_enum(checked : number) { this.active_mode_enum_current = checked }
 	}
-	}
+}
 </script>
 <template>
-	<!-- #ifdef APP -->
-	<scroll-view style="flex:1">
-		<!-- #endif -->
  <view class="main">
-		<progress :duration="duration_input" :percent="percent_input" :show-info="show_info_boolean"
+    <progress
-			:stroke-width="stroke_width_input" :activeColor="activeColor_input" :backgroundColor="backgroundColor_input"
+      :duration="duration_input"
-			:active="active_boolean" :active-mode="active_mode_enum[active_mode_enum_current].name"
+      :percent="percent_input"
-			@touchstart="progress_touchstart" @touchmove="progress_touchmove" @touchcancel="progress_touchcancel"
+      :show-info="show_info_boolean"
-			@touchend="progress_touchend" @tap="progress_tap" style="width:80%;"><text>uni-app-x</text></progress>
+      :stroke-width="stroke_width_input"
+      :activeColor="activeColor_input"
+      :backgroundColor="backgroundColor_input"
+      :active="active_boolean"
+      :active-mode="active_mode_enum[active_mode_enum_current].name"
+      @touchstart="progress_touchstart"
+      @touchmove="progress_touchmove"
+      @touchcancel="progress_touchcancel"
+      @touchend="progress_touchend"
+      @tap="progress_tap"
+      style="width: 80%"
+    >
+      <text>uni-app-x</text>
+    </progress>
  </view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
    <view class="content nvue">
      <page-head title="组件属性"></page-head>
-			<boolean-data :defaultValue="false" title="进度条从左往右的动画" @change="change_active_boolean"></boolean-data>
+      <boolean-data
-			<boolean-data :defaultValue="false" title="在进度条右侧显示百分比" @change="change_show_info_boolean"></boolean-data>
+        :defaultValue="false"
-			<input-data defaultValue="30" title="进度增加1%所需毫秒数" type="number" @confirm="confirm_duration_input"></input-data>
+        title="进度条从左往右的动画"
-			<input-data defaultValue="0" title="百分比0~100" type="number" @confirm="confirm_percent_input"></input-data>
+        @change="change_active_boolean"
-			<input-data defaultValue="6" title="进度条线的宽度，单位px" type="number"
+      ></boolean-data>
-				@confirm="confirm_stroke_width_input"></input-data>
+      <boolean-data
-			<input-data defaultValue="#09BB07" title="已选择的进度条的颜色" type="text"
+        :defaultValue="false"
-				@confirm="confirm_activeColor_input"></input-data>
+        title="在进度条右侧显示百分比"
-			<input-data defaultValue="#EBEBEB" title="未选择的进度条的颜色" type="text"
+        @change="change_show_info_boolean"
-				@confirm="confirm_backgroundColor_input"></input-data>
+      ></boolean-data>
-			<enum-data :items="active_mode_enum" title="backwards: 动画从头播；forwards：动画从上次结束点接着播"
+      <input-data
-				@change="radio_change_active_mode_enum"></enum-data>
+        defaultValue="30"
+        title="进度增加1%所需毫秒数"
+        type="number"
+        @confirm="confirm_duration_input"
+      ></input-data>
+      <input-data
+        defaultValue="0"
+        title="百分比0~100"
+        type="number"
+        @confirm="confirm_percent_input"
+      ></input-data>
+      <input-data
+        defaultValue="6"
+        title="进度条线的宽度，单位px"
+        type="number"
+        @confirm="confirm_stroke_width_input"
+      ></input-data>
+      <input-data
+        defaultValue="#09BB07"
+        title="已选择的进度条的颜色"
+        type="text"
+        @confirm="confirm_activeColor_input"
+      ></input-data>
+      <input-data
+        defaultValue="#EBEBEB"
+        title="未选择的进度条的颜色"
+        type="text"
+        @confirm="confirm_backgroundColor_input"
+      ></input-data>
+      <enum-data
+        :items="active_mode_enum"
+        title="backwards: 动画从头播；forwards：动画从上次结束点接着播"
+        @change="radio_change_active_mode_enum"
+      ></enum-data>
    </view>
    <view>
      <page-head title="默认及使用"></page-head>
      <view class="uni-padding-wrap uni-common-mt">
        <view class="progress-box">
-					<progress :percent="pgList[0]" :active="true" :border-radius="borderRadius" :show-info="showInfo"
+          <progress
-						:font-size="fontSize" :stroke-width="strokeWidth" :background-color="backgroundColor" class="progress p"
+            :percent="pgList[0]"
-						@activeend="activeend" />
+            :active="true"
+            :border-radius="borderRadius"
+            :show-info="showInfo"
+            :font-size="fontSize"
+            :stroke-width="strokeWidth"
+            :background-color="backgroundColor"
+            class="progress p"
+            @activeend="activeend"
+          />
        </view>
        <view class="progress-box">
-					<progress :percent="pgList[1]" :stroke-width="3" class="progress p1" />
+          <progress
+            :percent="pgList[1]"
+            :stroke-width="3"
+            class="progress p1"
+          />
        </view>
        <view class="progress-box">
-					<progress :percent="pgList[2]" :stroke-width="3" class="progress p2" />
+          <progress
+            :percent="pgList[2]"
+            :stroke-width="3"
+            class="progress p2"
+          />
        </view>
        <view class="progress-box">
-					<progress :percent="pgList[3]" activeColor="#10AEFF" :stroke-width="3" class="progress p3" />
+          <progress
+            :percent="pgList[3]"
+            activeColor="#10AEFF"
+            :stroke-width="3"
+            class="progress p3"
+          />
        </view>
        <view class="progress-control">
-					<button type="primary" @click="setProgress" class="button">设置进度</button>
+          <button type="primary" @click="setProgress" class="button">
-					<button type="warn" @click="clearProgress" class="button">清除进度</button>
+            设置进度
+          </button>
+          <button type="warn" @click="clearProgress" class="button">
+            清除进度
+          </button>
        </view>
      </view>
    </view>
@@ -109,30 +179,30 @@
 </template>
 <style>
-	.main {
+.main {
  max-height: 500rpx;
  padding: 10rpx 0;
-		border-bottom: 1px solid rgba(0, 0, 0, .06);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-direction: row;
  justify-content: center;
-	}
+}
-	.main .list-item {
+.main .list-item {
  width: 100%;
  height: 200rpx;
  border: 1px solid #666;
-	}
+}
-	.progress-box {
+.progress-box {
  height: 50rpx;
  margin-bottom: 60rpx;
-	}
+}
-	.progress-cancel {
+.progress-cancel {
  margin-left: 40rpx;
-	}
+}
-	.button {
+.button {
  margin-top: 20rpx;
-	}
+}
 </style>
--- a/pages/component/radio/radio.uvue
+++ b/pages/component/radio/radio.uvue
 <script>
-	type ItemType = {
+type ItemType = {
 	value : string
 	name : string
-	}
+}
-	export default {
+export default {
 	data() {
 		return {
 			items: [
@@ -81,37 +81,83 @@
 		confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
 		confirm_iconColor_input(value : string) { this.iconColor_input = value }
 	}
-	}
+}
 </script>
 <template>
-	<!-- #ifdef APP -->
-	<scroll-view style="flex:1">
-		<!-- #endif -->
  <view class="main">
-		<radio :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input"
+    <radio
-			:backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
+      :disabled="disabled_boolean"
-			:activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
+      :checked="checked_boolean"
-			:iconColor="iconColor_input" @click="radio_click" @touchstart="radio_touchstart" @touchmove="radio_touchmove"
+      :color="color_input"
-			@touchcancel="radio_touchcancel" @touchend="radio_touchend" @tap="radio_tap" @longpress="radio_longpress">
+      :backgroundColor="backgroundColor_input"
+      :borderColor="borderColor_input"
+      :activeBackgroundColor="activeBackgroundColor_input"
+      :activeBorderColor="activeBorderColor_input"
+      :iconColor="iconColor_input"
+      @click="radio_click"
+      @touchstart="radio_touchstart"
+      @touchmove="radio_touchmove"
+      @touchcancel="radio_touchcancel"
+      @touchend="radio_touchend"
+      @tap="radio_tap"
+      @longpress="radio_longpress"
+    >
      <text>uni-app-x</text>
    </radio>
  </view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
    <view class="content nvue">
      <page-head title="组件属性"></page-head>
-			<boolean-data :defaultValue="false" title="<radio/> 当前是否选中" @change="change_checked_boolean"></boolean-data>
+      <boolean-data
-			<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
+        :defaultValue="false"
-			<input-data defaultValue="#007AFF" title="radio的颜色" type="text" @confirm="confirm_color_input"></input-data>
+        title="<radio/> 当前是否选中"
-			<input-data defaultValue="#ffffff" title="radio默认的背景颜色" type="text"
+        @change="change_checked_boolean"
-				@confirm="confirm_backgroundColor_input"></input-data>
+      ></boolean-data>
-			<input-data defaultValue="#d1d1d1" title="radio默认的边框颜色" type="text"
+      <boolean-data
-				@confirm="confirm_borderColor_input"></input-data>
+        :defaultValue="false"
-			<input-data defaultValue="#007AFF" title="radio选中时的背景颜色，优先级大于color属性" type="text"
+        title="是否禁用"
-				@confirm="confirm_activeBackgroundColor_input"></input-data>
+        @change="change_disabled_boolean"
-			<input-data defaultValue="" title="radio选中时的边框颜色" type="text"
+      ></boolean-data>
-				@confirm="confirm_activeBorderColor_input"></input-data>
+      <input-data
-			<input-data defaultValue="#ffffff" title="radio的图标颜色" type="text" @confirm="confirm_iconColor_input"></input-data>
+        defaultValue="#007AFF"
+        title="radio的颜色"
+        type="text"
+        @confirm="confirm_color_input"
+      ></input-data>
+      <input-data
+        defaultValue="#ffffff"
+        title="radio默认的背景颜色"
+        type="text"
+        @confirm="confirm_backgroundColor_input"
+      ></input-data>
+      <input-data
+        defaultValue="#d1d1d1"
+        title="radio默认的边框颜色"
+        type="text"
+        @confirm="confirm_borderColor_input"
+      ></input-data>
+      <input-data
+        defaultValue="#007AFF"
+        title="radio选中时的背景颜色，优先级大于color属性"
+        type="text"
+        @confirm="confirm_activeBackgroundColor_input"
+      ></input-data>
+      <input-data
+        defaultValue=""
+        title="radio选中时的边框颜色"
+        type="text"
+        @confirm="confirm_activeBorderColor_input"
+      ></input-data>
+      <input-data
+        defaultValue="#ffffff"
+        title="radio的图标颜色"
+        type="text"
+        @confirm="confirm_iconColor_input"
+      ></input-data>
    </view>
    <view>
@@ -120,8 +166,18 @@
        <view class="uni-title uni-common-mt">
          <text class="uni-title-text"> 默认样式 </text>
        </view>
-				<radio-group class="uni-flex uni-row radio-group" @change="testChange" style="flex-wrap: wrap">
+        <radio-group
-					<radio value="r" :checked="checked" :color="color" style="margin-right: 30rpx" class="radio r">选中
+          class="uni-flex uni-row radio-group"
+          @change="testChange"
+          style="flex-wrap: wrap"
+        >
+          <radio
+            value="r"
+            :checked="checked"
+            :color="color"
+            style="margin-right: 30rpx"
+            class="radio r"
+            >选中
          </radio>
          <radio value="r1" style="margin-right: 30rpx" class="radio r1">{{
            text
@@ -138,10 +194,21 @@
          <text class="uni-title-text"> 不同颜色和尺寸的radio </text>
        </view>
        <radio-group class="uni-flex uni-row radio-group">
-					<radio value="r1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 30rpx"
+          <radio
-						class="radio">选中
+            value="r1"
+            :checked="true"
+            color="#FFCC33"
+            style="transform: scale(0.7); margin-right: 30rpx"
+            class="radio"
+            >选中
          </radio>
-					<radio value="r2" color="#FFCC33" style="transform: scale(0.7)" class="radio">未选中</radio>
+          <radio
+            value="r2"
+            color="#FFCC33"
+            style="transform: scale(0.7)"
+            class="radio"
+            >未选中</radio
+          >
        </radio-group>
      </view>
@@ -152,9 +219,14 @@
      </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"
+          <radio
-						:class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value"
+            class="uni-list-cell uni-list-cell-pd radio"
-						:checked="index === current">
+            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>
@@ -166,21 +238,21 @@
 </template>
 <style>
-	.main {
+.main {
  max-height: 500rpx;
  padding: 10rpx 0;
-		border-bottom: 1px solid rgba(0, 0, 0, .06);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-direction: row;
  justify-content: center;
-	}
+}
-	.main .list-item {
+.main .list-item {
  width: 100%;
  height: 200rpx;
  border: 1px solid #666;
-	}
+}
-	.uni-list-cell {
+.uni-list-cell {
  justify-content: flex-start;
-	}
+}
 </style>
--- a/pages/component/slider/slider.uvue
+++ b/pages/component/slider/slider.uvue
 <script>
-  export default {
+export default {
  data() {
    return {
      sliderValue: 50,
      sliderBlockSize: 20,
-        sliderBackgroundColor: '#000000',
+      sliderBackgroundColor: "#000000",
-        sliderActiveColor: '#FFCC33',
+      sliderActiveColor: "#FFCC33",
-        sliderBlockColor: '#8A6DE9',
+      sliderBlockColor: "#8A6DE9",
      // 组件属性 autotest
      show_value_boolean: false,
      disabled_boolean: false,
@@ -17,65 +17,166 @@
      activeColor_input: "#007aff",
      backgroundColor_input: "#e9e9e9",
      block_size_input: 28,
-        block_color_input: "#ffffff"
+      block_color_input: "#ffffff",
-      }
+    };
  },
  methods: {
-      sliderChange(e : SliderChangeEvent) {
+    sliderChange(e: SliderChangeEvent) {
-        console.log('value 发生变化：' + e.detail.value)
+      console.log("value 发生变化：" + e.detail.value);
-      },
+    },
-      slider_click() { console.log("组件被点击时触发") },
+    slider_click() {
-      slider_touchstart() { console.log("手指触摸动作开始") },
+      console.log("组件被点击时触发");
-      slider_touchmove() { console.log("手指触摸后移动") },
+    },
-      slider_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
+    slider_touchstart() {
-      slider_touchend() { console.log("手指触摸动作结束") },
+      console.log("手指触摸动作开始");
-      slider_tap() { console.log("手指触摸后马上离开") },
+    },
-      slider_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
+    slider_touchmove() {
-      slider_change() { console.log("完成一次拖动后触发的事件，event.detail = {value: value}") },
+      console.log("手指触摸后移动");
-      slider_changing() { console.log("拖动过程中触发的事件，event.detail = {value: value}") },
+    },
-      change_show_value_boolean(checked : boolean) { this.show_value_boolean = checked },
+    slider_touchcancel() {
-      change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
+      console.log("手指触摸动作被打断，如来电提醒，弹窗");
-      confirm_min_input(value : number) { this.min_input = value },
+    },
-      confirm_max_input(value : number) { this.max_input = value },
+    slider_touchend() {
-      confirm_step_input(value : number) { this.step_input = value },
+      console.log("手指触摸动作结束");
-      confirm_value_input(value : number) { this.value_input = value },
+    },
-      confirm_activeColor_input(value : string) { this.activeColor_input = value },
+    slider_tap() {
-      confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
+      console.log("手指触摸后马上离开");
-      confirm_block_size_input(value : number) { this.block_size_input = value },
+    },
-      confirm_block_color_input(value : string) { this.block_color_input = value }
+    slider_longpress() {
-    }
+      console.log(
-  }
+        "如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。"
+      );
+    },
+    slider_change() {
+      console.log("完成一次拖动后触发的事件，event.detail = {value: value}");
+    },
+    slider_changing() {
+      console.log("拖动过程中触发的事件，event.detail = {value: value}");
+    },
+    change_show_value_boolean(checked: boolean) {
+      this.show_value_boolean = checked;
+    },
+    change_disabled_boolean(checked: boolean) {
+      this.disabled_boolean = checked;
+    },
+    confirm_min_input(value: number) {
+      this.min_input = value;
+    },
+    confirm_max_input(value: number) {
+      this.max_input = value;
+    },
+    confirm_step_input(value: number) {
+      this.step_input = value;
+    },
+    confirm_value_input(value: number) {
+      this.value_input = value;
+    },
+    confirm_activeColor_input(value: string) {
+      this.activeColor_input = value;
+    },
+    confirm_backgroundColor_input(value: string) {
+      this.backgroundColor_input = value;
+    },
+    confirm_block_size_input(value: number) {
+      this.block_size_input = value;
+    },
+    confirm_block_color_input(value: string) {
+      this.block_color_input = value;
+    },
+  },
+};
 </script>
 <template>
-  <!-- #ifdef APP -->
-  <scroll-view style="flex:1">
-    <!-- #endif -->
  <view class="main">
-      <slider :disabled="disabled_boolean" :min="min_input" :max="max_input" :step="step_input" :value="value_input"
+    <slider
-        :activeColor="activeColor_input" :backgroundColor="backgroundColor_input" :block-size="block_size_input"
+      :disabled="disabled_boolean"
-        :block-color="block_color_input" :show-value="show_value_boolean" @click="slider_click"
+      :min="min_input"
-        @touchstart="slider_touchstart" @touchmove="slider_touchmove" @touchcancel="slider_touchcancel"
+      :max="max_input"
-        @touchend="slider_touchend" @tap="slider_tap" @longpress="slider_longpress" @change="slider_change"
+      :step="step_input"
-        @changing="slider_changing" style="width: 90%;"><text>uni-app-x</text></slider>
+      :value="value_input"
+      :activeColor="activeColor_input"
+      :backgroundColor="backgroundColor_input"
+      :block-size="block_size_input"
+      :block-color="block_color_input"
+      :show-value="show_value_boolean"
+      @click="slider_click"
+      @touchstart="slider_touchstart"
+      @touchmove="slider_touchmove"
+      @touchcancel="slider_touchcancel"
+      @touchend="slider_touchend"
+      @tap="slider_tap"
+      @longpress="slider_longpress"
+      @change="slider_change"
+      @changing="slider_changing"
+      style="width: 90%"
+      ><text>uni-app-x</text></slider
+    >
  </view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
    <view class="content nvue">
      <page-head title="组件属性"></page-head>
-      <boolean-data :defaultValue="false" title="是否显示当前 value" @change="change_show_value_boolean"></boolean-data>
+      <boolean-data
-      <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
+        :defaultValue="false"
-      <input-data defaultValue="0" title="slider 最小值" type="number" @confirm="confirm_min_input"></input-data>
+        title="是否显示当前 value"
-      <input-data defaultValue="100" title="slider 最大值" type="number" @confirm="confirm_max_input"></input-data>
+        @change="change_show_value_boolean"
-      <input-data defaultValue="1" title="slider 步长，取值必须大于 0，并且可被(max - min)整除" type="number"
+      ></boolean-data>
-        @confirm="confirm_step_input"></input-data>
+      <boolean-data
-      <input-data defaultValue="0" title="radio当前取值" type="number" @confirm="confirm_value_input"></input-data>
+        :defaultValue="false"
-      <input-data defaultValue="#007aff" title="slider 滑块左侧已选择部分的线条颜色" type="text"
+        title="是否禁用"
-        @confirm="confirm_activeColor_input"></input-data>
+        @change="change_disabled_boolean"
-      <input-data defaultValue="#e9e9e9" title="radio背景条的颜色" type="text"
+      ></boolean-data>
-        @confirm="confirm_backgroundColor_input"></input-data>
+      <input-data
-      <input-data defaultValue="28" title="radio滑块的大小，取值范围为 12 - 28" type="number"
+        defaultValue="0"
-        @confirm="confirm_block_size_input"></input-data>
+        title="slider 最小值"
-      <input-data defaultValue="#ffffff" title="滑块颜色" type="text" @confirm="confirm_block_color_input"></input-data>
+        type="number"
+        @confirm="confirm_min_input"
+      ></input-data>
+      <input-data
+        defaultValue="100"
+        title="slider 最大值"
+        type="number"
+        @confirm="confirm_max_input"
+      ></input-data>
+      <input-data
+        defaultValue="1"
+        title="slider 步长，取值必须大于 0，并且可被(max - min)整除"
+        type="number"
+        @confirm="confirm_step_input"
+      ></input-data>
+      <input-data
+        defaultValue="0"
+        title="radio当前取值"
+        type="number"
+        @confirm="confirm_value_input"
+      ></input-data>
+      <input-data
+        defaultValue="#007aff"
+        title="slider 滑块左侧已选择部分的线条颜色"
+        type="text"
+        @confirm="confirm_activeColor_input"
+      ></input-data>
+      <input-data
+        defaultValue="#e9e9e9"
+        title="radio背景条的颜色"
+        type="text"
+        @confirm="confirm_backgroundColor_input"
+      ></input-data>
+      <input-data
+        defaultValue="28"
+        title="radio滑块的大小，取值范围为 12 - 28"
+        type="number"
+        @confirm="confirm_block_size_input"
+      ></input-data>
+      <input-data
+        defaultValue="#ffffff"
+        title="滑块颜色"
+        type="text"
+        @confirm="confirm_block_color_input"
+      ></input-data>
    </view>
    <view class="uni-padding-wrap">
@@ -96,14 +197,26 @@
      <view class="uni-title">设置最小/最大值</view>
      <view>
-        <slider @change="sliderChange" :value="100" :min="50" :max="200" :show-value="true" />
+        <slider
+          @change="sliderChange"
+          :value="100"
+          :min="50"
+          :max="200"
+          :show-value="true"
+        />
      </view>
      <view class="uni-title">不同颜色和大小的滑块</view>
      <view>
-        <slider class="slider-custom-color-and-size" @change="sliderChange" :value="sliderValue"
+        <slider
-          :backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
+          class="slider-custom-color-and-size"
-          :block-size="sliderBlockSize" />
+          @change="sliderChange"
+          :value="sliderValue"
+          :backgroundColor="sliderBackgroundColor"
+          :activeColor="sliderActiveColor"
+          :blockColor="sliderBlockColor"
+          :block-size="sliderBlockSize"
+        />
      </view>
    </view>
    <!-- #ifdef APP -->
@@ -112,21 +225,21 @@
 </template>
 <style>
-  .main {
+.main {
  max-height: 500rpx;
  padding: 10rpx 0;
-    border-bottom: 1px solid rgba(0, 0, 0, .06);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-direction: row;
  justify-content: center;
-  }
+}
-  .main .list-item {
+.main .list-item {
  width: 100%;
  height: 200rpx;
  border: 1px solid #666;
-  }
+}
-  .m-l-a {
+.m-l-a {
  margin-left: auto;
-  }
+}
 </style>
--- a/pages/component/textarea/textarea.uvue
+++ b/pages/component/textarea/textarea.uvue
@@ -44,23 +44,84 @@ export default {
 </script>
 <template>
-	<!-- #ifdef APP -->
-	<scroll-view style="flex:1">
-	<!-- #endif -->
  <view class="main">
-	<textarea class="uni-textarea" :auto-focus="auto_focus_boolean" :focus="focus_boolean" :confirm-type="confirm_type_enum[confirm_type_enum_current].name" :confirm-hold="confirm_hold_boolean" :auto-height="auto_height_boolean" :fixed="fixed_boolean" :show-confirm-bar="show_confirm_bar_boolean" :adjust-position="adjust_position_boolean" :inputmode="inputmode_enum[inputmode_enum_current].name" @click="textarea_click" @touchstart="textarea_touchstart" @touchmove="textarea_touchmove" @touchcancel="textarea_touchcancel" @touchend="textarea_touchend" @tap="textarea_tap" @longpress="textarea_longpress" @confirm="textarea_confirm" @input="textarea_input" @linechange="textarea_linechange" @blur="textarea_blur" @keyboardheightchange="textarea_keyboardheightchange" @focus="textarea_focus" style="padding: 20rpx;border: 1px solid #666;" />
+    <textarea
+      class="uni-textarea"
+      :auto-focus="auto_focus_boolean"
+      :focus="focus_boolean"
+      :confirm-type="confirm_type_enum[confirm_type_enum_current].name"
+      :confirm-hold="confirm_hold_boolean"
+      :auto-height="auto_height_boolean"
+      :fixed="fixed_boolean"
+      :show-confirm-bar="show_confirm_bar_boolean"
+      :adjust-position="adjust_position_boolean"
+      :inputmode="inputmode_enum[inputmode_enum_current].name"
+      @click="textarea_click"
+      @touchstart="textarea_touchstart"
+      @touchmove="textarea_touchmove"
+      @touchcancel="textarea_touchcancel"
+      @touchend="textarea_touchend"
+      @tap="textarea_tap"
+      @longpress="textarea_longpress"
+      @confirm="textarea_confirm"
+      @input="textarea_input"
+      @linechange="textarea_linechange"
+      @blur="textarea_blur"
+      @keyboardheightchange="textarea_keyboardheightchange"
+      @focus="textarea_focus"
+      style="padding: 20rpx; border: 1px solid #666"
+    />
  </view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
    <view class="content nvue">
-			<boolean-data :defaultValue="false" title="键盘弹起时，是否自动上推页面" @change="change_adjust_position_boolean"></boolean-data>
+      <boolean-data
-		<boolean-data :defaultValue="false" title="是否显示键盘上方带有”完成“按钮那一栏" @change="change_show_confirm_bar_boolean"></boolean-data>
+        :defaultValue="false"
-		<boolean-data :defaultValue="false" title="如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true" @change="change_fixed_boolean"></boolean-data>
+        title="键盘弹起时，是否自动上推页面"
-		<boolean-data :defaultValue="false" title="是否自动增高，设置auto-height时，style.height不生效" @change="change_auto_height_boolean"></boolean-data>
+        @change="change_adjust_position_boolean"
-		<boolean-data :defaultValue="false" title="点击键盘右下角按钮时是否保持键盘不收起" @change="change_confirm_hold_boolean"></boolean-data>
+      ></boolean-data>
-		<boolean-data :defaultValue="false" title="获取焦点" @change="change_focus_boolean"></boolean-data>
+      <boolean-data
-		<boolean-data :defaultValue="false" title="自动获取焦点" @change="change_auto_focus_boolean"></boolean-data>
+        :defaultValue="false"
-	<enum-data :items="confirm_type_enum" title="设置键盘右下角按钮的文字" @change="radio_change_confirm_type_enum"></enum-data>
+        title="是否显示键盘上方带有”完成“按钮那一栏"
-	<enum-data :items="inputmode_enum" title="是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。" @change="radio_change_inputmode_enum"></enum-data>
+        @change="change_show_confirm_bar_boolean"
+      ></boolean-data>
+      <boolean-data
+        :defaultValue="false"
+        title="如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true"
+        @change="change_fixed_boolean"
+      ></boolean-data>
+      <boolean-data
+        :defaultValue="false"
+        title="是否自动增高，设置auto-height时，style.height不生效"
+        @change="change_auto_height_boolean"
+      ></boolean-data>
+      <boolean-data
+        :defaultValue="false"
+        title="点击键盘右下角按钮时是否保持键盘不收起"
+        @change="change_confirm_hold_boolean"
+      ></boolean-data>
+      <boolean-data
+        :defaultValue="false"
+        title="获取焦点"
+        @change="change_focus_boolean"
+      ></boolean-data>
+      <boolean-data
+        :defaultValue="false"
+        title="自动获取焦点"
+        @change="change_auto_focus_boolean"
+      ></boolean-data>
+      <enum-data
+        :items="confirm_type_enum"
+        title="设置键盘右下角按钮的文字"
+        @change="radio_change_confirm_type_enum"
+      ></enum-data>
+      <enum-data
+        :items="inputmode_enum"
+        title="是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。"
+        @change="radio_change_inputmode_enum"
+      ></enum-data>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
@@ -71,15 +132,14 @@ export default {
 .main {
  max-height: 500rpx;
  padding: 10rpx 0;
-	border-bottom: 1px solid rgba(0,0,0,.06);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-direction: row;
  justify-content: center;
 }
 .main .list-item {
-	width:100%;
+  width: 100%;
-	height:200rpx;
+  height: 200rpx;
  border: 1px solid #666;
 }
 </style>