xt-element-ui 2.0.2 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",
@@ -36,7 +36,8 @@
     "echarts": "^6.1.0",
     "element-ui": "^2.15.14",
     "sass": "^1.32.13",
-    "vue-server-renderer": "^2.7.14"
+    "vue-server-renderer": "^2.7.14",
+    "xt-element-ui": "^2.0.2"
   },
   "keywords": [
     "vue",

package/src/components/index.scss

@@ -40,4 +40,7 @@
 @import './xt-tabs/style/index.scss';
 
 // Badge 组件样式
-@import './xt-badge/style/index.scss';
+@import './xt-badge/style/index.scss';
+
+// ScrollArrow 组件样式
+@import './xt-scroll-arrow/style/index.scss';

package/src/components/xt-scroll-arrow/index.js

@@ -0,0 +1,8 @@
+import XtScrollArrow from './index.vue'
+
+XtScrollArrow.install = function (Vue) {
+  Vue.component(XtScrollArrow.name, XtScrollArrow)
+}
+
+export default XtScrollArrow
+export { XtScrollArrow }

package/src/components/xt-scroll-arrow/index.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="xt-scroll-arrow" :class="[`xt-scroll-arrow--${direction}`]" :style="containerStyle">
+    <div 
+      v-if="showLeftArrow" 
+      class="xt-scroll-arrow__btn xt-scroll-arrow__btn--left"
+      @click="scrollLeft"
+    >
+      <i class="el-icon-arrow-left"></i>
+    </div>
+
+    <div ref="scrollContainer" class="xt-scroll-arrow__content" @scroll="handleScroll">
+      <slot></slot>
+    </div>
+
+    <div 
+      v-if="showRightArrow" 
+      class="xt-scroll-arrow__btn xt-scroll-arrow__btn--right"
+      @click="scrollRight"
+    >
+      <i class="el-icon-arrow-right"></i>
+    </div>
+
+    <div 
+      v-if="showTopArrow && direction === 'vertical'" 
+      class="xt-scroll-arrow__btn xt-scroll-arrow__btn--top"
+      @click="scrollTop"
+    >
+      <i class="el-icon-arrow-up"></i>
+    </div>
+
+    <div 
+      v-if="showBottomArrow && direction === 'vertical'" 
+      class="xt-scroll-arrow__btn xt-scroll-arrow__btn--bottom"
+      @click="scrollBottom"
+    >
+      <i class="el-icon-arrow-down"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XtScrollArrow',
+  props: {
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator: (val) => ['horizontal', 'vertical'].includes(val)
+    },
+    scrollStep: {
+      type: Number,
+      default: 100
+    },
+    autoHide: {
+      type: Boolean,
+      default: true
+    },
+    height: {
+      type: [String, Number],
+      default: ''
+    },
+    width: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      showLeftArrow: false,
+      showRightArrow: false,
+      showTopArrow: false,
+      showBottomArrow: false
+    }
+  },
+  computed: {
+    containerStyle() {
+      const style = {}
+      if (this.height) {
+        style.height = typeof this.height === 'number' ? `${this.height}px` : this.height
+      }
+      if (this.width) {
+        style.width = typeof this.width === 'number' ? `${this.width}px` : this.width
+      }
+      return style
+    }
+  },
+  watch: {
+    direction() {
+      this.$nextTick(() => {
+        this.checkScroll()
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.checkScroll()
+    })
+    this.addResizeObserver()
+  },
+  beforeDestroy() {
+    this.removeResizeObserver()
+  },
+  methods: {
+    addResizeObserver() {
+      if (typeof ResizeObserver !== 'undefined') {
+        this.resizeObserver = new ResizeObserver(() => {
+          this.$nextTick(() => {
+            this.checkScroll()
+          })
+        })
+        const container = this.$refs.scrollContainer
+        if (container) {
+          this.resizeObserver.observe(container)
+        }
+      }
+    },
+    removeResizeObserver() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+      }
+    },
+    checkScroll() {
+      const container = this.$refs.scrollContainer
+      if (!container) return
+
+      if (this.direction === 'horizontal') {
+        const scrollLeft = container.scrollLeft
+        const scrollWidth = container.scrollWidth
+        const clientWidth = container.clientWidth
+        const maxScroll = scrollWidth - clientWidth
+
+        this.showTopArrow = false
+        this.showBottomArrow = false
+
+        if (this.autoHide) {
+          this.showLeftArrow = scrollLeft > 0
+          this.showRightArrow = maxScroll > 0 && scrollLeft < maxScroll
+        } else {
+          this.showLeftArrow = maxScroll > 0
+          this.showRightArrow = maxScroll > 0
+        }
+      } else {
+        const scrollTop = container.scrollTop
+        const scrollHeight = container.scrollHeight
+        const clientHeight = container.clientHeight
+        const maxScroll = scrollHeight - clientHeight
+
+        this.showLeftArrow = false
+        this.showRightArrow = false
+
+        if (this.autoHide) {
+          this.showTopArrow = scrollTop > 0
+          this.showBottomArrow = maxScroll > 0 && scrollTop < maxScroll
+        } else {
+          this.showTopArrow = maxScroll > 0
+          this.showBottomArrow = maxScroll > 0
+        }
+      }
+    },
+    handleScroll() {
+      this.checkScroll()
+      this.$emit('scroll', this.$refs.scrollContainer)
+    },
+    scrollLeft() {
+      const container = this.$refs.scrollContainer
+      if (container) {
+        container.scrollBy({ left: -this.scrollStep, behavior: 'smooth' })
+      }
+    },
+    scrollRight() {
+      const container = this.$refs.scrollContainer
+      if (container) {
+        container.scrollBy({ left: this.scrollStep, behavior: 'smooth' })
+      }
+    },
+    scrollTop() {
+      const container = this.$refs.scrollContainer
+      if (container) {
+        container.scrollBy({ top: -this.scrollStep, behavior: 'smooth' })
+      }
+    },
+    scrollBottom() {
+      const container = this.$refs.scrollContainer
+      if (container) {
+        container.scrollBy({ top: this.scrollStep, behavior: 'smooth' })
+      }
+    }
+  }
+}
+</script>

package/src/components/xt-scroll-arrow/style/index.scss

@@ -0,0 +1,89 @@
+@import '../../../styles/variables.scss';
+
+.xt-scroll-arrow {
+  position: relative;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+
+  &--horizontal {
+    flex-direction: row;
+  }
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &__content {
+    flex: 1;
+    overflow: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__btn {
+    position: absolute;
+    z-index: 10;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    transition: all 0.3s ease;
+    border: none;
+    padding: 0;
+
+    &:hover {
+      background: rgba(255, 255, 255, 1);
+      transform: scale(1.1);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+
+    &--left {
+      left: 8px;
+    }
+
+    &--right {
+      right: 8px;
+    }
+
+    &--top {
+      top: 8px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      &:hover {
+        transform: translateX(-50%) scale(1.1);
+      }
+
+      &:active {
+        transform: translateX(-50%) scale(0.95);
+      }
+    }
+
+    &--bottom {
+      bottom: 8px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      &:hover {
+        transform: translateX(-50%) scale(1.1);
+      }
+
+      &:active {
+        transform: translateX(-50%) scale(0.95);
+      }
+    }
+  }
+}

package/src/index.js

@@ -37,6 +37,7 @@ import XtDatePicker from './components/xt-date-picker'
 import XtChart from './components/xt-chart'  // XtChart 组件（基于 ECharts 封装）
 import XtIcon from './components/xt-icon'    // XtIcon 组件（支持 el-icon / svg / 自定义字体）
 import XtTable from './components/xt-table'  // XtTable 组件（基于 ElementUI Table 封装）
+import XtScrollArrow from './components/xt-scroll-arrow'
 
 
 const components = [
@@ -60,7 +61,8 @@ const components = [
   XtDatePicker,
   XtChart,
   XtIcon,
-  XtTable
+  XtTable,
+  XtScrollArrow
 ]
 
 const install = function (Vue, options = {}) {
@@ -129,7 +131,8 @@ export default {
   XtBadge,
   XtDatePicker,
   XtIcon,
-  XtTable
+  XtTable,
+  XtScrollArrow
 }
 
 // XtChart 组件按需导出（使用时需自行安装 echarts 依赖）