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