mobile-admin/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue

<template>
  <view :class="`wd-grid-item ${border && !gutter ? itemClass : ''} ${customClass}`" @click="click" :style="style">
    <view :class="`wd-grid-item__content ${square ? 'is-square' : ''} ${border && gutter > 0 ? 'is-round' : ''}`" :style="gutterContentStyle">
      <slot v-if="useSlot" />
      <block v-else>
        <view :style="'width:' + iconSize + '; height: ' + iconSize" class="wd-grid-item__wrapper">
          <wd-badge custom-class="badge" :is-dot="isDot" :modelValue="value" :max="max" :type="type" v-bind="badgeProps">
            <template v-if="useIconSlot">
              <slot name="icon" />
            </template>
            <wd-icon v-else :name="icon" :size="iconSize" :custom-class="customIcon" />
          </wd-badge>
        </view>
        <slot name="text" v-if="useTextSlot" />
        <view v-else class="wd-grid-item__text custom-text">{{ text }}</view>
      </block>
    </view>
  </view>
</template>
<script lang="ts">
export default {
  name: 'wd-grid-item',
  options: {
    virtualHost: true,
    addGlobalClass: true,
    styleIsolation: 'shared'
  }
}
</script>

<script lang="ts" setup>
import { onMounted, ref, watch, computed } from 'vue'
import { useParent } from '../composables/useParent'
import { GRID_KEY } from '../wd-grid/types'
import { isDef } from '../common/util'

type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
interface BadgeProps {
  modelValue?: number | string | null
  bgColor?: string
  max?: number
  isDot?: boolean
  hidden?: boolean
  type?: BadgeType
  top?: number
  right?: number
  customClass?: string
  customStyle?: string
}
type LinkType = 'navigateTo' | 'switchTab' | 'reLaunch' | 'redirectTo'
interface Props {
  customText?: string
  customIcon?: string
  customClass?: string
  icon?: string
  iconSize?: string
  text?: string
  url?: string
  linkType?: LinkType
  useSlot?: boolean
  useIconSlot?: boolean
  useTextSlot?: boolean
  // badge属性
  isDot?: boolean
  type?: BadgeType
  value?: number
  max?: number
  // 徽标属性，透传给 Badge 组件
  badgeProps?: BadgeProps
}

const props = withDefaults(defineProps<Props>(), {
  customClass: '',
  customText: '',
  customIcon: '',
  icon: '',
  iconSize: '26px',
  linkType: 'navigateTo',
  useSlot: false,
  useIconSlot: false,
  useTextSlot: false
})

const style = ref<string>('')
const gutterContentStyle = ref<string>('')
const itemClass = ref<string>('')
const gutter = ref<number>(0)
const square = ref<boolean>(false)
const border = ref<boolean>(true)
const { parent: grid } = useParent(GRID_KEY)

const childCount = computed(() => {
  if (isDef(grid) && isDef(grid.children)) {
    return grid.children.length
  } else {
    return 0
  }
})

const emit = defineEmits(['itemclick'])

watch(
  () => childCount.value,
  () => {
    if (!grid) return
    const width = grid.props.column ? 100 / grid.props.column + '%' : 100 / (childCount.value || 1) + '%'
    // 单独定义间隔
    const gutterStyle = grid.props.gutter ? `padding:${grid.props.gutter}px ${grid.props.gutter}px 0 0; background-color: transparent;` : ''
    // 单独定义正方形
    const squareStyle = grid.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
    style.value = `width: ${width}; ${squareStyle || gutterStyle}`
  },
  {
    deep: true,
    immediate: true
  }
)

onMounted(() => {
  init()
})

function init() {
  if (!grid) return
  const children = grid.children
  const width = grid.props.column ? 100 / grid.props.column + '%' : 100 / children.length + '%'
  // 单独定义间隔
  const gutterStyle = grid.props.gutter ? `padding:${grid.props.gutter}px ${grid.props.gutter}px 0 0; background-color: transparent;` : ''
  // 单独定义正方形
  const squareStyle = grid.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
  // 间隔+正方形
  gutterContentStyle.value =
    grid.props.gutter && grid.props.square
      ? `right: ${grid.props.gutter}px; bottom:${grid.props.gutter}px;height: auto; background-color: ${grid.props.bgColor}`
      : `background-color: ${grid.props.bgColor}`

  border.value = Boolean(grid.props.border)
  square.value = Boolean(grid.props.square)
  gutter.value = Number(grid.props.gutter)
  style.value = `width: ${width}; ${squareStyle || gutterStyle}`
}

function click() {
  if (grid && !grid.props.clickable) return
  const { url, linkType } = props
  emit('itemclick')
  if (url) {
    switch (linkType) {
      case 'navigateTo':
        uni.navigateTo({
          url
        })
        break
      case 'reLaunch':
        uni.reLaunch({
          url
        })
        break
      case 'redirectTo':
        uni.redirectTo({
          url
        })
        break
      case 'switchTab':
        uni.switchTab({
          url
        })
        break
      default:
        console.error(`[wot-design] warning(wd-grid-item): linkType can not be ${linkType}`)
        break
    }
  }
}
/**
 * 设置样式
 * @param classes
 */
function setiIemClass(classes: string) {
  itemClass.value = classes
}

defineExpose({
  setiIemClass,
  itemClass,
  init
})
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>