From e0aff8f4c0e9c8f16d1ba07863cf600638067514 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 13 四月 2021 15:08:47 +0800 Subject: [PATCH] 2021-04-13 --- src/menu/components/card/cardcellcomponent/dragaction/card.jsx | 30 ++++++++++++++++++++---------- 1 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/menu/components/card/cardcellcomponent/dragaction/card.jsx b/src/menu/components/card/cardcellcomponent/dragaction/card.jsx index 403c4df..448cb6a 100644 --- a/src/menu/components/card/cardcellcomponent/dragaction/card.jsx +++ b/src/menu/components/card/cardcellcomponent/dragaction/card.jsx @@ -8,17 +8,23 @@ import demo3 from '@/assets/img/demo3.jpg' import demo4 from '@/assets/img/demo4.jpg' import demo5 from '@/assets/img/demo5.jpg' +import MKEmitter from '@/utils/events.js' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' - +import { resetStyle } from '@/utils/utils-custom.js' import './index.scss' const BarCode = asyncComponent(() => import('@/components/barcode')) const QrCode = asyncComponent(() => import('@/components/qrcode')) const Video = asyncComponent(() => import('@/components/video')) const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent')) +const PicRadio = { + '4:3': '75%', '3:2': '66.67%', '16:9': '56.25%', '2:1': '50%', '3:1': '33.33%', '4:1': '25%', + '5:1': '20%', '6:1': '16.67%', '7:1': '14.29%', '8:1': '12.5%', '9:1': '11.11%', + '10:1': '10%', '3:4': '133.33%', '2:3': '150%', '9:16': '177.78%' +} -const Card = ({ id, fields, card, moveCard, findCard, editCard, delCard, copyCard, changeStyle, updateMarks }) => { +const Card = ({ id, parent, fields, card, moveCard, findCard, editCard, delCard, copyCard, changeStyle, updateMarks, doubleClickCard }) => { const originalIndex = findCard(id).index const [{ isDragging }, drag] = useDrag({ item: { type: 'action', id, originalIndex }, @@ -44,6 +50,7 @@ if (card.style) { _style = {...card.style, opacity: isDragging ? 0 : 1} + _style = resetStyle(_style) } const getContent = () => { @@ -54,7 +61,7 @@ } else if (card.eleType === 'text' || card.eleType === 'number') { let val = `${card.prefix || ''}${card.datatype === 'static' ? (card.value || '') : (card.field || '')}${card.postfix || ''}` return ( - <div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>{val}</div> + <div className={'ant-mk-text line' + (card.height || '')} style={{height: card.innerHeight || 'auto'}}>{val}</div> ) } else if (card.eleType === 'icon') { return (<Icon type={card.icon}/>) @@ -84,12 +91,8 @@ _imagestyle.borderRadius = card.style.borderRadius } - if (card.lenWidRadio === '16:9') { - _imagestyle.paddingTop = '56.25%' - } else if (card.lenWidRadio === '3:2') { - _imagestyle.paddingTop = '66.67%' - } else if (card.lenWidRadio === '4:3') { - _imagestyle.paddingTop = '75%' + if (PicRadio[card.lenWidRadio]) { + _imagestyle.paddingTop = PicRadio[card.lenWidRadio] } else { _imagestyle.paddingTop = '100%' } @@ -131,6 +134,13 @@ } } + const clickComponent = (e) => { + if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'cardcell') { + e.stopPropagation() + MKEmitter.emit('clickComponent', card, parent, 'cardcell') + } + } + return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> @@ -142,7 +152,7 @@ </div> } trigger="hover"> <div ref={node => drag(drop(node))} className={'ant-col card-cell ant-col-' + card.width}> - <div style={_style}> + <div style={_style} onClick={clickComponent} onDoubleClick={() => doubleClickCard(id)} id={card.uuid}> {getContent()} </div> </div> -- Gitblit v1.8.0