From 9ab4955166b7b1370fc2a49b152353241ca9e64a Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 16 十月 2023 09:22:23 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-steps-item/u-steps-item.vue | 316 ----------------------------------------------------
1 files changed, 0 insertions(+), 316 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 342fa63..e69de29 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
@@ -1,316 +0,0 @@
-<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