element-plus-readonly-form-item
Version:
基于 ElementPlus 的表单只读态控件,完美适配所有表单组件。主要用于新建页与详情页动态切换。支持 npm 与 cdn 方式的引入。
2 lines (1 loc) • 14.5 kB
JavaScript
(function(o,$){typeof exports=="object"&&typeof module!="undefined"?module.exports=$(require("vue")):typeof define=="function"&&define.amd?define(["vue"],$):(o=typeof globalThis!="undefined"?globalThis:o||self,o.ReadonlyFormItem=$(o.Vue))})(this,function(o){"use strict";var Te=Object.defineProperty,_e=Object.defineProperties;var ke=Object.getOwnPropertyDescriptors;var ae=Object.getOwnPropertySymbols;var me=Object.prototype.hasOwnProperty,he=Object.prototype.propertyIsEnumerable;var pe=(o,$,S)=>$ in o?Te(o,$,{enumerable:!0,configurable:!0,writable:!0,value:S}):o[$]=S,ue=(o,$)=>{for(var S in $||($={}))me.call($,S)&&pe(o,S,$[S]);if(ae)for(var S of ae($))he.call($,S)&&pe(o,S,$[S]);return o},le=(o,$)=>_e(o,ke($));var ye=(o,$)=>{var S={};for(var Y in o)me.call(o,Y)&&$.indexOf(Y)<0&&(S[Y]=o[Y]);if(o!=null&&ae)for(var Y of ae(o))$.indexOf(Y)<0&&he.call(o,Y)&&(S[Y]=o[Y]);return S};const $=Symbol("formContextKey"),S=Symbol("formItemContextKey");var Y=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{};function $e(c){return c&&c.__esModule&&Object.prototype.hasOwnProperty.call(c,"default")?c.default:c}var ce={exports:{}};(function(c,u){(function(m,v){c.exports=v()})(Y,function(){var m=1e3,v=6e4,L=36e5,T="millisecond",M="second",_="minute",I="hour",k="day",H="week",x="month",V="quarter",C="year",R="date",N="Invalid Date",ee=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,Q=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,te={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(e){var t=["th","st","nd","rd"],r=e%100;return"["+e+(t[(r-20)%10]||t[r]||t[0])+"]"}},z=function(e,t,r){var a=String(e);return!a||a.length>=t?e:""+Array(t+1-a.length).join(r)+e},re={s:z,z:function(e){var t=-e.utcOffset(),r=Math.abs(t),a=Math.floor(r/60),n=r%60;return(t<=0?"+":"-")+z(a,2,"0")+":"+z(n,2,"0")},m:function e(t,r){if(t.date()<r.date())return-e(r,t);var a=12*(r.year()-t.year())+(r.month()-t.month()),n=t.clone().add(a,x),s=r-n<0,i=t.clone().add(a+(s?-1:1),x);return+(-(a+(r-n)/(s?n-i:i-n))||0)},a:function(e){return e<0?Math.ceil(e)||0:Math.floor(e)},p:function(e){return{M:x,y:C,w:H,d:k,D:R,h:I,m:_,s:M,ms:T,Q:V}[e]||String(e||"").toLowerCase().replace(/s$/,"")},u:function(e){return e===void 0}},W="en",O={};O[W]=te;var J="$isDayjsObject",X=function(e){return e instanceof B||!(!e||!e[J])},Z=function e(t,r,a){var n;if(!t)return W;if(typeof t=="string"){var s=t.toLowerCase();O[s]&&(n=s),r&&(O[s]=r,n=s);var i=t.split("-");if(!n&&i.length>1)return e(i[0])}else{var f=t.name;O[f]=t,n=f}return!a&&n&&(W=n),n||!a&&W},h=function(e,t){if(X(e))return e.clone();var r=typeof t=="object"?t:{};return r.date=e,r.args=arguments,new B(r)},d=re;d.l=Z,d.i=X,d.w=function(e,t){return h(e,{locale:t.$L,utc:t.$u,x:t.$x,$offset:t.$offset})};var B=function(){function e(r){this.$L=Z(r.locale,null,!0),this.parse(r),this.$x=this.$x||r.x||{},this[J]=!0}var t=e.prototype;return t.parse=function(r){this.$d=function(a){var n=a.date,s=a.utc;if(n===null)return new Date(NaN);if(d.u(n))return new Date;if(n instanceof Date)return new Date(n);if(typeof n=="string"&&!/Z$/i.test(n)){var i=n.match(ee);if(i){var f=i[2]-1||0,p=(i[7]||"0").substring(0,3);return s?new Date(Date.UTC(i[1],f,i[3]||1,i[4]||0,i[5]||0,i[6]||0,p)):new Date(i[1],f,i[3]||1,i[4]||0,i[5]||0,i[6]||0,p)}}return new Date(n)}(r),this.init()},t.init=function(){var r=this.$d;this.$y=r.getFullYear(),this.$M=r.getMonth(),this.$D=r.getDate(),this.$W=r.getDay(),this.$H=r.getHours(),this.$m=r.getMinutes(),this.$s=r.getSeconds(),this.$ms=r.getMilliseconds()},t.$utils=function(){return d},t.isValid=function(){return this.$d.toString()!==N},t.isSame=function(r,a){var n=h(r);return this.startOf(a)<=n&&n<=this.endOf(a)},t.isAfter=function(r,a){return h(r)<this.startOf(a)},t.isBefore=function(r,a){return this.endOf(a)<h(r)},t.$g=function(r,a,n){return d.u(r)?this[a]:this.set(n,r)},t.unix=function(){return Math.floor(this.valueOf()/1e3)},t.valueOf=function(){return this.$d.getTime()},t.startOf=function(r,a){var n=this,s=!!d.u(a)||a,i=d.p(r),f=function(A,w){var E=d.w(n.$u?Date.UTC(n.$y,w,A):new Date(n.$y,w,A),n);return s?E:E.endOf(k)},p=function(A,w){return d.w(n.toDate()[A].apply(n.toDate("s"),(s?[0,0,0,0]:[23,59,59,999]).slice(w)),n)},g=this.$W,b=this.$M,D=this.$D,P="set"+(this.$u?"UTC":"");switch(i){case C:return s?f(1,0):f(31,11);case x:return s?f(1,b):f(0,b+1);case H:var l=this.$locale().weekStart||0,y=(g<l?g+7:g)-l;return f(s?D-y:D+(6-y),b);case k:case R:return p(P+"Hours",0);case I:return p(P+"Minutes",1);case _:return p(P+"Seconds",2);case M:return p(P+"Milliseconds",3);default:return this.clone()}},t.endOf=function(r){return this.startOf(r,!1)},t.$set=function(r,a){var n,s=d.p(r),i="set"+(this.$u?"UTC":""),f=(n={},n[k]=i+"Date",n[R]=i+"Date",n[x]=i+"Month",n[C]=i+"FullYear",n[I]=i+"Hours",n[_]=i+"Minutes",n[M]=i+"Seconds",n[T]=i+"Milliseconds",n)[s],p=s===k?this.$D+(a-this.$W):a;if(s===x||s===C){var g=this.clone().set(R,1);g.$d[f](p),g.init(),this.$d=g.set(R,Math.min(this.$D,g.daysInMonth())).$d}else f&&this.$d[f](p);return this.init(),this},t.set=function(r,a){return this.clone().$set(r,a)},t.get=function(r){return this[d.p(r)]()},t.add=function(r,a){var n,s=this;r=Number(r);var i=d.p(a),f=function(b){var D=h(s);return d.w(D.date(D.date()+Math.round(b*r)),s)};if(i===x)return this.set(x,this.$M+r);if(i===C)return this.set(C,this.$y+r);if(i===k)return f(1);if(i===H)return f(7);var p=(n={},n[_]=v,n[I]=L,n[M]=m,n)[i]||1,g=this.$d.getTime()+r*p;return d.w(g,this)},t.subtract=function(r,a){return this.add(-1*r,a)},t.format=function(r){var a=this,n=this.$locale();if(!this.isValid())return n.invalidDate||N;var s=r||"YYYY-MM-DDTHH:mm:ssZ",i=d.z(this),f=this.$H,p=this.$m,g=this.$M,b=n.weekdays,D=n.months,P=n.meridiem,l=function(w,E,j,U){return w&&(w[E]||w(a,s))||j[E].slice(0,U)},y=function(w){return d.s(f%12||12,w,"0")},A=P||function(w,E,j){var U=w<12?"AM":"PM";return j?U.toLowerCase():U};return s.replace(Q,function(w,E){return E||function(j){switch(j){case"YY":return String(a.$y).slice(-2);case"YYYY":return d.s(a.$y,4,"0");case"M":return g+1;case"MM":return d.s(g+1,2,"0");case"MMM":return l(n.monthsShort,g,D,3);case"MMMM":return l(D,g);case"D":return a.$D;case"DD":return d.s(a.$D,2,"0");case"d":return String(a.$W);case"dd":return l(n.weekdaysMin,a.$W,b,2);case"ddd":return l(n.weekdaysShort,a.$W,b,3);case"dddd":return b[a.$W];case"H":return String(f);case"HH":return d.s(f,2,"0");case"h":return y(1);case"hh":return y(2);case"a":return A(f,p,!0);case"A":return A(f,p,!1);case"m":return String(p);case"mm":return d.s(p,2,"0");case"s":return String(a.$s);case"ss":return d.s(a.$s,2,"0");case"SSS":return d.s(a.$ms,3,"0");case"Z":return i}return null}(w)||i.replace(":","")})},t.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},t.diff=function(r,a,n){var s,i=this,f=d.p(a),p=h(r),g=(p.utcOffset()-this.utcOffset())*v,b=this-p,D=function(){return d.m(i,p)};switch(f){case C:s=D()/12;break;case x:s=D();break;case V:s=D()/3;break;case H:s=(b-g)/6048e5;break;case k:s=(b-g)/864e5;break;case I:s=b/L;break;case _:s=b/v;break;case M:s=b/m;break;default:s=b}return n?s:d.a(s)},t.daysInMonth=function(){return this.endOf(x).$D},t.$locale=function(){return O[this.$L]},t.locale=function(r,a){if(!r)return this.$L;var n=this.clone(),s=Z(r,a,!0);return s&&(n.$L=s),n},t.clone=function(){return d.w(this.$d,this)},t.toDate=function(){return new Date(this.valueOf())},t.toJSON=function(){return this.isValid()?this.toISOString():null},t.toISOString=function(){return this.$d.toISOString()},t.toString=function(){return this.$d.toUTCString()},e}(),ne=B.prototype;return h.prototype=ne,[["$ms",T],["$s",M],["$m",_],["$H",I],["$W",k],["$M",x],["$y",C],["$D",R]].forEach(function(e){ne[e[1]]=function(t){return this.$g(t,e[0],e[1])}}),h.extend=function(e,t){return e.$i||(e(t,B,h),e.$i=!0),h},h.locale=Z,h.isDayjs=X,h.unix=function(e){return h(1e3*e)},h.en=O[W],h.Ls=O,h.p={},h})})(ce);var ge=ce.exports;const oe=$e(ge),be=["ElInput","ElInputNumber","ElRadioGroup","ElCheckboxGroup","ElSelect","ElCascader","ElSwitch","ElSlider","ElTimeSelect","ElTimePicker","ElDatePicker","ElRate","ElColorPicker","ElTransfer"],se="HH:mm:ss",q="YYYY-MM-DD",Me={date:q,dates:q,week:"gggg[w]ww",year:"YYYY",month:"YYYY-MM",datetime:`${q} ${se}`,monthrange:"YYYY-MM",daterange:q,datetimerange:`${q} ${se}`},we=c=>Array.isArray(c)&&c.every(u=>Array.isArray(u)),de=c=>{const u="ElForm";return c.type.name===u?c:de(c.parent)},fe=c=>{if(!c)return;let u;for(let m=0;m<c.length;m++)if(u=c[m],typeof u.type=="object"&&be.includes(u.type.name)||(u=fe(u.children),u))return u;return u},G=o.defineComponent({name:"ReadonlyFormItem",__name:"readonly-form-item",props:{value:{},readonly:{type:Boolean,default:void 0},emptyText:{},separator:{},rangeSeparator:{},dateFormat:{}},setup(c){const u=o.getCurrentInstance(),m=de(u),v=o.inject($),L=o.useSlots(),T=o.useAttrs(),M=c,_=o.ref(m.proxy.model),I=o.ref(""),k=o.computed(()=>M.readonly!==void 0?M.readonly:m.proxy.$attrs.readonly),H=o.computed(()=>{var e;return["ElTableRow","ElTableBody"].includes((e=u==null?void 0:u.parent)==null?void 0:e.type.name)}),x=o.computed(()=>le(ue({},T),{labelWidth:T.label?T.labelWidth||m.props.labelWidth:"auto",style:le(ue({},T.style),{marginBottom:H.value&&"0"})})),V=o.computed(()=>(u==null?void 0:u.appContext.config.globalProperties.$ReadonlyFormItem)||{}),C=o.computed(()=>H.value?{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",display:"inline-block",width:"100%",verticalAlign:"bottom"}:{wordBreak:"break-all"}),R=()=>{const r=L,{default:e}=r;return ye(r,["default"])},N=()=>fe(L.default()),ee=e=>e==null?void 0:e.type.name,Q=e=>{var t;return(t=e==null?void 0:e.children.default())==null?void 0:t[0]},te=e=>{var t;return(t=e==null?void 0:e.props.type)!=null?t:"date"},z=e=>{var r;const t={ElTimePicker:se,ElDatePicker:Me[te(e)]};return M.dateFormat||V.value.dateFormat||((r=e==null?void 0:e.props)==null?void 0:r.format)||t[ee(e)]},re=e=>{var t,r;return(r=(t=Q(e))==null?void 0:t.children)==null?void 0:r.map(a=>({label:Q(a).children,value:a.props.label}))},W=()=>M.emptyText||V.value.emptyText||"-",O=()=>M.separator||V.value.separator||",",J=()=>M.rangeSeparator||V.value.rangeSeparator||"~",X=()=>{var e,t;return(t=(e=T.prop)==null?void 0:e.split("."))==null?void 0:t.reduce((r,a)=>r==null?void 0:r[a],_.value)},Z=()=>{var r,a,n,s,i,f,p,g,b,D,P;if("value"in(u==null?void 0:u.vnode.props))return M.value;const e=X(),t=N();switch(ee(t)){case"ElSelect":{const l=(r=Q(t).children)==null?void 0:r.map(y=>y.props);return Array.isArray(e)?(n=(a=l==null?void 0:l.filter(y=>e==null?void 0:e.includes(y.value)))==null?void 0:a.map(y=>y.label))==null?void 0:n.join(O()):(s=l==null?void 0:l.find(y=>y.value===e))==null?void 0:s.label}case"ElRadioGroup":return(f=(i=re(t))==null?void 0:i.find(l=>l.value===e))==null?void 0:f.label;case"ElCheckboxGroup":return(b=(g=(p=re(t))==null?void 0:p.filter(l=>e==null?void 0:e.includes(l.value)))==null?void 0:g.map(l=>l.label))==null?void 0:b.join(O());case"ElCascader":{const{options:l,separator:y="/",props:{label:A="label",value:w="value",children:E="children"}={}}=t==null?void 0:t.props,j=(K,F)=>(K.push(F),F[E]&&F[E].length&&F[E].reduce(j,K),K),U=K=>{var F;return(F=l==null?void 0:l.reduce(j,[]).find(Ee=>Ee[w]===K))==null?void 0:F[A]};return we(e)?(D=e.map(K=>{var F;return(F=K.map(U))==null?void 0:F.join(y)}))==null?void 0:D.join(O()):e.map(U).join(y)}case"ElTransfer":{const{data:l,props:{key:y="key",label:A="label"}={}}=t==null?void 0:t.props;return(P=e.map(w=>{var E;return(E=l.find(j=>j[y]===w))==null?void 0:E[A]}))==null?void 0:P.join(O())}case"ElTimePicker":return Array.isArray(e)&&e.length?e.map(l=>oe(l).format(z(t))).join(J()):e;case"ElDatePicker":{if(!e)return e;const l=z(t),y=["monthrange","daterange","datetimerange"].includes(te(t))?J():O();return Array.isArray(e)?e.map(A=>oe(A).format(l)).join(y):oe(e).format(l)}case"ElSwitch":{const{activeText:l,inactiveText:y}=t==null?void 0:t.props;return e?l||(t==null?void 0:t.props["active-text"])||"开":y||(t==null?void 0:t.props["inactive-text"])||"关"}case"ElSlider":return Array.isArray(e)?e.join(J()):e;default:return e}},h=()=>{try{const e=Z();I.value=typeof e=="number"?e:e||W()}catch(e){}},d=e=>{o.nextTick(()=>{var r,a,n,s,i;const t=(i=(s=(n=(a=(r=u==null?void 0:u.proxy)==null?void 0:r.$el)==null?void 0:a.__vnode)==null?void 0:n.ctx)==null?void 0:s.provides)==null?void 0:i[S];t&&(e?v==null||v.removeField(t):v==null||v.addField(t))})};o.watch(()=>m.proxy.model,e=>{_.value=e,h()},{deep:!0,immediate:!0}),o.watch(()=>T,h,{deep:!0}),o.watch(k,d),o.onMounted(()=>{k.value&&d(!0)}),o.onBeforeUnmount(()=>{var e,t;k.value&&((t=(e=u==null?void 0:u.vnode)==null?void 0:e.props)==null||delete t.prop)});let B=0,ne=setInterval(()=>{B===10&&clearInterval(ne),B++,h()},1e3);return(e,t)=>{const r=o.resolveComponent("el-form-item");return o.openBlock(),o.createBlock(r,o.normalizeProps(o.guardReactiveProps(x.value)),o.createSlots({default:o.withCtx(()=>[k.value?(o.openBlock(),o.createElementBlock("span",{key:0,style:o.normalizeStyle(C.value)},o.toDisplayString(I.value),5)):o.renderSlot(e.$slots,"default",{key:1})]),_:2},[o.renderList(R(),(a,n)=>({name:n,fn:o.withCtx(()=>[o.renderSlot(e.$slots,n)])}))]),1040)}}});var ie,Se=["scroll","wheel","touchstart","touchmove","touchenter","touchend","touchleave","mouseout","mouseleave","mouseup","mousedown","mousemove","mouseenter","mousewheel","mouseover"];if(function(){var c=!1;try{var u=Object.defineProperty({},"passive",{get:function(){c=!0}});window.addEventListener("test",null,u),window.removeEventListener("test",null,u)}catch(m){}return c}()){var ve=EventTarget.prototype.addEventListener;ie=ve,EventTarget.prototype.addEventListener=function(c,u,m){var v,L=typeof m=="object"&&m!==null,T=L?m.capture:m;(m=L?function(M){var _=Object.getOwnPropertyDescriptor(M,"passive");return _&&_.writable!==!0&&_.set===void 0?Object.assign({},M):M}(m):{}).passive=(v=m.passive)!==void 0?v:Se.indexOf(c)!==-1&&!0,m.capture=T!==void 0&&T,ie.call(this,c,u,m)},EventTarget.prototype.addEventListener._original=ie}const De=(c,u={})=>{c.config.globalProperties.$ReadonlyFormItem=u,c.component(G.name,G)};return G.install=c=>{c.component(G.name,G)},{install:De,ReadonlyFormItem:G}});