uv-ui/lib/components/grid-item/grid-item.cjs

基于vue3的移动端组件库

"use strict";const e=require("vue"),f=require("../../hooks/useContext.cjs");require("../../hooks/useCountDown.cjs");const x=require("../icon/index.cjs");require("./grid-item.vue_vue_type_style_index_0_lang.cjs");const S={class:"uv-grid-item-content-text"},k={name:"UvGridItem"},C=Object.assign(k,{props:{iconSize:{type:[String,Number],default:28},iconName:{type:String},iconColor:{type:String},iconProps:{type:Object},text:{type:String}},emits:["click"],setup(o,{emit:l}){const s=e.ref(null),u=e.reactive({$el:s}),{props:r,childrenNum:d,index:a}=f.useParent("grid",u),m=e.computed(()=>{const{columnNum:t,gutter:n}=r,i={flexBasis:`${100/+t}%`};return n&&(i.paddingRight=n+"px",d.value>=t&&a.value>=t&&(i.marginTop=n+"px")),i}),g=e.computed(()=>{const{border:t,clickable:n}=r;return[t?"uv-grid-item-border":"",n?"uv-grid-item-clickable":""]}),v=e.computed(()=>{const{bgColor:t,color:n}=r;return{backgroundColor:t,color:n}}),p=e.computed(()=>{const{direction:t,reverse:n}=r;return[t==="column"?"uv-grid-item-content-direction-column":"uv-grid-item-content-direction-row",n?`uv-grid-item-content-direction-${t}-reverse`:""]}),y=()=>{l("click")};return(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["uv-grid-item",e.unref(g)]),ref_key:"gridItemRef",ref:s,style:e.normalizeStyle(e.unref(m)),onClick:y},[e.createElementVNode("div",{class:e.normalizeClass(["uv-grid-item-content",e.unref(p)]),style:e.normalizeStyle(e.unref(v))},[e.renderSlot(t.$slots,"default",{},()=>[e.createElementVNode("div",null,[e.renderSlot(t.$slots,"icon",{},()=>[e.createVNode(e.unref(x),e.mergeProps({size:o.iconSize,name:o.iconName,color:o.iconColor},o.iconProps),null,16,["size","name","color"])])]),e.createElementVNode("div",S,[e.renderSlot(t.$slots,"text",{},()=>[e.createTextVNode(e.toDisplayString(o.text),1)])])])],6)],6))}});module.exports=C;