更新：登录功能
This commit is contained in:
148
uni_modules/wot-design-uni/components/wd-grid-item/index.scss
Normal file
148
uni_modules/wot-design-uni/components/wd-grid-item/index.scss
Normal file
@@ -0,0 +1,148 @@
|
||||
@import "../common/abstracts/variable";
|
||||
@import "../common/abstracts/mixin";
|
||||
|
||||
.wot-theme-dark {
|
||||
@include b(grid-item) {
|
||||
|
||||
@include when(border) {
|
||||
&::before {
|
||||
background-color: $-dark-border-color;
|
||||
}
|
||||
&::after {
|
||||
background-color: $-dark-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 第一行元素
|
||||
@include when(first) {
|
||||
&::after {
|
||||
background-color: $-dark-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include e(content) {
|
||||
background-color: $-dark-background2;
|
||||
|
||||
@include m(hover) {
|
||||
background-color: $-grid-item-hover-bg-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(grid-item) {
|
||||
height: 100%;
|
||||
font-size: $-grid-item-fs;
|
||||
box-sizing: border-box;
|
||||
|
||||
position: relative;
|
||||
float: left;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
@include when(border) {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
transform: scaleY(0.5);
|
||||
background-color: $-grid-item-border-color;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
transform: scaleX(0.5);
|
||||
height: 100%;
|
||||
background-color: $-grid-item-border-color;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 第一行元素
|
||||
@include when(first) {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
transform: scaleX(0.5);
|
||||
height: 100%;
|
||||
background-color: $-grid-item-border-color;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 每行右侧的元素
|
||||
@include when(right) {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(last) {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@include e(wrapper) {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@include e(content) {
|
||||
height: 100%;
|
||||
padding: $-grid-item-padding;
|
||||
background-color: $-grid-item-bg;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
@include when(square) {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@include when(round) {
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
border: 1px solid $-grid-item-border-color;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(hover) {
|
||||
background-color: $-grid-item-hover-bg !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(text) {
|
||||
margin-top: 8px;
|
||||
font-size: $-grid-item-fs;
|
||||
line-height: $-grid-item-fs;
|
||||
@include lineEllipsis;
|
||||
}
|
||||
}
|
||||
77
uni_modules/wot-design-uni/components/wd-grid-item/types.ts
Normal file
77
uni_modules/wot-design-uni/components/wd-grid-item/types.ts
Normal file
@@ -0,0 +1,77 @@
|
||||
import type { ExtractPropTypes, PropType } from 'vue'
|
||||
import { baseProps, makeBooleanProp, makeStringProp, numericProp } from '../common/props'
|
||||
import type { BadgeProps, BadgeType } from '../wd-badge/types'
|
||||
|
||||
export type LinkType = 'navigateTo' | 'switchTab' | 'reLaunch' | 'redirectTo'
|
||||
|
||||
export const gridItemProps = {
|
||||
...baseProps,
|
||||
/**
|
||||
* GridItem 下方文字样式
|
||||
*/
|
||||
customText: makeStringProp(''),
|
||||
/**
|
||||
* GridItem 上方 icon 样式
|
||||
*/
|
||||
customIcon: makeStringProp(''),
|
||||
/**
|
||||
* 图标名称，可选值见 wd-icon 组件
|
||||
*/
|
||||
icon: makeStringProp(''),
|
||||
/**
|
||||
* 图标大小
|
||||
*/
|
||||
iconSize: makeStringProp('26px'),
|
||||
/**
|
||||
* 文字
|
||||
*/
|
||||
text: String,
|
||||
/**
|
||||
* 点击后跳转的链接地址
|
||||
*/
|
||||
url: String,
|
||||
/**
|
||||
* 页面跳转方式, 参考微信小程序路由文档，可选值：navigateTo / switchTab / reLaunch
|
||||
*/
|
||||
linkType: makeStringProp<LinkType>('navigateTo'),
|
||||
/**
|
||||
* 是否开启 GridItem 内容插槽
|
||||
* @deprecated 已废弃，直接使用默认插槽即可
|
||||
*/
|
||||
useSlot: makeBooleanProp(false),
|
||||
/**
|
||||
* 是否开启 GridItem icon 插槽
|
||||
* @deprecated 已废弃，组件会自动根据 icon 插槽是否存在来显示
|
||||
*/
|
||||
useIconSlot: makeBooleanProp(false),
|
||||
/**
|
||||
* 是否开启 GridItem text 内容插槽
|
||||
* @deprecated 已废弃，组件会自动根据 text 插槽是否存在来显示
|
||||
*/
|
||||
useTextSlot: makeBooleanProp(false),
|
||||
/**
|
||||
* 是否显示图标右上角小红点
|
||||
*/
|
||||
isDot: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
/**
|
||||
* 图标右上角显示的 badge 类型，可选值：primary / success / warning / danger / info
|
||||
*/
|
||||
type: String as PropType<BadgeType>,
|
||||
/**
|
||||
* 图标右上角 badge 显示值
|
||||
*/
|
||||
value: numericProp,
|
||||
/**
|
||||
* 图标右上角 badge 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型
|
||||
*/
|
||||
max: Number,
|
||||
/**
|
||||
* 徽标属性，透传给 Badge 组件
|
||||
*/
|
||||
badgeProps: Object as PropType<Partial<BadgeProps>>
|
||||
}
|
||||
|
||||
export type GridItemProps = ExtractPropTypes<typeof gridItemProps>
|
||||
@@ -0,0 +1,176 @@
|
||||
<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"
|
||||
:hover-class="hoverClass"
|
||||
>
|
||||
<slot>
|
||||
<view class="wd-grid-item__wrapper">
|
||||
<wd-badge v-bind="customBadgeProps">
|
||||
<slot name="icon">
|
||||
<wd-icon :name="icon" :size="iconSize" :custom-class="customIcon" />
|
||||
</slot>
|
||||
</wd-badge>
|
||||
</view>
|
||||
<slot name="text">
|
||||
<view :class="`wd-grid-item__text ${customText}`">{{ text }}</view>
|
||||
</slot>
|
||||
</slot>
|
||||
</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 wdIcon from '../wd-icon/wd-icon.vue'
|
||||
import wdBadge from '../wd-badge/wd-badge.vue'
|
||||
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
|
||||
}
|
||||
|
||||
const hoverClass = computed(() => {
|
||||
if (grid?.props.clickable) {
|
||||
return grid.props.hoverClass ? grid.props.hoverClass : 'wd-grid-item__content--hover'
|
||||
}
|
||||
return 'none'
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
setiIemClass,
|
||||
itemClass,
|
||||
init
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user