st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
2 lines (1 loc) • 1.9 kB
JavaScript
;const n=require("vue"),t=require("../../node_modules/.pnpm/st-common-core@0.1.1/node_modules/st-common-core/es/num/utils/random-num-util.js"),$=require("../../node_modules/.pnpm/st-common-ui-utils@0.1.1/node_modules/st-common-ui-utils/es/utils/el-size-util.js"),b={key:0,class:"st-gradient-bg-2__content"},x=n.defineComponent({name:"StGradientBg2",__name:"StGradientBg2",props:{bgColor:{default:"#e493d0"},gradientColors:{},speed:{default:"15s"},blur:{type:Boolean,default:!0}},setup(d){const a=d,p=["rgb(235, 105, 78)","rgb(243, 11, 164)","rgb(254, 234, 131)","rgb(170, 142, 245)","rgb(248, 192, 147)"],r=n.computed(()=>{let o=[],s=[];return!a.gradientColors||a.gradientColors.length===0?o=p:o=a.gradientColors,s=o.map(e=>{const l=t.randomInt_n_m(50,100),i=t.randomInt_n_m(50,100),m=t.randomInt_n_m(50,100),u=t.randomInt_n_m(-50,50),c=t.randomInt_n_m(-50,50),_=t.randomInt_n_m(-50,50),g=t.randomInt_n_m(-50,50),v=t.randomInt_n_m(-50,50),z=t.randomInt_n_m(-50,50);return{color:`radial-gradient(closest-side, ${e}, rgba(255, 255, 255, 0))`,size0:`${l}vmax ${l}vmax`,size50:`${i}vmax ${i}vmax`,size100:`${m}vmax ${m}vmax`,p0:`${u}vmax ${c}vmax`,p50:`${_}vmax ${g}vmax`,p100:`${v}vmax ${z}vmax`}}),s});return(o,s)=>(n.openBlock(),n.createElementBlock("div",{class:"st-gradient-bg-2",style:n.normalizeStyle({"--size0":r.value.map(e=>e.size0).join(", "),"--size50":r.value.map(e=>e.size50).join(", "),"--size100":r.value.map(e=>e.size100).join(", "),"--p0":r.value.map(e=>e.p0).join(", "),"--p50":r.value.map(e=>e.p50).join(", "),"--p100":r.value.map(e=>e.p100).join(", "),backgroundColor:o.bgColor,backgroundImage:r.value.map(e=>e.color).join(", "),animationDuration:n.unref($).elSizePreHandler(o.speed,"ms")})},[o.blur?(n.openBlock(),n.createElementBlock("div",b,[n.renderSlot(o.$slots,"default",{},void 0,!0)])):n.renderSlot(o.$slots,"default",{key:1},void 0,!0)],4))}});module.exports=x;