liaoboping/LSSE-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

coding

Browse Source
This commit is contained in:
liaoboping 2025-08-20 16:27:25 +08:00
parent 69eceeadbf
commit 002466d844
1 changed files with 0 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Common/Directives/GridBox.js
View File

@ -1,56 +0,0 @@
const calcColumnsStyle = (columns, columnGap) => {
if (!(columns instanceof Array) || columns.length === 0) return ''
const total = columns.reduce((cur, c, i) => (typeof c === 'number' ? cur + c : cur), 0)
const baseColumn = columns.reduce(
(cur, c, i) => (typeof c === 'string' ? cur + ` - ${c}` : cur),
`100% - ${columnGap} * ${columns.length - 1}`
)
return columns
.map((c) => {
return typeof c === 'number' ? `calc((${baseColumn}) * ${c} / ${total})` : c
})
.join(' ')
}
const calcRowsStyle = (rows, rowGap) => {
if (!(rows instanceof Array) || rows.length === 0) return ''
const total = rows.reduce((cur, c, i) => (typeof c === 'number' ? cur + c : cur), 0)
const baseRow = rows.reduce(
(cur, c, i) => (typeof c === 'string' ? cur + ` - ${c}` : cur),
`100% - ${rowGap} * ${rows.length - 1}`
)
return rows
.map((c) => {
return typeof c === 'number' ? `calc((${baseRow}) * ${c} / ${total})` : c
})
.join(' ')
}
export default {
bind(el, binding, vnode, oldVnode) {
// console.log('----bind----', el, binding, vnode, oldVnode)
const { columns = [1], rows = [1], gap = '20px' } = binding.value
const [columnGap, rowGap = columnGap] = gap.split(' ')
el.style.display = 'grid'
el.style.gridTemplateColumns = calcColumnsStyle(columns, columnGap)
el.style.gridTemplateRows = calcRowsStyle(rows, rowGap)
el.style.gridGap = `${columnGap} ${rowGap}`
},
inserted(el, binding, vnode, oldVnode) {
// console.log('----inserted----', el, binding, vnode, oldVnode)
},
update(el, binding, vnode, oldVnode) {
// console.log('----update----', el, binding, vnode, oldVnode)
const { columns = [1], rows = [1], gap = '20px' } = binding.value
const [columnGap, rowGap = columnGap] = gap.split(' ')
el.style.gridTemplateColumns = calcColumnsStyle(columns, columnGap)
el.style.gridTemplateRows = calcRowsStyle(rows, rowGap)
el.style.gridGap = `${columnGap} ${rowGap}`
},
componentUpdated(el, binding, vnode, oldVnode) {
// console.log('----componentUpdated----', el, binding, vnode, oldVnode)
},
unbind(el, binding, vnode, oldVnode) {
// console.log('----unbind----', el, binding, vnode, oldVnode)
},
}