From c724683bf224c844a3ca1b19298911d761d7eafc Mon Sep 17 00:00:00 2001
From: DCloud_LXH <283700113@qq.com>
Date: Mon, 21 Aug 2023 18:40:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20checkbox=E3=80=81process=E3=80=81radio?=
 =?UTF-8?q?=E3=80=81slider?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/boolean-data/boolean-data.vue |  10 +-
 components/enum-data/enum-data.vue       |   6 +-
 components/input-data/input-data.vue     |  97 +++++++
 pages/component/checkbox/checkbox.uvue   | 349 ++++++++++++-----------
 pages/component/progress/progress.uvue   | 192 +++++++++----
 pages/component/radio/radio.uvue         | 320 ++++++++++++---------
 pages/component/slider/slider.uvue       | 163 ++++++++---
 7 files changed, 726 insertions(+), 411 deletions(-)
 create mode 100644 components/input-data/input-data.vue

diff --git a/components/boolean-data/boolean-data.vue b/components/boolean-data/boolean-data.vue
index cfbf8f48..1344d3c0 100644
--- a/components/boolean-data/boolean-data.vue
+++ b/components/boolean-data/boolean-data.vue
@@ -29,10 +29,16 @@
 </script>
 
 <template>
-	<view class="uni-flex" style="justify-content: space-between;padding: 10rpx;">
+	<view class="button-data-main uni-flex">
 		<view class="uni-title" style="width:80%">{{ title }}</view>
 		<switch :checked="_checked" @change="_change" />
 	</view>
 </template>
 
-<style></style>
\ No newline at end of file
+<style>
+	.button-data-main {
+		justify-content: space-between;
+		padding: 20rpx;
+		border-bottom: 1px solid rgba(0,0,0,.06);
+	}
+</style>
\ No newline at end of file
diff --git a/components/enum-data/enum-data.vue b/components/enum-data/enum-data.vue
index 2740306d..54162bb6 100644
--- a/components/enum-data/enum-data.vue
+++ b/components/enum-data/enum-data.vue
@@ -25,10 +25,10 @@
 				})
 				this.current = selected?.value as number
 				this.$emit('change', this.current)
-				/* uni.showToast({
+				uni.showToast({
 					icon: 'none',
 					title: '当前选中:' + selected?.name,
-				}) */
+				})
 			}
 		}
 	}
@@ -50,4 +50,4 @@
 	</view>
 </template>
 
-<style></style>
+<style></style>
\ No newline at end of file
diff --git a/components/input-data/input-data.vue b/components/input-data/input-data.vue
new file mode 100644
index 00000000..1a8cb909
--- /dev/null
+++ b/components/input-data/input-data.vue
@@ -0,0 +1,97 @@
+<script lang="uts">
+	export default {
+		name: "input-data",
+		props: {
+			title: {
+				type: String,
+				required: true
+			},
+			type: {
+				type: String,
+				required: true
+			},
+			defaultValue: {
+				type: String,
+				required: true,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				inputClearValue: '' as any,
+				showClearIcon: false,
+				inputType: 'text'
+			}
+		},
+		created() {
+			switch (this.type) {
+				case 'number':
+					this.inputType = 'number'
+					break;
+			}
+			this.inputClearValue = this.getValue(this.defaultValue)
+		},
+		methods: {
+			input: function (event : InputEvent) {
+				// @ts-ignore
+				this.inputClearValue = event.detail.value
+				// @ts-ignore
+				if (event.detail.value.length > 0) {
+					this.showClearIcon = true
+				} else {
+					this.showClearIcon = false
+				}
+
+				this.$emit('confirm', this.getValue(this.inputClearValue))
+			},
+			clearIcon: function () {
+				this.inputClearValue = ''
+				this.showClearIcon = false
+			},
+			// @ts-ignore
+			confirm(e : InputConfirmEvent) {
+				// this.$emit('confirm', this.getValue(e.detail.value))
+			},
+			getValue(value : any) : any {
+				switch (this.type) {
+					case 'number':
+						return parseFloat(value as string)
+				}
+
+				return value
+			}
+		}
+	}
+</script>
+
+<template>
+	<view class="uni-padding-wrap">
+		<view class="uni-title uni-common-mt">
+			<text class="uni-title-text"> {{title}} </text>
+		</view>
+	</view>
+	<view class="uni-input-wrapper input-wrapper uni-flex">
+		<input class="uni-input" :type="inputType" :value="inputClearValue" :placeholder="title" @input="input"
+			@confirm="confirm" />
+		<image class="input-wrapper_image" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon">
+		</image>
+	</view>
+</template>
+
+
+<style>
+	.input-wrapper {
+		border: 1px solid rgba(0, 0, 0, .08);
+		justify-content: center;
+		padding: 0;
+		margin: 0 20rpx;
+		background-color: #FFF;
+	}
+
+	.input-wrapper_image {
+		width: 22px;
+		height: 22px;
+		align-self: center;
+		margin-right: 10rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/component/checkbox/checkbox.uvue b/pages/component/checkbox/checkbox.uvue
index d9b24e6f..118460d9 100644
--- a/pages/component/checkbox/checkbox.uvue
+++ b/pages/component/checkbox/checkbox.uvue
@@ -1,166 +1,193 @@
+<script>
+	type ItemType = {
+		value : string
+		name : string
+		checked : boolean
+	}
+	export default {
+		data() {
+			return {
+				items: [
+					{
+						value: 'CHN',
+						name: '中国',
+						checked: true,
+					},
+					{
+						value: 'USA',
+						name: '美国',
+						checked: false,
+					},
+					{
+						value: 'BRA',
+						name: '巴西',
+						checked: false,
+					},
+					{
+						value: 'JPN',
+						name: '日本',
+						checked: false,
+					},
+					{
+						value: 'ENG',
+						name: '英国',
+						checked: false,
+					},
+					{
+						value: 'FRA',
+						name: '法国',
+						checked: false,
+					},
+				] as ItemType[],
+
+				text: '未选中',
+				wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
+				value: [] as string[],
+				disabled: true,
+				checked: true,
+				color: '#007aff',
+				// 组件属性 autotest
+				checked_boolean: false,
+				disabled_boolean: false,
+				color_input: "#007aff",
+				backgroundColor_input: "#ffffff",
+				borderColor_input: "#d1d1d1",
+				activeBackgroundColor_input: "#ffffff",
+				activeBorderColor_input: "#d1d1d1",
+				iconColor_input: "#007aff"
+			}
+		},
+		methods: {
+			checkboxChange: function (e : CheckboxGroupChangeEvent) {
+				const selectedNames : string[] = []
+				this.items.forEach((item) => {
+					if (e.detail.value.includes(item.value)) {
+						selectedNames.push(item.name)
+					}
+				})
+				uni.showToast({
+					icon: 'none',
+					title: '当前选中:' + selectedNames.join(','),
+				})
+			},
+			testChange: function (e : CheckboxGroupChangeEvent) {
+				this.value = e.detail.value
+			},
+			checkbox_click() { console.log("组件被点击时触发") },
+			checkbox_touchstart() { console.log("手指触摸动作开始") },
+			checkbox_touchmove() { console.log("手指触摸后移动") },
+			checkbox_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
+			checkbox_touchend() { console.log("手指触摸动作结束") },
+			checkbox_tap() { console.log("手指触摸后马上离开") },
+			checkbox_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
+			change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
+			change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
+			confirm_color_input(value : string) { this.color_input = value },
+			confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
+			confirm_borderColor_input(value : string) { this.borderColor_input = value },
+			confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
+			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>
-      <page-head :title="title"></page-head>
-      <view class="uni-padding-wrap uni-common-mt">
-        <view class="uni-title uni-common-mt">
-          <text class="uni-title-text"> 默认样式 </text>
-        </view>
-        <view>
-          <checkbox-group
-            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 value="cb2" :disabled="disabled" class="checkbox cb2"
-              >禁用</checkbox
-            >
-            <checkbox
-              value="cb3"
-              style="margin-top: 20rpx"
-              class="checkbox cb3"
-            >
-              {{ wrapText }}
-            </checkbox>
-          </checkbox-group>
-        </view>
-        <view class="uni-title uni-common-mt">
-          <text class="uni-title-text"> 不同颜色和尺寸的checkbox </text>
-        </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"
-              class="checkbox"
-              >选中
-            </checkbox>
-            <checkbox
-              value="cb"
-              color="#FFCC33"
-              style="transform: scale(0.7)"
-              class="checkbox"
-              >未选中</checkbox
-            >
-          </checkbox-group>
-        </view>
-      </view>
+	<view class="main">
+		<checkbox :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input"
+			:backgroundColor="backgroundColor_input" :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>
 
-      <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">
-        <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"
-            :value="item.value"
-            :checked="item.checked"
-            :class="index < items.length - 1 ? 'uni-list-cell-line' : ''"
-          >
-            {{ item.name }}
-          </checkbox>
-        </checkbox-group>
-      </view>
-    </view>
-    <!-- #ifdef APP -->
-  </scroll-view>
-  <!-- #endif -->
-</template>
-<script lang="ts">
-type ItemType = {
-  value: string
-  name: string
-  checked: boolean
-}
-export default {
-  data() {
-    return {
-      title: 'checkbox 复选框',
-      items: [
-        {
-          value: 'CHN',
-          name: '中国',
-          checked: true,
-        },
-        {
-          value: 'USA',
-          name: '美国',
-          checked: false,
-        },
-        {
-          value: 'BRA',
-          name: '巴西',
-          checked: false,
-        },
-        {
-          value: 'JPN',
-          name: '日本',
-          checked: false,
-        },
-        {
-          value: 'ENG',
-          name: '英国',
-          checked: false,
-        },
-        {
-          value: 'FRA',
-          name: '法国',
-          checked: false,
-        },
-      ] as ItemType[],
+	<!-- #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 :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
+			<input-data defaultValue="#007aff" 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>
 
-      text: '未选中',
-      wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
-      value: [] as string[],
-      disabled: true,
-      checked: true,
-      color: '#007aff',
-    }
-  },
-  methods: {
-    checkboxChange: function (e: CheckboxGroupChangeEvent) {
-      const selectedNames: string[] = []
-      this.items.forEach((item) => {
-        if (e.detail.value.includes(item.value)) {
-          selectedNames.push(item.name)
-        }
-      })
-      uni.showToast({
-        icon: 'none',
-        title: '当前选中:' + selectedNames.join(','),
-      })
-    },
-    testChange: function (e: CheckboxGroupChangeEvent) {
-      this.value = e.detail.value
-    },
-  },
-}
-</script>
+		<view>
+			<page-head title="默认及使用"></page-head>
+			<view class="uni-padding-wrap uni-common-mt">
+				<view class="uni-title uni-common-mt">
+					<text class="uni-title-text"> 默认样式 </text>
+				</view>
+				<view>
+					<checkbox-group 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 value="cb2" :disabled="disabled" class="checkbox cb2">禁用</checkbox>
+						<checkbox value="cb3" style="margin-top: 20rpx" class="checkbox cb3">
+							{{ wrapText }}
+						</checkbox>
+					</checkbox-group>
+				</view>
+				<view class="uni-title uni-common-mt">
+					<text class="uni-title-text"> 不同颜色和尺寸的checkbox </text>
+				</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"
+							class="checkbox">选中
+						</checkbox>
+						<checkbox value="cb" color="#FFCC33" style="transform: scale(0.7)" class="checkbox">未选中</checkbox>
+					</checkbox-group>
+				</view>
+			</view>
+
+			<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">
+				<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"
+						:value="item.value" :checked="item.checked" :class="index < items.length - 1 ? 'uni-list-cell-line' : ''">
+						{{ item.name }}
+					</checkbox>
+				</checkbox-group>
+			</view>
+		</view>
+
+		<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
+</template>
 
 <style>
-.uni-list-cell {
-  justify-content: flex-start;
-}
-</style>
+	.main {
+		max-height: 500rpx;
+		padding: 10rpx 0;
+		border-bottom: 1px solid rgba(0, 0, 0, .06);
+		flex-direction: row;
+		justify-content: center;
+	}
+
+	.main .list-item {
+		width: 100%;
+		height: 200rpx;
+		border: 1px solid #666;
+	}
+
+	.uni-list-cell {
+		justify-content: flex-start;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/component/progress/progress.uvue b/pages/component/progress/progress.uvue
index 85c9802e..8f9c6294 100644
--- a/pages/component/progress/progress.uvue
+++ b/pages/component/progress/progress.uvue
@@ -1,68 +1,138 @@
-<template>
-    <view>
-        <page-head :title="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"
-                    :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" />
-            </view>
-            <view class="progress-box">
-                <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" />
-            </view>
-            <view class="progress-control">
-                <button type="primary" @click="setProgress" class="button">设置进度</button>
-                <button type="warn" @click="clearProgress" class="button">清除进度</button>
-            </view>
-        </view>
-    </view>
-</template>
-<script lang="ts">
-    export default {
-        data() {
-            return {
-                title: 'progress',
-                pgList: [0, 0, 0, 0] as number[],
+<script>
+	import { type ItemType } from '@/components/enum-data/enum-data.vue'
+	export default {
+		data() {
+			return {
+				title: 'progress',
+				pgList: [0, 0, 0, 0] as number[],
+				curPercent: 0,
+				showInfo: true,
+				borderRadius: 0,
+				fontSize: 16,
+				strokeWidth: 3,
+				backgroundColor: '#EBEBEB',
 
-                curPercent: 0,
-                showInfo: true,
-                borderRadius: 0,
-                fontSize: 16,
-                strokeWidth: 3,
-                backgroundColor: '#EBEBEB'
-            }
-        },
-        methods: {
-            setProgress() {
-                this.pgList = [20, 40, 60, 80] as number[]
-            },
-            clearProgress() {
-                this.pgList = [0, 0, 0, 0] as number[]
-            },
-            activeend(e : ProgressActiveendEvent) {
-                this.curPercent = e.detail.curPercent
-            }
-        }
-    }
+				// 组件属性 autotest
+				active_boolean: false,
+				show_info_boolean: false,
+				duration_input: 30,
+				percent_input: 0,
+				stroke_width_input: 6,
+				activeColor_input: "#09BB07",
+				backgroundColor_input: "#EBEBEB",
+				active_mode_enum: [{ "value": 0, "name": "backwards" }, { "value": 1, "name": "forwards" }] as ItemType[],
+				active_mode_enum_current: 0
+			}
+		},
+		methods: {
+			setProgress() {
+				this.pgList = [20, 40, 60, 80] as number[]
+			},
+			clearProgress() {
+				this.pgList = [0, 0, 0, 0] as number[]
+			},
+			activeend(e : ProgressActiveendEvent) {
+				this.curPercent = e.detail.curPercent
+			},
+			progress_touchstart() { console.log("手指触摸动作开始") },
+			progress_touchmove() { console.log("手指触摸后移动") },
+			progress_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
+			progress_touchend() { console.log("手指触摸动作结束") },
+			progress_tap() { console.log("手指触摸后马上离开") },
+			change_active_boolean(checked : boolean) { this.active_boolean = checked },
+			change_show_info_boolean(checked : boolean) { this.show_info_boolean = checked },
+			confirm_duration_input(value : number) { this.duration_input = value },
+			confirm_percent_input(value : number) { this.percent_input = value },
+			confirm_stroke_width_input(value : number) { this.stroke_width_input = value },
+			confirm_activeColor_input(value : string) { this.activeColor_input = value },
+			confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
+			radio_change_active_mode_enum(checked : number) { this.active_mode_enum_current = checked }
+		}
+	}
 </script>
 
+<template>
+	<view class="main">
+		<progress :duration="duration_input" :percent="percent_input" :show-info="show_info_boolean"
+			: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 :defaultValue="false" title="在进度条右侧显示百分比" @change="change_show_info_boolean"></boolean-data>
+			<input-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"
+						: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" />
+				</view>
+				<view class="progress-box">
+					<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" />
+				</view>
+				<view class="progress-control">
+					<button type="primary" @click="setProgress" class="button">设置进度</button>
+					<button type="warn" @click="clearProgress" class="button">清除进度</button>
+				</view>
+			</view>
+		</view>
+		<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
+</template>
+
 <style>
-    .progress-box {
-        height: 50rpx;
-        margin-bottom: 60rpx;
-    }
+	.main {
+		max-height: 500rpx;
+		padding: 10rpx 0;
+		border-bottom: 1px solid rgba(0, 0, 0, .06);
+		flex-direction: row;
+		justify-content: center;
+	}
+
+	.main .list-item {
+		width: 100%;
+		height: 200rpx;
+		border: 1px solid #666;
+	}
+
+	.progress-box {
+		height: 50rpx;
+		margin-bottom: 60rpx;
+	}
 
-    .progress-cancel {
-        margin-left: 40rpx;
-    }
+	.progress-cancel {
+		margin-left: 40rpx;
+	}
 
-    .button {
-        margin-top: 20rpx;
-    }
+	.button {
+		margin-top: 20rpx;
+	}
 </style>
\ No newline at end of file
diff --git a/pages/component/radio/radio.uvue b/pages/component/radio/radio.uvue
index 726c1a36..730f0569 100644
--- a/pages/component/radio/radio.uvue
+++ b/pages/component/radio/radio.uvue
@@ -1,148 +1,186 @@
+<script>
+	type ItemType = {
+		value : string
+		name : string
+	}
+	export default {
+		data() {
+			return {
+				items: [
+					{
+						value: 'CHN',
+						name: '中国',
+					},
+					{
+						value: 'USA',
+						name: '美国',
+					},
+
+					{
+						value: 'BRA',
+						name: '巴西',
+					},
+					{
+						value: 'JPN',
+						name: '日本',
+					},
+					{
+						value: 'ENG',
+						name: '英国',
+					},
+					{
+						value: 'FRA',
+						name: '法国',
+					},
+				] as ItemType[],
+				current: 0,
+
+				value: '',
+				text: '未选中',
+				wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
+				disabled: true,
+				checked: true,
+				color: '#007aff',
+				// 组件属性 autotest
+				checked_boolean: false,
+				disabled_boolean: false,
+				color_input: "#007AFF",
+				backgroundColor_input: "#ffffff",
+				borderColor_input: "#d1d1d1",
+				activeBackgroundColor_input: "#007AFF",
+				activeBorderColor_input: "",
+				iconColor_input: "#ffffff"
+			}
+		},
+		methods: {
+			radioChange(e : RadioGroupChangeEvent) {
+				const selected = this.items.find((item) : boolean => {
+					return item.value == e.detail.value
+				})
+				uni.showToast({
+					icon: 'none',
+					title: '当前选中:' + selected?.name,
+				})
+			},
+			testChange(e : RadioGroupChangeEvent) {
+				this.value = e.detail.value
+			},
+			radio_click() { console.log("组件被点击时触发") },
+			radio_touchstart() { console.log("手指触摸动作开始") },
+			radio_touchmove() { console.log("手指触摸后移动") },
+			radio_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
+			radio_touchend() { console.log("手指触摸动作结束") },
+			radio_tap() { console.log("手指触摸后马上离开") },
+			radio_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
+			change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
+			change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
+			confirm_color_input(value : string) { this.color_input = value },
+			confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
+			confirm_borderColor_input(value : string) { this.borderColor_input = value },
+			confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
+			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>
-      <page-head :title="title"></page-head>
-      <view class="uni-padding-wrap">
-        <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
-            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
-          }}</radio>
-          <radio value="r2" :disabled="disabled" class="radio r2">禁用</radio>
-          <radio value="r3" class="radio r3" style="margin-top: 20rpx">{{
-            wrapText
-          }}</radio>
-        </radio-group>
-      </view>
+	<view class="main">
+		<radio :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input"
+			: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>
 
-      <view class="uni-padding-wrap">
-        <view class="uni-title uni-common-mt">
-          <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"
-            class="radio"
-            >选中
-          </radio>
-          <radio
-            value="r2"
-            color="#FFCC33"
-            style="transform: scale(0.7)"
-            class="radio"
-            >未选中</radio
-          >
-        </radio-group>
-      </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 :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
+			<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 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>
-    <!-- #ifdef APP -->
-  </scroll-view>
-  <!-- #endif -->
-</template>
-<script lang="ts">
-type ItemType = {
-  value: string
-  name: string
-}
-export default {
-  data() {
-    return {
-      title: 'radio 单选框',
-      items: [
-        {
-          value: 'CHN',
-          name: '中国',
-        },
-        {
-          value: 'USA',
-          name: '美国',
-        },
+		<view>
+			<page-head title="默认及使用"></page-head>
+			<view class="uni-padding-wrap">
+				<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 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
+		      }}</radio>
+					<radio value="r2" :disabled="disabled" class="radio r2">禁用</radio>
+					<radio value="r3" class="radio r3" style="margin-top: 20rpx">{{
+		        wrapText
+		      }}</radio>
+				</radio-group>
+			</view>
 
-        {
-          value: 'BRA',
-          name: '巴西',
-        },
-        {
-          value: 'JPN',
-          name: '日本',
-        },
-        {
-          value: 'ENG',
-          name: '英国',
-        },
-        {
-          value: 'FRA',
-          name: '法国',
-        },
-      ] as ItemType[],
-      current: 0,
+			<view class="uni-padding-wrap">
+				<view class="uni-title uni-common-mt">
+					<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"
+						class="radio">选中
+					</radio>
+					<radio value="r2" color="#FFCC33" style="transform: scale(0.7)" class="radio">未选中</radio>
+				</radio-group>
+			</view>
 
-      value: '',
-      text: '未选中',
-      wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
-      disabled: true,
-      checked: true,
-      color: '#007aff',
-    }
-  },
-  methods: {
-    radioChange(e: RadioGroupChangeEvent) {
-      const selected = this.items.find((item): boolean => {
-        return item.value == e.detail.value
-      })
-      uni.showToast({
-        icon: 'none',
-        title: '当前选中:' + selected?.name,
-      })
-    },
-    testChange(e: RadioGroupChangeEvent) {
-      this.value = e.detail.value
-    },
-  },
-}
-</script>
+			<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>
+		<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
+</template>
 
 <style>
-.uni-list-cell {
-  justify-content: flex-start;
-}
-</style>
+	.main {
+		max-height: 500rpx;
+		padding: 10rpx 0;
+		border-bottom: 1px solid rgba(0, 0, 0, .06);
+		flex-direction: row;
+		justify-content: center;
+	}
+
+	.main .list-item {
+		width: 100%;
+		height: 200rpx;
+		border: 1px solid #666;
+	}
+
+	.uni-list-cell {
+		justify-content: flex-start;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/component/slider/slider.uvue b/pages/component/slider/slider.uvue
index 3cf2e957..3c321015 100644
--- a/pages/component/slider/slider.uvue
+++ b/pages/component/slider/slider.uvue
@@ -1,48 +1,125 @@
-<template>
-  <view class="uni-padding-wrap">
-    <page-head :title="title"></page-head>
-    <view class="uni-title">显示当前value</view>
-    <view>
-      <slider @change="sliderChange" :value="50" :show-value="true" />
-    </view>
-
-    <view class="uni-title">设置步进step跳动</view>
-    <view>
-      <slider @change="sliderChange" :value="60" :step="5" />
-    </view>
-
-    <view class="uni-title">设置最小/最大值</view>
-    <view>
-      <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" :backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
-        :block-size="sliderBlockSize" />
-    </view>
-  </view>
-</template>
-
-<script lang="ts">
-  export default {
-    data() {
-      return {
-        title: 'slider 滑块',
-        sliderValue: 50,
-        sliderBlockSize: 20,
-        sliderBackgroundColor: '#000000',
-        sliderActiveColor: '#FFCC33',
-        sliderBlockColor: '#8A6DE9',
-      }
-    },
-    methods: {
+<script>
+	export default {
+		data() {
+			return {
+				sliderValue: 50,
+				sliderBlockSize: 20,
+				sliderBackgroundColor: '#000000',
+				sliderActiveColor: '#FFCC33',
+				sliderBlockColor: '#8A6DE9',
+				// 组件属性 autotest
+				show_value_boolean: false,
+				disabled_boolean: false,
+				min_input: 0,
+				max_input: 100,
+				step_input: 1,
+				value_input: 0,
+				activeColor_input: "#007aff",
+				backgroundColor_input: "#e9e9e9",
+				block_size_input: 28,
+				block_color_input: "#ffffff"
+			}
+		},
+		methods: {
       sliderChange(e : SliderChangeEvent) {
         console.log('value 发生变化：' + e.detail.value)
-      }
-    }
-  }
+      },
+			slider_click() { console.log("组件被点击时触发") },
+			slider_touchstart() { console.log("手指触摸动作开始") },
+			slider_touchmove() { console.log("手指触摸后移动") },
+			slider_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
+			slider_touchend() { console.log("手指触摸动作结束") },
+			slider_tap() { console.log("手指触摸后马上离开") },
+			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>
+	<view class="main">
+		<slider :disabled="disabled_boolean" :min="min_input" :max="max_input" :step="step_input" :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 :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
+			<input-data defaultValue="0" title="slider 最小值" 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">
+			<page-head title="默认及使用"></page-head>
+			<view class="uni-title">显示当前value</view>
+			<view>
+				<slider @change="sliderChange" :value="50" :show-value="true" />
+			</view>
+
+			<view class="uni-title">设置步进step跳动</view>
+			<view>
+				<slider @change="sliderChange" :value="60" :step="5" />
+			</view>
+
+			<view class="uni-title">设置最小/最大值</view>
+			<view>
+				<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"
+					:backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
+					:block-size="sliderBlockSize" />
+			</view>
+		</view>
+		<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
+</template>
+
 <style>
-</style>
+	.main {
+		max-height: 500rpx;
+		padding: 10rpx 0;
+		border-bottom: 1px solid rgba(0, 0, 0, .06);
+		flex-direction: row;
+		justify-content: center;
+	}
+
+	.main .list-item {
+		width: 100%;
+		height: 200rpx;
+		border: 1px solid #666;
+	}
+</style>
\ No newline at end of file
-- 
GitLab