@tplc/wot 0.0.1

package/components/wd-grid-item/wd-grid-item.vue

@@ -0,0 +1,181 @@
+<template>
+  <view
+    :class="`wd-grid-item ${border && !gutter ? itemClass : ''} ${customClass}`"
+    @click="click"
+    :style="`${style};${customStyle}`"
+  >
+    <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" v-bind="customBadgeProps">
+            <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 { deepAssign, isDef, isUndefined, omitBy } from '../common/util'
+import { gridItemProps } from './types'
+import type { BadgeProps } from '../wd-badge/types'
+
+const props = defineProps(gridItemProps)
+const emit = defineEmits(['itemclick'])
+
+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 customBadgeProps = computed(() => {
+  const badgeProps: Partial<BadgeProps> = deepAssign(
+    isDef(props.badgeProps) ? omitBy(props.badgeProps, isUndefined) : {},
+    omitBy(
+      {
+        max: props.max,
+        isDot: props.isDot,
+        modelValue: props.value,
+        type: props.type,
+      },
+      isUndefined,
+    ),
+  )
+  return badgeProps
+})
+
+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';
+</style>