| 1 |
- {"version":3,"sources":["webpack:///D:/Code2024/sulibao-mini/tuniao-ui/components/tn-steps/tn-steps.vue?0549","webpack:///D:/Code2024/sulibao-mini/tuniao-ui/components/tn-steps/tn-steps.vue?cb41","webpack:///D:/Code2024/sulibao-mini/tuniao-ui/components/tn-steps/tn-steps.vue?5fbc","webpack:///D:/Code2024/sulibao-mini/tuniao-ui/components/tn-steps/tn-steps.vue?baf7","uni-app:///tuniao-ui/components/tn-steps/tn-steps.vue","webpack:///D:/Code2024/sulibao-mini/tuniao-ui/components/tn-steps/tn-steps.vue?97d7"],"names":["renderjs","component","options","__file","components","render","_vm","this","_h","$createElement","g0","_self","_c","list","length","l0","__map","item","index","$orig","__get_orig","m0","mode","iconModeClass","m1","currentIndex","$mp","data","Object","assign","$root","recyclableRender","staticRenderFns","_withStripped","name","props","type","default","direction","current","activeColor","inActiveColor","icon","showTitle","fontSize","computed","watch","handler","immediate","methods","clickStepItem"],"mappings":"uIAAA,oIACIA,EADJ,QASIC,EAAY,qBACd,aACA,YACA,sBACA,EACA,KACA,WACA,MACA,EACA,gBACAD,GAGFC,EAAUC,QAAQC,OAAS,6CACZ,aAAAF,E,0CCvBf,uQ,iCCAA,IAAIG,EAAJ,0LACA,IAAIC,EAAS,WACX,IAAIC,EAAMC,KACNC,EAAKF,EAAIG,eAETC,GADKJ,EAAIK,MAAMC,GACVN,EAAIO,KAAKC,QACdC,EAAKT,EAAIU,MAAMV,EAAIO,MAAM,SAAUI,EAAMC,GAC3C,IAAIC,EAAQb,EAAIc,WAAWH,GACvBI,EAAkB,SAAbf,EAAIgB,KAAkBhB,EAAIiB,cAAcL,GAAS,KACtDM,EACW,YAAblB,EAAIgB,MAAwBhB,EAAImB,cAAgBP,EAE5C,KADAZ,EAAIiB,cAAcL,GAExB,MAAO,CACLC,MAAOA,EACPE,GAAIA,EACJG,GAAIA,MAGRlB,EAAIoB,IAAIC,KAAOC,OAAOC,OACpB,GACA,CACEC,MAAO,CACLpB,GAAIA,EACJK,GAAIA,MAKRgB,GAAmB,EACnBC,EAAkB,GACtB3B,EAAO4B,eAAgB,G,iCC/BvB,yHAA40B,eAAG,G,yGCyF/0B,CACAC,gBACAC,OAGAb,MACAc,YACAC,eAIAC,WACAF,YACAC,eAGAxB,MACAuB,WACAC,mBACA,WAIAE,SACAH,YACAC,WAGAG,aACAJ,YACAC,mBAGAI,eACAL,YACAC,mBAGAK,MACAN,YACAC,mBAGAM,WACAP,aACAC,YAEAO,UACAR,YACAC,iBAGAQ,UAEAtB,yBAAA,WACA,mBACA,gBAEA,wDACA,gCAGA,qCAKAI,gBACA,OACAF,iBAGAqB,OACAP,SACAQ,oBACA,qBAEAC,eAGAC,SAEAC,0BACA,UACA,oBACA,oBAAAhC,aAGA,a,iCCjLA,yHAA2jD,eAAG,G","file":"tuniao-ui/components/tn-steps/tn-steps.js","sourcesContent":["import { render, staticRenderFns, recyclableRender, components } from \"./tn-steps.vue?vue&type=template&id=e96e5408&scoped=true&\"\nvar renderjs\nimport script from \"./tn-steps.vue?vue&type=script&lang=js&\"\nexport * from \"./tn-steps.vue?vue&type=script&lang=js&\"\nimport style0 from \"./tn-steps.vue?vue&type=style&index=0&id=e96e5408&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"e96e5408\",\n null,\n false,\n components,\n renderjs\n)\n\ncomponent.options.__file = \"tuniao-ui/components/tn-steps/tn-steps.vue\"\nexport default component.exports","export * from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--17-0!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/template.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-steps.vue?vue&type=template&id=e96e5408&scoped=true&\"","var components\nvar render = function () {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n var g0 = _vm.list.length\n var l0 = _vm.__map(_vm.list, function (item, index) {\n var $orig = _vm.__get_orig(item)\n var m0 = _vm.mode === \"icon\" ? _vm.iconModeClass(index) : null\n var m1 =\n _vm.mode === \"dotIcon\" && !(_vm.currentIndex <= index)\n ? _vm.iconModeClass(index)\n : null\n return {\n $orig: $orig,\n m0: m0,\n m1: m1,\n }\n })\n _vm.$mp.data = Object.assign(\n {},\n {\n $root: {\n g0: g0,\n l0: l0,\n },\n }\n )\n}\nvar recyclableRender = false\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns, recyclableRender, components }","import mod from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--13-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-steps.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--13-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-steps.vue?vue&type=script&lang=js&\"","<template>\r\n <view\r\n class=\"tn-steps-class tn-steps\"\r\n :style=\"{\r\n flexDirection: direction\r\n }\"\r\n >\r\n <view\r\n v-for=\"(item, index) in list\"\r\n :key=\"index\"\r\n class=\"tn-steps__item\"\r\n :class=\"[`tn-steps__item--${direction}`]\"\r\n @tap=\"clickStepItem(index)\"\r\n >\r\n <!-- 数值模式 -->\r\n <view\r\n v-if=\"mode === 'number'\"\r\n class=\"tn-steps__item__number\"\r\n :style=\"{\r\n backgroundColor: currentIndex <= index ? 'transparent' : activeColor,\r\n borderColor: currentIndex <= index ? inActiveColor : activeColor\r\n }\"\r\n >\r\n <text\r\n class=\"tn-steps__item__number__text\"\r\n :class=\"[{'tn-steps__item__number__text--visible': currentIndex <= index}]\"\r\n :style=\"{\r\n color: currentIndex <= index ? inActiveColor : activeColor\r\n }\"\r\n >\r\n {{ index + 1}}\r\n </text>\r\n <view class=\"tn-steps__item__number__icon\" :class=\"[`tn-icon-${item.icon || icon}`,{'tn-steps__item__number__icon--visible': currentIndex > index}]\"></view>\r\n </view>\r\n \r\n <!-- 点模式 -->\r\n <view\r\n v-if=\"mode === 'dot'\"\r\n class=\"tn-steps__item__dot\"\r\n :style=\"{\r\n backgroundColor: currentIndex <= index ? inActiveColor : activeColor,\r\n\t\t fontSize:fontSize\r\n }\"\r\n ></view>\r\n \r\n <!-- 图标模式 -->\r\n <view\r\n v-if=\"mode === 'icon'\"\r\n class=\"tn-steps__item__icon\"\r\n :class=\"[iconModeClass(index)]\"\r\n :style=\"{\r\n color: currentIndex <= index ? inActiveColor : activeColor,\r\n\t\t fontSize:fontSize\r\n }\"\r\n ></view>\r\n \r\n <!-- 点图标模式 -->\r\n <view v-if=\"mode === 'dotIcon'\" class=\"tn-steps__item__dot-icon\">\r\n <view v-if=\"currentIndex <= index\" class=\"tn-steps__item__dot-icon--dot\" :style=\"{backgroundColor: inActiveColor}\"></view>\r\n <view v-else class=\"tn-steps__item__dot-icon--icon\" :class=\"[iconModeClass(index)]\" :style=\"{color: activeColor}\"></view>\r\n </view>\r\n \r\n <!-- 步骤下的文字 -->\r\n <text\r\n v-if=\"showTitle\"\r\n class=\"tn-steps__item__text tn-text-ellipsis\"\r\n :class=\"[`tn-steps__item__text--${direction}`]\"\r\n :style=\"{\r\n color: currentIndex <= index ? inActiveColor : activeColor,\r\n\t\t fontSize:fontSize\r\n }\"\r\n >\r\n {{ item.name }}\r\n </text>\r\n \r\n <!-- 连接的横线 -->\r\n <view\r\n v-if=\"index < list.length - 1\"\r\n class=\"tn-steps__item__line\"\r\n :class=\"[`tn-steps__item__line--${mode}`]\"\r\n :style=\"{\r\n borderColor: currentIndex <= index + 1 ? inActiveColor : activeColor\r\n }\"\r\n ></view>\r\n </view>\r\n </view>\n</template>\n\n<script>\r\n export default {\r\n name: 'tn-steps',\r\n props: {\r\n // 模式类型\r\n // dot -> 点 number -> 数字 icon -> 图标 dotIcon -> 点图标\r\n mode: {\r\n type: String,\r\n default: 'dot'\r\n },\r\n // 步骤条的方向\r\n // row -> 横向 column -> 竖向\r\n direction: {\r\n type: String,\r\n default: 'row'\r\n },\r\n // 步骤条数据\r\n list: {\r\n type: Array,\r\n default() {\r\n return []\r\n }\r\n },\r\n // 当前激活的步数\r\n current: {\r\n type: Number,\r\n default: 0\r\n },\r\n // 激活步骤的颜色\r\n activeColor: {\r\n type: String,\r\n default: '#01BEFF'\r\n },\r\n // 未激活步骤的颜色\r\n inActiveColor: {\r\n type: String,\r\n default: '#AAAAAA'\r\n },\r\n // 激活后显示的图标，在数字模式下有效\r\n icon: {\r\n type: String,\r\n default: 'success'\r\n },\r\n // 是否显示标题\r\n showTitle: {\r\n type: Boolean,\r\n default: true\r\n },\r\n\t fontSize:{\r\n\t\t type: String,\r\n\t\t default: '14px'\r\n\t }\r\n },\r\n computed: {\r\n // icon模式下图标的值\r\n iconModeClass() {\r\n return (index) => {\r\n const item = this.list[index]\r\n // 状态被选中并且对应数据下存在selectIcon属性\r\n if (this.currentIndex > index && item.hasOwnProperty('selectIcon')) {\r\n return `tn-icon-${item.selectIcon}`\r\n } else {\r\n // 未选中\r\n return `tn-icon-${item.icon || this.icon}`\r\n }\r\n }\r\n }\r\n },\r\n data() {\r\n return {\r\n currentIndex: 0\r\n }\r\n },\r\n watch: {\r\n current: {\r\n handler(val) {\r\n this.currentIndex = val\r\n },\r\n immediate: true\r\n }\r\n },\r\n methods: {\r\n // 点击了某一个选项\r\n clickStepItem(index) {\r\n const chooseIndex = index + 1\r\n this.currentIndex = chooseIndex\r\n this.$emit('click', { index: chooseIndex })\r\n }\r\n }\r\n }\n</script>\n\n<style lang=\"scss\" scoped>\r\n \r\n $tn-steps-item-number-width: 44rpx;\r\n $tn-steps-item-dot-width: 20rpx;\r\n \r\n .tn-steps {\r\n display: flex;\r\n flex-direction: row;\r\n \r\n &__item {\r\n flex: 1;\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n min-width: 100rpx;\r\n font-size: 28rpx;\r\n text-align: center;\r\n \r\n &__number {\r\n // display: flex;\r\n // flex-wrap: wrap;\r\n // align-items: center;\r\n // justify-content: center;\r\n position: relative;\r\n width: $tn-steps-item-number-width;\r\n height: $tn-steps-item-number-width;\r\n line-height: calc(#{$tn-steps-item-number-width} - 2rpx);\r\n border: 1px solid #AAAAAA;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n transition: all 0.3s linear;\r\n \r\n &__text {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n margin: auto;\r\n transition: inherit;\r\n transform: translateY(-#{$tn-steps-item-number-width});\r\n \r\n &--visible {\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n &__icon {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n margin: auto;\r\n color: #FFFFFF;\r\n transition: all 0.3s linear;\r\n transform: translateY(#{$tn-steps-item-number-width});\r\n \r\n &--visible {\r\n transform: translateY(0);\r\n }\r\n }\r\n }\r\n \r\n &__dot {\r\n width: $tn-steps-item-dot-width;\r\n height: $tn-steps-item-dot-width;\r\n display: flex;\r\n flex-direction: row;\r\n border-radius: 50%;\r\n transition: all 0.3s linear;\r\n \r\n &--icon {\r\n width: $tn-steps-item-number-width;\r\n height: $tn-steps-item-number-width;\r\n }\r\n }\r\n \r\n &__icon {\r\n width: $tn-steps-item-number-width;\r\n height: $tn-steps-item-number-width;\r\n font-size: $tn-steps-item-number-width;\r\n transition: all 0.3s linear;\r\n }\r\n \r\n &__dot-icon {\r\n width: $tn-steps-item-number-width;\r\n height: $tn-steps-item-number-width;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.3s linear;\r\n \r\n &--dot {\r\n width: $tn-steps-item-dot-width;\r\n height: $tn-steps-item-dot-width;\r\n border-radius: 50%;\r\n transition: inherit;\r\n }\r\n \r\n &--icon {\r\n width: $tn-steps-item-number-width;\r\n height: $tn-steps-item-number-width;\r\n font-size: $tn-steps-item-number-width;\r\n transition: inherit;\r\n }\r\n }\r\n \r\n &__text {\r\n transition: all 0.3s linear;\r\n &--row {\r\n margin-top: 14rpx;\r\n }\r\n \r\n &--column {\r\n margin-left: 14rpx;\r\n }\r\n }\r\n \r\n &__line {\r\n position: absolute;\r\n z-index: 0;\r\n vertical-align: middle;\r\n transition: all 0.3s linear;\r\n }\r\n \r\n &--row {\r\n display: flex;\r\n flex-direction: column;\r\n \r\n .tn-steps__item__line {\r\n border-bottom-width: 1px;\r\n border-bottom-style: solid;\r\n width: 50%;\r\n left: 75%;\r\n \r\n &--dot {\r\n top: calc(#{$tn-steps-item-dot-width} / 2);\r\n }\r\n \r\n &--number, &--icon, &--dotIcon {\r\n top: calc(#{$tn-steps-item-number-width} / 2);\r\n }\r\n }\r\n }\r\n \r\n &--column {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n min-height: 120rpx;\r\n \r\n .tn-steps__item__line {\r\n border-left-width: 1px;\r\n border-left-style: solid;\r\n height: 50%;\r\n top: 75%;\r\n \r\n &--dot {\r\n left: calc(#{$tn-steps-item-dot-width} / 2);\r\n }\r\n \r\n &--number, &--icon, &--dotIcon {\r\n left: calc(#{$tn-steps-item-number-width} / 2);\r\n }\r\n }\r\n }\r\n }\r\n }\n</style>\n","import mod from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-2!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-5!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-steps.vue?vue&type=style&index=0&id=e96e5408&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-2!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-5!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-steps.vue?vue&type=style&index=0&id=e96e5408&lang=scss&scoped=true&\""],"sourceRoot":""}
|
