ProAdvanced/components/my-custom-step/my-custom-step.vue

<template>
	<!-- 步骤条 -->
	<view>
		<view class="text-11px text-white text-left" style="width: 100%;margin-left: 40rpx;">调整速度</view>
		<view class="my-cu-steps">
			<view class="my-cu-item" :class="index>basics?'':'make-text-r-blue'" v-for="(item,index) in basicsList" :key="index">
				<view style="position: relative;" @tap="_customSetBasics(index)">
					<view style="position: absolute; top:0;bottom:0;right: 0;left: 0; margin: auto; width: 10px;height: 10px; border-radius: 45px; background-color: #FFFFFF;"></view>
					<text :class="'cuIcon-' + item.cuIcon"></text>
				</view>
				<view style="color: #FFFFFF;">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				//步骤点
				basicsList: [{
					cuIcon: 'radioboxfill',
					name: '0'
				}, {
					cuIcon: 'radioboxfill',
					name: '1'
				}, {
					cuIcon: 'radioboxfill',
					name: '2'
				}, {
					cuIcon: 'radioboxfill',
					name: '3'
				}, {
					cuIcon: 'radioboxfill',
					name: '4'
				}, {
					cuIcon: 'radioboxfill',
					name: '5'
				}, {
					cuIcon: 'radioboxfill',
					name: '6'
				}],
				basics: 0,
			}
		},
		
		methods:{
			//操作心电图
			_customSetBasics(index) {
				// if (!this.bElectRun) return;
				this.basics = index;
			
				// this.electro.duration = 2000 - (this.basics + 1) * 150;
				// this.$refs.electRef.changeDuration(this.electro.duration);
				// callback
				
				this.$emit('onCustomSetBasics',{basics:this.basics});
			},
			
			onChangeBasicsFromDirection(data){
				let _bRight = data.bRight;
				if (_bRight) {
					this.basics = this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1;
				} else {
					this.basics = this.basics == 0 ? 6 : this.basics - 1;
				}
				this.$emit('onCustomSetBasics',{basics:this.basics});
			}
		}
	}
</script>

<style>
</style>