@arco-design/web-vue/es/tabs/tabs-nav-ink.js

Arco Design Vue 2.0: A Vue.js 3 UI Library

import { defineComponent, toRefs, ref, computed, onMounted, nextTick, onUpdated, openBlock, createElementBlock, normalizeClass, normalizeStyle } from "vue";
import { getPrefixCls } from "../_utils/global-config.js";
import _export_sfc from "../_virtual/plugin-vue_export-helper.js";
const _sfc_main = defineComponent({
  name: "TabsNavInk",
  props: {
    activeTabRef: {
      type: Object
    },
    direction: {
      type: String
    },
    disabled: Boolean,
    animation: Boolean
  },
  setup(props) {
    const { activeTabRef } = toRefs(props);
    const prefixCls = getPrefixCls("tabs-nav-ink");
    const position = ref(0);
    const size = ref(0);
    const style = computed(() => {
      if (props.direction === "vertical") {
        return {
          top: `${position.value}px`,
          height: `${size.value}px`
        };
      }
      return {
        left: `${position.value}px`,
        width: `${size.value}px`
      };
    });
    const getInkStyle = () => {
      if (activeTabRef.value) {
        const _position = props.direction === "vertical" ? activeTabRef.value.offsetTop : activeTabRef.value.offsetLeft;
        const _size = props.direction === "vertical" ? activeTabRef.value.offsetHeight : activeTabRef.value.offsetWidth;
        if (_position !== position.value || _size !== size.value) {
          position.value = _position;
          size.value = _size;
        }
      }
    };
    onMounted(() => {
      nextTick(() => getInkStyle());
    });
    onUpdated(() => {
      getInkStyle();
    });
    const cls = computed(() => [
      prefixCls,
      {
        [`${prefixCls}-animation`]: props.animation,
        [`${prefixCls}-disabled`]: props.disabled
      }
    ]);
    return {
      prefixCls,
      cls,
      style
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    class: normalizeClass(_ctx.cls),
    style: normalizeStyle(_ctx.style)
  }, null, 6);
}
var TabsNavInk = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { TabsNavInk as default };