ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-tabs/slider.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"slider.mjs","sources":["../../../../../src/components/ivue-tabs/slider.vue"],"sourcesContent":["<template>\r\n  <div class=\"ivue-tabs-slider-wrapper\" :style=\"sliderWrapperStyles\">\r\n    <div :class=\"sliderClasses\" :style=\"sliderStyles\"></div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, computed, ref, onMounted } from 'vue';\r\n\r\n// type\r\nimport { Props } from './types/slider';\r\n\r\nfunction isCssColor(color: string) {\r\n  return !!color && !!color.match(/^(#|(rgb|hsl)a?\\()/);\r\n}\r\n\r\nexport default defineComponent({\r\n  name: 'ivue-tabs-slider',\r\n  props: {\r\n    /**\r\n     * 颜色\r\n     *\r\n     * @type {String}\r\n     */\r\n    color: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    /**\r\n     * 滑动条位置\r\n     *\r\n     * @type {Number}\r\n     */\r\n    sliderLeft: {\r\n      type: Number,\r\n      default: 0,\r\n    },\r\n    /**\r\n     * 滑动条宽度\r\n     *\r\n     * @type {Number}\r\n     */\r\n    sliderWidth: {\r\n      type: Number,\r\n      default: 0,\r\n    },\r\n  },\r\n  setup(props: Props) {\r\n    // 是否初始化完成\r\n    const isInit = ref(false);\r\n\r\n    // computed\r\n\r\n    const sliderWrapperStyles = computed(() => {\r\n      const regexp = new RegExp(/[a-zA-Z]/g);\r\n\r\n      // 是否有单位\r\n      const isUnitSliderLeft = regexp.test(`${props.sliderLeft}`);\r\n      const isUnitSliderWidth = regexp.test(`${props.sliderWidth}`);\r\n\r\n      return {\r\n        left: !isUnitSliderLeft ? `${props.sliderLeft}px` : props.sliderLeft,\r\n        width: !isUnitSliderWidth\r\n          ? `${props.sliderWidth}px`\r\n          : props.sliderWidth,\r\n        transition: isInit.value ? '' : 'none 0s',\r\n      };\r\n    });\r\n\r\n    const sliderClasses = computed(() => {\r\n      return {\r\n        'ivue-tabs-slider': true,\r\n        [`${props.color}`]: !isCssColor(props.color),\r\n      };\r\n    });\r\n\r\n    const sliderStyles = computed(() => {\r\n      let style = {};\r\n\r\n      if (isCssColor(props.color)) {\r\n        style = {\r\n          'background-color': `${props.color}`,\r\n          'border-color': `${props.color}`,\r\n        };\r\n      }\r\n\r\n      return style;\r\n    });\r\n\r\n    onMounted(() => {\r\n      setTimeout(() => {\r\n        isInit.value = true;\r\n      });\r\n    });\r\n\r\n    return {\r\n      // computed\r\n      sliderWrapperStyles,\r\n      sliderClasses,\r\n      sliderStyles,\r\n    };\r\n  },\r\n});\r\n</script>\r\n"],"names":["_openBlock","_createElementBlock","_normalizeStyle","_normalizeClass"],"mappings":";;;;AACY,SAAA,YAAC,IAA0B,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;AAAO,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CAAE,KAAmB,EAAA;AAAA,IAAA,KAAA,EAAA,0BAAA;AAAA,IAC/D,KAAA,EAAwDC,cAAA,CAAA,IAAA,CAAA,mBAAA,CAAA;AAAA,GAAA,EAAA;AAAA,uBAAtB,KAAE,EAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,aAAA,CAAA;AAAA;;;;;;;;"}