dolphin-weex-ui 2.2.0 → 2.2.1

package/packages/dof-step-flow-h/index.vue

@@ -1,209 +1,217 @@
 <template>
-    <div class="step-body">
-        <div class="step-item-wrapper" :style="[rowStyles]" ref="wrapper">
-            <div class="step-flow-wrapper">
-                <template v-for="(item, index) in formattedList">
-                    <div v-if="index < formattedList.length-1" :class="['step-line', showLine&&'hline']" :key="'line'+index" :style="[item.lineStyles, linePos[index]]"></div>
-                </template>
-            </div>
-            <div v-for="(item, index) in formattedList" :key="'desc'+index" class="step-item" :ref="'item'+index" :style="[item.columnStyles]">
-                <div :class="['step-point']" :style="[item.pointStyles]" :ref="'point'+index"></div>
-                <text :class="['step-desc']" :style="[item.descStyles]">{{item.desc}}</text>
-            </div>
-        </div>
+  <div class="step-body">
+    <div class="step-item-wrapper" :style="[rowStyles]" ref="wrapper">
+      <div class="step-flow-wrapper">
+        <template v-for="(item, index) in formattedList">
+          <div
+            v-if="index < formattedList.length - 1"
+            :class="['step-line', showLine && 'hline']"
+            :key="'line' + index"
+            :style="{ ...item.lineStyles, ...linePos[index] }"
+          ></div>
+        </template>
+      </div>
+      <div
+        v-for="(item, index) in formattedList"
+        :key="'desc' + index"
+        class="step-item"
+        :ref="'item' + index"
+        :style="[item.columnStyles]"
+      >
+        <div :class="['step-point']" :style="[item.pointStyles]" :ref="'point' + index"></div>
+        <text :class="['step-desc']" :style="[item.descStyles]">{{ item.desc }}</text>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 const domModule = weex.requireModule('dom')
 export default {
-    props: {
-        list: {
-            type: Array,
-            default: ()=>[]
-        },
-        stylesConfig: {
-            type: Object,
-            default: function () {
-                return {
-                }
-            }
-        },
-        showLine:{
-            type: Boolean,
-            default: false
-        }
+  props: {
+    list: {
+      type: Array,
+      default: () => []
     },
-    data() {
-        return {
-            componentWidth: 750,
-            activeIndex: -1,
-            linePos: []
-        }
+    stylesConfig: {
+      type: Object,
+      default: function() {
+        return {}
+      }
     },
-    watch: {
-        list(newVal) {
-            this.$nextTick(() => {
-                setTimeout(() => {
-                    this.init()
-                }, 100);
-            })
-        }
+    showLine: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      componentWidth: 750,
+      activeIndex: -1,
+      linePos: []
+    }
+  },
+  watch: {
+    list(newVal) {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.init()
+        }, 100)
+      })
+    }
+  },
+  computed: {
+    formattedList() {
+      let formattedList = this.formatList(this.list)
+      return formattedList
     },
-    computed: {
-        formattedList() {
-            return this.formatList(this.list)
-        },
-        rowStyles() {
-            const {
-                rowStyles = {}
-            } = this.stylesConfig
+    rowStyles() {
+      const { rowStyles = {} } = this.stylesConfig
 
-            //处理行
-            return { ...rowStyles }
-        }
+      //处理行
+      return { ...rowStyles }
+    }
+  },
+  methods: {
+    init() {
+      this.list.forEach(item => {
+        this.linePos.push({ width: 0 })
+      })
+      // 确定第一条线的左边距离
+      if (this.linePos.length > 0) {
+        domModule.getComponentRect(this.$refs['item0'][0], data => {
+          this.linePos[0]['margin-left'] = data.size.width / 2 + 8 + 'px'
+        })
+      }
+      this.list.forEach((item, index, arr) => {
+        // 确定条线的宽度
+        domModule.getComponentRect(this.$refs['point' + index][0], data => {
+          if (index == 0) {
+            this.linePos[index]['data-right'] = data.size.right
+          } else {
+            this.linePos[index]['data-right'] = data.size.right
+            this.linePos[index - 1]['width'] = data.size.left - this.linePos[index - 1]['data-right'] + 'px'
+          }
+        })
+      })
     },
-    methods: {
-        init() {
-            this.list.forEach((item) => {
-                this.linePos.push({ width: 0 })
-            })
-            // 确定第一条线的左边距离
-            if (this.linePos.length > 0) {
-                domModule.getComponentRect(this.$refs['item0'][0], (data) => {
-                    this.linePos[0]['margin-left'] = (data.size.width / 2) + 8
-                })
-            }
-            this.list.forEach((item, index, arr) => {
-                // 确定条线的宽度
-                domModule.getComponentRect(this.$refs['point' + index][0], (data) => {
-                    if (index == 0) {
-                        this.linePos[index]['data-right'] = data.size.right
-                    } else {
-                        this.linePos[index]['data-right'] = data.size.right
-                        this.linePos[index - 1]['width'] = data.size.left - this.linePos[index - 1]['data-right']
-                    }
-                })
-            })
-        },
-        formatList(list) {
-            let tempList = JSON.parse(JSON.stringify(list))
-            const {
-                activedColor = '#00de51',
-                pointStyles = {},
-                lineStyles = {},
-                descStyles = {},
-                columnStyles = {}
-            } = this.stylesConfig
+    formatList(list) {
+      let tempList = JSON.parse(JSON.stringify(list))
+      const {
+        activedColor = '#00de51',
+        pointStyles = {},
+        lineStyles = {},
+        descStyles = {},
+        columnStyles = {}
+      } = this.stylesConfig
 
-            tempList.forEach((item, index) => {
-                if (item.isActived) this.activeIndex = index
-            })
+      tempList.forEach((item, index) => {
+        if (item.isActived) this.activeIndex = index
+      })
 
-            let result = []
-            result = tempList.map((item, index) => {
-                //处理列
-                item['columnStyles'] = { ...item['columnStyles'], ...columnStyles }
+      let result = []
+      result = tempList.map((item, index) => {
+        //处理列
+        item['columnStyles'] = { ...item['columnStyles'], ...columnStyles }
 
-                //处理节点point
-                item['pointStyles'] = { ...item['pointStyles'], ...pointStyles }
+        //处理节点point
+        item['pointStyles'] = { ...item['pointStyles'], ...pointStyles }
 
-                if (index <= this.activeIndex) {
-                    item['pointStyles']['background-color'] = activedColor
-                    item['pointStyles']['opacity'] = 1
-                }
+        if (index <= this.activeIndex) {
+          item['pointStyles']['background-color'] = activedColor
+          item['pointStyles']['opacity'] = 1
+        }
 
-                //处理节点线条
-                item['lineStyles'] = { ...item['lineStyles'], ...lineStyles }
-                if (index < this.activeIndex) {
-                    item['lineStyles']['border-top-color'] = activedColor
-                    item['lineStyles']['opacity'] = 1
-                }
+        //处理节点线条
+        item['lineStyles'] = { ...item['lineStyles'], ...lineStyles }
+        if (index < this.activeIndex) {
+          item['lineStyles']['border-top-color'] = activedColor
+          item['lineStyles']['opacity'] = 1
+        }
 
-                //处理内容
-                item['descStyles'] = { ...item['descStyles'], ...descStyles }
-                if (item.isActived && activedColor) {
-                    item['descStyles']['color'] = activedColor
-                    item['descStyles']['opacity'] = 1
-                }
+        //处理内容
+        item['descStyles'] = { ...item['descStyles'], ...descStyles }
+        if (item.isActived && activedColor) {
+          item['descStyles']['color'] = activedColor
+          item['descStyles']['opacity'] = 1
+        }
 
-                return item
-            })
+        return item
+      })
 
-            console.log(JSON.stringify(result))
-            return result
-        }
-    },
-    mounted() {
-        this.$nextTick(() => {
-            setTimeout(() => {
-                this.init()
-            }, 100);
-        })
+      return result
     }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.init()
+      }, 100)
+    })
+  }
 }
 </script>
 
 <style scoped>
 .step-body {
-    flex-direction: column;
-    justify-content: center;
-    align-items: stretch;
-    overflow: hidden;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  overflow: hidden;
 }
 .step-flow-wrapper {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    height: 16px;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    overflow: hidden;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 16px;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  overflow: hidden;
 }
 .step-line {
-    width: 0px;
-    height: 2px;
-    border-top-color: #e5e5e8;
-    border-top-width: 2px;
-    border-top-style: solid;
-    margin-left: 8px;
-    margin-right: 8px;
+  width: 0px;
+  height: 2px;
+  border-top-color: #e5e5e8;
+  border-top-width: 2px;
+  border-top-style: solid;
+  margin-left: 8px;
+  margin-right: 8px;
 }
 
-.hline{
-    border-top-width: 4px;
+.hline {
+  border-top-width: 4px;
 }
 .step-item-wrapper {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-start;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
 }
 .step-item {
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    overflow: hidden;
-    word-wrap: break-word;
-    word-break: break-all;
-    padding-left: 8px;
-    padding-right: 8px;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  overflow: hidden;
+  word-wrap: break-word;
+  word-break: break-all;
+  padding-left: 8px;
+  padding-right: 8px;
 }
 .step-point {
-    width: 16px;
-    height: 16px;
-    background-color: #c7c7cc;
-    border-radius: 32px;
+  width: 16px;
+  height: 16px;
+  background-color: #c7c7cc;
+  border-radius: 32px;
 }
 .step-desc {
-    padding-top: 20px;
-    font-family: PingFangSC-Regular;
-    font-size: 26px;
-    color: #8a8a8f;
-    text-align: center;
+  padding-top: 20px;
+  font-family: PingFangSC-Regular;
+  font-size: 26px;
+  color: #8a8a8f;
+  text-align: center;
 }
 .active-step {
-    color: #000000;
+  color: #000000;
 }
 </style>