diff --git a/src/components/Common/Directives/GridBox.js b/src/components/Common/Directives/GridBox.js deleted file mode 100644 index 19e8753..0000000 --- a/src/components/Common/Directives/GridBox.js +++ /dev/null @@ -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) - }, -}