progress.uvue

<script>
import { ItemType } from '@/components/enum-data/enum-data'
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',

			// 组件属性 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>

  <scroll-view style="flex: 1">
    <view class="content">
      <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>
  </scroll-view>
</template>

<style>
.main {
  max-height: 500rpx;
  padding: 10rpx 0;
  border-bottom: 1px solid rgba(0, 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;
}

.button {
  margin-top: 20rpx;
}
</style>