@jecloud/func/es/form/src/form-anchor.js

JECloud 功能库

import{createVNode as t}from"vue";import{useModelValue as e}from"@jecloud/ui";import{defineComponent as i,nextTick as o,onMounted as n,ref as r}from"vue";import{createElement as a,forEach as u,getPaddingSize as c}from"@jecloud/utils";export default i({name:"JeFuncFormAnchor",inheritAttrs:!1,props:{options:{type:Array,default:function(){return[]}},activeKey:String,target:Function},emits:["update:activeKey"],setup:function(i,l){var f,s=e({props:i,context:l,key:"activeKey"});s.value=null===(f=i.options[0])||void 0===f?void 0:f.key;var d,v,p=r(),h=!1;n((function(){o((function(){d=a(i.target()),(v=d.up(".je-form-func-wrapper")).on("mousewheel",(function(){h=!1})),v.on("scroll",(function(){var t=v.dom.scrollTop;!h&&u(i.options,(function(e){var i=d.down("[data-code="+e.key+"][data-anchor]");if(i){var o=i.getOffsetBox(v).y,n=o+i.getHeight();if(t>=o&&t<=n)return s.value=e.key,!1}}))}));var t=2*c(v.el).left,e=a(p.value);v.addResizeListener((function(){e.setStyle({left:(v.getWidth()-d.getWidth())/2-e.getWidth()-20+"px"}),d.getWidth()+2*e.getWidth()+t+20<=v.getWidth()?e.setStyle("visibility","visible"):e.setStyle("visibility","hidden")}))}))}));return function(){return t("div",{class:"je-form-func-anchor",ref:p},[i.options.map((function(e){return t("div",{class:{"je-form-func-anchor-item":!0,"is--active":s.value===e.key},onClick:function(){!function(t){s.value=t,h=!0;var e=d.down("[data-code="+s.value+"][data-anchor]");if(e){var i=a(e);if(i.hasClass("je-func")){var o=i.up("[data-anchor-parent]");if(o)return v.scrollBy(o),void o.highlight()}v.scrollBy(e),e.highlight()}}(e.key)}},[e.text])}))])}}});