From 627c3e0a6920131d75eafa4646db373ccc936546 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:52:07 +0800
Subject: [PATCH] 小程序diamante
---
minipro_standard/uni_modules/uview-ui/components/u-steps-item/u-steps-item.vue | 316 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 316 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-steps-item/u-steps-item.vue b/minipro_standard/uni_modules/uview-ui/components/u-steps-item/u-steps-item.vue
index e69de29..342fa63 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-steps-item/u-steps-item.vue
+++ b/minipro_standard/uni_modules/uview-ui/components/u-steps-item/u-steps-item.vue
@@ -0,0 +1,316 @@
+<template>
+ <view class="u-steps-item" ref="u-steps-item" :class="[`u-steps-item--${parentData.direction}`]">
+ <view class="u-steps-item__line" v-if="index + 1 < childLength"
+ :class="[`u-steps-item__line--${parentData.direction}`]" :style="[lineStyle]"></view>
+ <view class="u-steps-item__wrapper"
+ :class="[`u-steps-item__wrapper--${parentData.direction}`, parentData.dot && `u-steps-item__wrapper--${parentData.direction}--dot`]">
+ <slot name="icon">
+ <view class="u-steps-item__wrapper__dot" v-if="parentData.dot" :style="{
+ backgroundColor: statusColor
+ }">
+
+ </view>
+ <view class="u-steps-item__wrapper__icon" v-else-if="parentData.activeIcon || parentData.inactiveIcon">
+ <u-icon :name="index <= parentData.current ? parentData.activeIcon : parentData.inactiveIcon"
+ :size="iconSize"
+ :color="index <= parentData.current ? parentData.activeColor : parentData.inactiveColor">
+ </u-icon>
+ </view>
+ <view v-else :style="{
+ backgroundColor: statusClass === 'process' ? parentData.activeColor : 'transparent',
+ borderColor: statusColor
+ }" class="u-steps-item__wrapper__circle">
+ <text v-if="statusClass === 'process' || statusClass === 'wait'"
+ class="u-steps-item__wrapper__circle__text" :style="{
+ color: index == parentData.current ? '#ffffff' : parentData.inactiveColor
+ }">{{ index + 1}}</text>
+ <u-icon v-else :color="statusClass === 'error' ? 'error' : parentData.activeColor" size="12"
+ :name="statusClass === 'error' ? 'close' : 'checkmark'"></u-icon>
+ </view>
+ </slot>
+ </view>
+ <view class="u-steps-item__content" :class="[`u-steps-item__content--${parentData.direction}`]"
+ :style="[contentStyle]">
+ <u--text :text="title" :type="parentData.current == index ? 'main' : 'content'" lineHeight="20px"
+ :size="parentData.current == index ? 14 : 13"></u--text>
+ <slot name="desc">
+ <u--text :text="desc" type="tips" size="12"></u--text>
+ </slot>
+ </view>
+ <!-- <view
+ class="u-steps-item__line"
+ v-if="showLine && parentData.direction === 'column'"
+ :class="[`u-steps-item__line--${parentData.direction}`]"
+ :style="[lineStyle]"
+ ></view> -->
+ </view>
+</template>
+
+<script>
+ import props from './props.js';
+ // #ifdef APP-NVUE
+ const dom = uni.requireNativePlugin('dom')
+ // #endif
+ /**
+ * StepsItem 姝ラ鏉＄殑瀛愮粍浠�
+ * @description 鏈粍浠堕渶瑕佸拰u-steps閰嶅悎浣跨敤
+ * @tutorial https://uviewui.com/components/steps.html
+ * @property {String} title 鏍囬鏂囧瓧
+ * @property {String} current 鎻忚堪鏂囨湰
+ * @property {String | Number} iconSize 鍥炬爣澶у皬 (榛樿 17 )
+ * @property {Boolean} error 褰撳墠姝ラ鏄惁澶勪簬澶辫触鐘舵�� (榛樿 false )
+ * @example <u-steps current="0"><u-steps-item title="宸插嚭搴�" desc="10:35" ></u-steps-item></u-steps>
+ */
+ export default {
+ name: 'u-steps-item',
+ mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+ data() {
+ return {
+ index: 0,
+ childLength: 0,
+ showLine: false,
+ size: {
+ height: 0,
+ width: 0
+ },
+ parentData: {
+ direction: 'row',
+ current: 0,
+ activeColor: '',
+ inactiveColor: '',
+ activeIcon: '',
+ inactiveIcon: '',
+ dot: false
+ }
+ }
+ },
+ watch: {
+ 'parentData'(newValue, oldValue) {
+ }
+ },
+ created() {
+ this.init()
+ },
+ computed: {
+ lineStyle() {
+ const style = {}
+ if (this.parentData.direction === 'row') {
+ style.width = this.size.width + 'px'
+ style.left = this.size.width / 2 + 'px'
+ } else {
+ style.height = this.size.height + 'px'
+ // style.top = this.size.height / 2 + 'px'
+ }
+ style.backgroundColor = this.parent.children?.[this.index + 1]?.error ? uni.$u.color.error : this.index <
+ this
+ .parentData
+ .current ? this.parentData.activeColor : this.parentData.inactiveColor
+ return style
+ },
+ statusClass() {
+ const {
+ index,
+ error
+ } = this
+ const {
+ current
+ } = this.parentData
+ if (current == index) {
+ return error === true ? 'error' : 'process'
+ } else if (error) {
+ return 'error'
+ } else if (current > index) {
+ return 'finish'
+ } else {
+ return 'wait'
+ }
+ },
+ statusColor() {
+ let color = ''
+ switch (this.statusClass) {
+ case 'finish':
+ color = this.parentData.activeColor
+ break
+ case 'error':
+ color = uni.$u.color.error
+ break
+ case 'process':
+ color = this.parentData.dot ? this.parentData.activeColor : 'transparent'
+ break
+ default:
+ color = this.parentData.inactiveColor
+ break
+ }
+ return color
+ },
+ contentStyle() {
+ const style = {}
+ if (this.parentData.direction === 'column') {
+ style.marginLeft = this.parentData.dot ? '2px' : '6px'
+ style.marginTop = this.parentData.dot ? '0px' : '6px'
+ } else {
+ style.marginTop = this.parentData.dot ? '2px' : '6px'
+ style.marginLeft = this.parentData.dot ? '2px' : '6px'
+ }
+
+ return style
+ }
+ },
+ mounted() {
+ this.parent && this.parent.updateFromChild()
+ uni.$u.sleep().then(() => {
+ this.getStepsItemRect()
+ })
+ },
+ methods: {
+ init() {
+ // 鍒濆鍖栨暟鎹�
+ this.updateParentData()
+ if (!this.parent) {
+ return uni.$u.error('u-steps-item蹇呴』瑕佹惌閰島-steps缁勪欢浣跨敤')
+ }
+ this.index = this.parent.children.indexOf(this)
+ this.childLength = this.parent.children.length
+ },
+ updateParentData() {
+ // 姝ゆ柟娉曞湪mixin涓�
+ this.getParentData('u-steps')
+ },
+ // 鐖剁粍浠舵暟鎹彂鐢熷彉鍖�
+ updateFromParent() {
+ this.init()
+ },
+ // 鑾峰彇缁勪欢鐨勫昂瀵革紝鐢ㄤ簬璁剧疆妯嚎鐨勪綅缃�
+ getStepsItemRect() {
+ // #ifndef APP-NVUE
+ this.$uGetRect('.u-steps-item').then(size => {
+ this.size = size
+ })
+ // #endif
+
+ // #ifdef APP-NVUE
+ dom.getComponentRect(this.$refs['u-steps-item'], res => {
+ const {
+ size
+ } = res
+ this.size = size
+ })
+ // #endif
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/components.scss";
+
+ .u-steps-item {
+ flex: 1;
+ @include flex;
+
+ &--row {
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ }
+
+ &--column {
+ position: relative;
+ flex-direction: row;
+ justify-content: flex-start;
+ padding-bottom: 5px;
+ }
+
+ &__wrapper {
+ @include flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ background-color: #fff;
+
+ &--column {
+ width: 20px;
+ height: 32px;
+
+ &--dot {
+ height: 20px;
+ width: 20px;
+ }
+ }
+
+ &--row {
+ width: 32px;
+ height: 20px;
+
+ &--dot {
+ width: 20px;
+ height: 20px;
+ }
+ }
+
+ &__circle {
+ width: 20px;
+ height: 20px;
+ /* #ifndef APP-NVUE */
+ box-sizing: border-box;
+ flex-shrink: 0;
+ /* #endif */
+ border-radius: 100px;
+ border-width: 1px;
+ border-color: $u-tips-color;
+ border-style: solid;
+ @include flex(row);
+ align-items: center;
+ justify-content: center;
+ transition: background-color 0.3s;
+
+ &__text {
+ color: $u-tips-color;
+ font-size: 11px;
+ @include flex(row);
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ line-height: 11px;
+ }
+ }
+
+ &__dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 100px;
+ background-color: $u-content-color;
+ }
+ }
+
+ &__content {
+ @include flex;
+ flex: 1;
+
+ &--row {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ &--column {
+ flex-direction: column;
+ margin-left: 6px;
+ }
+ }
+
+ &__line {
+ position: absolute;
+ background: $u-tips-color;
+
+ &--row {
+ top: 10px;
+ height: 1px;
+ }
+
+ &--column {
+ width: 1px;
+ left: 10px;
+ }
+ }
+ }
+</style>
--
Gitblit v1.9.3