refactor(components): 优化瀑布流布局和日期选择组件
-移除了瀑布流布局组件中的冗余注释和代码 -优化了日期选择组件的结构,删除了不必要的注释和空行 - 提高了代码的可读性和维护性
This commit is contained in:
parent
2f8eb36a52
commit
0e80600f51
@ -11,7 +11,6 @@
|
|||||||
:key="item.id"
|
:key="item.id"
|
||||||
class="waterfall-item"
|
class="waterfall-item"
|
||||||
>
|
>
|
||||||
<!-- 默认插槽,传入当前item数据 -->
|
|
||||||
<slot :item="item">
|
<slot :item="item">
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
@ -35,19 +34,15 @@ const props = defineProps({
|
|||||||
|
|
||||||
const columns = ref([])
|
const columns = ref([])
|
||||||
|
|
||||||
// 计算每列的内容
|
|
||||||
const calculateColumns = () => {
|
const calculateColumns = () => {
|
||||||
const cols = Array.from({ length: props.columnCount }, () => [])
|
const cols = Array.from({ length: props.columnCount }, () => [])
|
||||||
props.items.forEach((item, index) => {
|
props.items.forEach((item, index) => {
|
||||||
// 将项目添加到高度最小的列中
|
|
||||||
const columnIndex = index % props.columnCount
|
const columnIndex = index % props.columnCount
|
||||||
cols[columnIndex].push(item)
|
cols[columnIndex].push(item)
|
||||||
})
|
})
|
||||||
|
|
||||||
columns.value = cols
|
columns.value = cols
|
||||||
}
|
}
|
||||||
|
|
||||||
// 监听items变化重新计算列
|
|
||||||
watch(() => props.items, () => {
|
watch(() => props.items, () => {
|
||||||
calculateColumns()
|
calculateColumns()
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {ref, computed} from 'vue'
|
import {ref, computed} from 'vue'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modelValue: {
|
modelValue: {
|
||||||
type: [Date, String, Number]
|
type: [Date, String, Number]
|
||||||
@ -39,7 +38,6 @@ const props = defineProps({
|
|||||||
const emit = defineEmits(['update:modelValue', 'change'])
|
const emit = defineEmits(['update:modelValue', 'change'])
|
||||||
const show = ref(false)
|
const show = ref(false)
|
||||||
|
|
||||||
// 默认值处理
|
|
||||||
const defaultValue = computed(() => {
|
const defaultValue = computed(() => {
|
||||||
let date
|
let date
|
||||||
if (props.modelValue) {
|
if (props.modelValue) {
|
||||||
@ -48,7 +46,6 @@ const defaultValue = computed(() => {
|
|||||||
date = dayjs()
|
date = dayjs()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 确保日期有效
|
|
||||||
if (!date.isValid()) {
|
if (!date.isValid()) {
|
||||||
date = dayjs()
|
date = dayjs()
|
||||||
}
|
}
|
||||||
@ -60,20 +57,17 @@ const defaultValue = computed(() => {
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
// 格式化日期
|
|
||||||
const formatDate = (dateArr) => {
|
const formatDate = (dateArr) => {
|
||||||
const [year, month, day] = dateArr
|
const [year, month, day] = dateArr
|
||||||
return dayjs(`${year}-${month}-${day}`).format(props.format)
|
return dayjs(`${year}-${month}-${day}`).format(props.format)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 显示值
|
|
||||||
const displayValue = computed(() => {
|
const displayValue = computed(() => {
|
||||||
if (!props.modelValue) return ''
|
if (!props.modelValue) return ''
|
||||||
const date = dayjs(props.modelValue)
|
const date = dayjs(props.modelValue)
|
||||||
return date.isValid() ? date.format(props.format) : ''
|
return date.isValid() ? date.format(props.format) : ''
|
||||||
})
|
})
|
||||||
|
|
||||||
// 确认选择
|
|
||||||
const onConfirm = ({selectedValues}) => {
|
const onConfirm = ({selectedValues}) => {
|
||||||
show.value = false
|
show.value = false
|
||||||
const formattedDate = formatDate(selectedValues)
|
const formattedDate = formatDate(selectedValues)
|
||||||
@ -81,7 +75,6 @@ const onConfirm = ({selectedValues}) => {
|
|||||||
emit('change', formattedDate)
|
emit('change', formattedDate)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 取消选择
|
|
||||||
const onCancel = () => {
|
const onCancel = () => {
|
||||||
show.value = false
|
show.value = false
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user