@arco-design/web-vue
Version:
Arco Design Vue 2.0: A Vue.js 3 UI Library
72 lines (71 loc) • 2.08 kB
JavaScript
;
var vue = require("vue");
var globalConfig = require("../_utils/global-config.js");
var pluginVue_exportHelper = require("../_virtual/plugin-vue_export-helper.js");
const _sfc_main = vue.defineComponent({
name: "TabsNavInk",
props: {
activeTabRef: {
type: Object
},
direction: {
type: String
},
disabled: Boolean,
animation: Boolean
},
setup(props) {
const { activeTabRef } = vue.toRefs(props);
const prefixCls = globalConfig.getPrefixCls("tabs-nav-ink");
const position = vue.ref(0);
const size = vue.ref(0);
const style = vue.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;
}
}
};
vue.onMounted(() => {
vue.nextTick(() => getInkStyle());
});
vue.onUpdated(() => {
getInkStyle();
});
const cls = vue.computed(() => [
prefixCls,
{
[`${prefixCls}-animation`]: props.animation,
[`${prefixCls}-disabled`]: props.disabled
}
]);
return {
prefixCls,
cls,
style
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(_ctx.cls),
style: vue.normalizeStyle(_ctx.style)
}, null, 6);
}
var TabsNavInk = /* @__PURE__ */ pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
module.exports = TabsNavInk;