udxcms 1.0.9 → 1.0.10

package/dist/components/basicComponents/Input.vue

@@ -1,296 +0,0 @@
-<template>
-    <div class="container-input">
-        <div class="input">
-            <input ref="input" :class="{'disSelecr': hasEyeAnimation}" v-bind="$attrs" :type="newType" v-model="newValue" @blur="checkRule" @input='transNewVal' @keyup.enter="keyup" @focus="focus"/>
-            <div class="tool">
-                <div class="clear" @click="clear" v-show="clearable && newValue">
-                    <svg-icon class="svgIcon" icon-class="clear"></svg-icon>
-                </div>
-                <div class="eye" v-if="hasEye" @click="changePassWordStatus">
-                    <svg-icon class="svgIcon" :icon-class="!showPassWord ? 'close-eye' : 'open-eye'"></svg-icon>
-                </div>
-            </div>
-        </div>
-
-        <p class="err" v-show="errShow && showInnerErrShow">{{errInfo}}</p>
-    </div>
-</template>
-
-<script>
-import * as regulars from '../../config/const'
-import { calcDotDeal } from '../../utils/index'
-export default {
-    name: 'Input',
-    props: {
-        value: {
-            type: String,
-            default: ""
-        },
-        hasEye: {
-            type:Boolean,
-            default: false,
-        },
-        hasEyeAnimation: {
-            type: Boolean,
-            default: false
-        },
-        type: {
-            type: String,
-            default: "text"
-        },
-        rule: {
-            type: Object,
-        },
-        regularFn: {
-            type: Function,
-        },
-        clearable: {
-            type: Boolean,
-            default: true,
-        },
-        showInnerErrShow: {
-            type: Boolean,
-            default: true,
-        },
-        formType: {
-            type: Number,
-            default: 0,
-        },
-        isModel: {
-            type: String,
-            default: ''
-        },
-        isPaste: {
-            type: Boolean,
-            default: false
-        },
-        verifyMediate: {
-            type: Boolean,
-            default: false
-        }
-    },
-    computed: {
-        newType: function() {
-            if(this.hasEye && !this.showPassWord && !this.hasEyeAnimation) {
-                return "password"
-            } else if (this.hasEye && this.showPassWord || this.hasEyeAnimation){
-                return "text"
-            }
-            return this.type;
-        }
-    },
-    data() {
-        return {
-            newValue: "",
-            showPassWord: false,
-            errShow: false,
-            errInfo: "",
-            tempValue: "",
-            timer: null
-        }
-    },
-    watch: {
-        value(val, oldval) {
-            if(val !=oldval && !oldval || this.isModel) {
-                this.newValue = val
-            }
-        },
-        formType(val, oldval) {
-            if(val != oldval) {
-                this.newValue = ''
-                this.tempValue = ''
-            }
-        },
-        newValue: function(val, oldval) {
-            if(oldval!=val) {
-                let checkRefVal = this.tempValue.length ? this.tempValue : val
-                this.changeValue(checkRefVal)
-            }
-        },
-    },
-    methods: {
-        transNewVal(e) {
-            let val = e.target.value
-            this.newValue = val
-            if(e.inputType == 'insertFromPaste') {
-                this.dealReferralCode(val)
-                this.verifyMediate && this.checkRule()
-            }
-            if (this.hasEyeAnimation && !this.showPassWord) {
-                let current = e.data, tempValue = this.tempValue, inputType = e.inputType
-                if (inputType == 'insertFromPaste') {
-                    // deal with pase Code
-                    if (!~val.indexOf('●')) {
-                        this.tempValue = val
-                    } else {
-                        this.tempValue = calcDotDeal(val, tempValue)
-                    }
-                } else {
-                    if (current && current.length > 1) {
-                        // use for 360 chrome
-                        if (inputType != 'insertCompositionText') {
-                            this.tempValue += current
-                        }
-                    } else {
-                        if (tempValue.length && !current && (current != 0 || current !='0') && typeof current === 'object') {
-                            this.tempValue = tempValue.slice(0, val.length - tempValue.length)
-                        } else if (typeof current === 'undefined' && val.length){
-                            this.tempValue = calcDotDeal(val, tempValue)
-                        } else {
-                            // 处理全选之后输入导致值重复问题。
-                            // 比如输入123之后进行全选操作，然后在输入123，就会出现123123
-                            const inputValHasDot = val.indexOf('●');
-                            if (inputValHasDot >= 0) {
-                                if (typeof current !== 'undefined') this.tempValue += current
-                            } else {
-                                this.tempValue = val;
-                                // this.tempValue = '';
-                                // if (typeof current !== 'undefined') this.tempValue += current
-                            }
-                            // if (typeof current !== 'undefined') this.tempValue += current
-                        }
-                    }
-                }
-                clearTimeout(this.timer)
-                this.timer = setTimeout(() => {
-                    this.newValue = new Array(this.tempValue.length).fill('●').join('')
-                    this.checkRule()
-                }, 500)
-            } else {
-               this.verifyMediate && this.checkRule()
-            }
-        },
-        changeValue(val) {
-            this.$emit('input',val)
-        },
-        changePassWordStatus() {
-            this.showPassWord = !this.showPassWord;
-            if (this.showPassWord) {
-                this.newValue = this.hasEyeAnimation ? this.tempValue : this.newValue
-                this.tempValue = ''
-            } else {
-                this.tempValue = this.newValue
-                this.newValue = this.hasEyeAnimation ? new Array(this.tempValue.length).fill('●').join('') : this.newValue
-            }
-        },
-        clear() {
-            this.newValue = "";
-            this.tempValue = "";
-            this.$emit('input', "");
-            this.checkRule()
-        },
-        checkRule(e) {
-            if(!this.rule) {
-                return;
-            }
-            let reg,result;
-            let resVal = !this.showPassWord && this.hasEyeAnimation ? this.tempValue : this.newValue
-            if(this.rule.regular) {
-                result = this.regularFn(resVal)
-            }else {
-                reg = regulars[this.rule.name];
-                result  = reg.test(resVal);
-            }
-
-            if(!result) {
-                this.errInfo = this.rule.errInfo
-                this.errShow = true;
-            }else {
-                this.errShow = false;
-                this.errInfo = ''
-            }
-            this.$emit("getCheckResult", result, this.errInfo)
-        },
-        blur(e) {
-            this.$emit("blur",e)
-        },
-        keyup(e) {
-            this.$emit("keyup",e)
-        },
-        focus(e) {
-            this.$emit("focus",e)
-        },
-        dealReferralCode(val) {
-            if (this.isPaste) {
-                this.$emit('pasteFunc', val)
-            }
-        }
-    },
-
-}
-</script>
-
-<style lang="less" scoped>
-    .container-input {
-        position: relative;
-
-        .err {
-            // position: absolute;
-            // bottom: 0;
-            font-size: 14px;
-            color: #EA5455;
-            line-height: 22px;
-            letter-spacing: 0px;
-            text-align: left;
-            // white-space: nowrap;
-        }
-        .input {
-            position: relative;
-            .tool {
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-                right: 18px;
-                display: flex;
-                align-items: center;
-                z-index:2;
-                & > div {
-                    margin-left: 12px;
-                }
-                .clear {
-                    width: 12px;
-                    height: 12px;
-                    margin-top: -6px;
-                }
-                .eye {
-                    width: 16px;
-                    height: 16px;
-                }
-            }
-        }
-        input {
-            width: 100%;
-            height: 48px;
-            box-sizing: border-box;
-            padding: 12px 16px;
-            background: #ffffff;
-            border: 1px solid var(--border-color-base);
-            border-radius: 6px;
-            outline: none;
-            font-size: 16px;
-            font-family: Font;
-            text-align: left;
-            color: #303133;
-            letter-spacing: 0px;
-        }
-        input:active {
-            background: #ffffff;
-            border: 1px solid var(--primary-color);
-        }
-        input:focus {
-            background: #ffffff;
-            border: 1px solid var(--primary-color);
-            color: var(--primary-color);
-        }
-        input::-webkit-input-placeholder {
-            font-size: 12px;
-            font-family: Font;
-            text-align: left;
-            color: #909399;
-            line-height: 24px;
-        }
-    }
-    .svgIcon {
-        color: #C0C3CC;
-    }
-</style>

package/dist/components/basicComponents/LineProcess.vue

@@ -1,186 +0,0 @@
-<!--
- * @Author: 
- * @Date: 2020-12-11 18:43:35
- * @LastEditTime: 2021-08-02 11:55:32
- * @LastEditors: Lewis
- * @Description: 
--->
-
-<template>
-    <div class='line-process'>
-       <div class='line-box' :style="{width: width + 'px', height: height + 'px', }">
-            <div class='line-box-active' :style="{width: lineval + 'px', height: height + 'px'}">
-                <div class='line-box-active-dot'></div>
-            </div>
-            <div v-for="(item, index) in dataArr" :key="index" :class="['line-dot', {'active': dotActive >= index && item}, {'line-dot-act': item}]" :style="{'margin-left': distance + 'px'}"
-                v-show='index && index < dataArr.length - 1'>
-                <div class='mark-num' v-if='item && index == dataArr.length - 2'>{{index - 1}}{{dataArr.length === 4 ? '00%':'x'}}</div>
-            </div>
-       </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: 'LineProcess',
-        props: {
-            width: {
-                type: Number,
-                default: 700
-            },
-            height: {
-                type: Number,
-                default: 6
-            },
-            colors: {
-                type: Array,
-                default: function() {
-                    return []
-                }
-            },
-            currentRate: {
-                type: Number | String,
-                default: 1
-            },
-            val: {
-                type: Number | String,
-                default: 200
-            },
-            activitySpeed: {
-                type: Array,
-                default: function() {
-                    return []
-                }
-            }
-        },
-        data() {
-            return {
-                dotActive: 0,
-                distance: 100,
-                lineval: 0,
-                model: 1,
-                dataArr: [],
-                max: 1000
-            }
-        },
-        watch: {
-            val: {
-                handler() {
-                    this.init()
-                },
-                immediate: true
-            },
-            activitySpeed: {
-                handler() {
-                    this.init()
-                },
-                immediate: true               
-            }
-        },
-        mounted() {
-            this.init()
-        },
-        methods: {
-            init() {
-                let activitySpeed = this.activitySpeed || []
-                this.model = activitySpeed.length - 1
-                if (this.model >= 1) {
-                    this.formatLine(this.model)
-                }
-            },
-            formatLine(model) {
-                let activitySpeed = this.activitySpeed || []
-                this.max = activitySpeed[activitySpeed.length - 1]
-                switch(model * 1) {
-                    case 1:
-                        this.lineval = this.width * 2/3 * (this.val / this.max)
-                        this.dataArr = [0, ...activitySpeed, 0]
-                        this.distance = this.width / (this.dataArr.length - 1) - 10
-                        this.dotActive = 0
-                        break;
-                    case 2:
-                        this.dataArr = [...activitySpeed, 0]
-                        this.lineval = this.width * 2/3 * (this.val / this.max)
-                        this.distance = this.width / (this.dataArr.length - 1) - 10
-                        this.dotActive = Math.floor(this.lineval / this.distance)
-                         
-                        break;
-                    case 3:
-                        this.dataArr = [...activitySpeed, 0]
-                        this.lineval = this.width * 3/4 * this.val / this.max
-                        this.distance = this.width / (this.dataArr.length - 1) - 10
-                        this.dotActive = Math.floor(this.lineval / this.distance)
-                        break;
-                }
-            }
-        }
-    }
-</script>
-
-<style lang="less" scoped>
-    .line-process {
-        margin: 30px 0;
-    }
-    .line-box {
-        position: relative;
-        z-index: 3;
-        margin: 0 auto;
-        background: linear-gradient(63deg,rgba(255,255,255,0), rgba(255, 255, 255, .2) 42%, rgba(255,255,255,0) 100%);
-        display: flex;
-        // justify-content: space-around;
-    }
-    .line-dot {
-        display: inline-block;
-        position: relative;
-        border-radius: 50%;
-        margin-top: -4px;
-        background: black;
-    }
-    .line-dot-act {
-        width: 14px;
-        height: 14px;
-        border: 2px solid rgba(255, 255, 255, .6);
-    }
-    .line-dot.active {
-        background: white;
-        border: 1px solid white;
-    }
-    .mark-num {
-        position: absolute;
-        width: 50px;
-        left: -20px;
-        top: -20px;
-        text-align: center;
-        font-size: 14px;
-        font-family: FontItalic;
-        color: #ffffff;
-        font-style:italic;
-    }
-    .line-box-active {
-        position:absolute;
-        z-index:-1;
-        top: 0;
-        left: 0;
-        width: 100px;
-        background: linear-gradient(80deg,rgba(78,16,0,0) 7%, #4e1000 37%, #ba7f00 71%, #fefefe 95%);
-    }
-    .line-box-active-dot {
-        position: absolute;
-        right: -2px;
-        top: -4px;
-        height: 12px;
-        width: 12px;
-        border-radius: 50%;
-        background: rgba(255, 255, 255, 1);
-        box-shadow: 0 0 10px 6px rgba(255, 255, 255, .1);
-        animation: dotKey 3s infinite alternate;
-    }
-    @keyframes dotKey {
-        0% {
-            box-shadow: 0 0 10px 6px rgba(255, 255, 255, .1);
-        }
-        100% {
-            box-shadow: 0 0 10px 10px rgba(255, 255, 255, .4);
-        }
-    }
-</style>

package/dist/components/basicComponents/ListTag.vue

@@ -1,169 +0,0 @@
-<!--
- * @Author: Lewis
- * @Date: 2020-11-14 20:07:10
- * @LastEditTime: 2020-11-20 18:10:06
- * @LastEditors: Lewis
- * @Description: 
--->
-
-<template>
-  <div :class="['index-list', ListStyle]">
-    <div class="index-list-wrap" ref="indexWrap" @scroll="onListWrapScroll">
-      <slot></slot>
-    </div>
-    <div class="index-nav" v-show='isShowTag'>
-      <div :class="['index-tags', itemTagStyle]">
-        <div v-for="(tag, tagIndex) in tagList" :key="tagIndex" :class="['tag-item', {'active': currentIndex === tagIndex}]" @click='tagClick(tagIndex, $event)'>
-          {{ tag }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script type="text/javascript">
-const INDICATOR_INDURATION = 1000
-const TITLE_HEIGHT = 30
-export default {
-  name: 'index-list',
-  props: {
-    List: {
-      type: Array,
-      default: function() {
-        return []
-      }
-    },
-    ListStyle: {
-      type: String,
-      default: ""
-    },
-    itemContentH: {
-      type: Number,
-      default: 30
-    },
-    itemTagH: {
-      type: Number,
-      default: 20
-    },
-    itemTagStyle: {
-      type: String,
-      default: ''
-    },
-    itemContentKey: {
-      type: String,
-      default: 'code_list'
-    },
-    isShowTag: {
-      type: Boolean,
-      default: true
-    },
-    itemTagFunc: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      currentIndex: 0,
-      moving: false,
-      currentIndicator: '',
-      listHeight: [],
-      tagList: []
-    }
-  },
-  watch: {
-    List() {
-      this.init('watch')
-    }
-  },
-  created() {
-    this.listHeight = []
-    this.tagList = []
-    this.timer = null
-    this.scrollTimer = null
-  },
-  mounted() {
-    this.init('mounted')
-  },
-  methods: {
-    init(type) {
-      let height = 0
-      this.listHeight = [0]
-      this.tagList = []
-      this.List.map(v => {
-        v[this.itemContentKey].map(_v => {
-          height += this.itemContentH
-        })
-        this.tagList.push(v.letter)
-        if (v[this.itemContentKey].length) {
-          this.listHeight.push(height)
-        }
-      })
-    },
-    tagClick(index, e) {
-      this.currentIndex = index
-      this.$refs.indexWrap.scrollTop = this.listHeight[index]
-      e.returnValue = false
-      if (this.itemTagFunc) {
-        this.$emit(this.itemTagFunc, this.tagList[index])
-      }
-    },
-    clickItem(item) {
-      this.$emit('choose', item)
-    },
-    onListWrapScroll(e) {
-      clearTimeout(this.scrollTimer)
-      this.scrollTimer = setTimeout(() => {
-        let scrollTop = this.$refs.indexWrap.scrollTop
-        const listHeight = this.listHeight
-        for (let i = 0; i < listHeight.length - 1; i++) {
-          if ( scrollTop <= listHeight[i + 1] && scrollTop >= listHeight[i]) { 
-            this.currentIndex = i
-          }
-        }
-      }, 20)
-    }
-  },
-  destroyed() {
-    clearTimeout(this.timer)
-    clearTimeout(this.scrollTimer)
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.index-list {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  .index-list-wrap {
-    height: 100%;
-    overflow: auto;
-	  -webkit-overflow-scrolling: touch;
-  }
-  .index-nav {
-    position: absolute;
-    right: 20px;
-    top: 50%;
-    z-index: 100;
-    width: 20px;
-    padding: 20px 0;
-    text-align: center;
-    border-radius: 10;
-    transform: translateY(-50%);
-    .tag-item {
-      box-sizing: border-box;
-      padding: 1px;
-      font-size: 10px;
-      color: #babec4;
-      list-style: none;
-      cursor: pointer;
-      &:hover{
-        color: #303133;
-      }
-      &.active {
-        color: rgb(1, 101, 252);
-      }
-    }
-  }
-}
-</style>

package/dist/components/basicComponents/MenuTag.vue

@@ -1,64 +0,0 @@
-<template>
-    <div class='menu-tag' :style="{background: bg, top: top}">
-        {{content}}
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'menu-tag',
-    props: {
-        content: {
-            type: String,
-            default: ''
-        },
-        position: {
-            type: String,
-            default: 'top' // top, center, bottom
-        },
-        top: {
-            type: String,
-            default: '0px'
-        },
-        bg: {
-            type: String,
-            default: 'var(--menu-tag-color)'
-        }
-    },
-    data() {
-        return {
-            topArr: {
-                top: '0',
-                center: '50%',
-                bottom: '100%'
-            }
-        }
-    }
-}
-</script>
-
-<style lang="less" scoped>
-.menu-tag {
-    position: relative;
-    padding: 4px 6px;
-    border-radius: 4px;
-    font-size: 12px;
-    line-height: 1;
-    color: white;
-    font-family: Font;
-    width: fit-content;
-    height: fit-content;
-    margin-left: 0.6em;
-
-    &::after {
-        position: absolute;
-        content: '';
-        width: .4em;
-        height: .4em;
-        background: var(--menu-tag-arrow-color);
-        top: 50%;
-        left: 0;
-        transform: translateY(-50%) translateX(-50%) rotate(45deg);
-    }
-}
-</style>