Skip to content

Commit 91ac08e

Browse files
ROYIANSROYIANS
committed
fix: 表格样式、富文本样式、文本样式修复和调整
1 parent ed80dff commit 91ac08e

File tree

10 files changed

+143
-67
lines changed

10 files changed

+143
-67
lines changed

‎src/components/PageComponents/RoySimpleText.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@
2828
@mousedown="handleMouseDown"
2929
@keydown="handleKeyDown"
3030
@blur="handleBlur"
31-
v-html="propValue"
32-
></StyledSimpleText>
31+
>
32+
<div class="roy-simple-text-inner" v-html="propValue"></div>
33+
</StyledSimpleText>
3334
</div>
3435
</template>
3536

‎src/components/PageComponents/RoyTable/RoySimpleTable.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@
2828
:style="{
2929
width: `${tableData[`${row}-${col}`].width}px`,
3030
height: `${tableData[`${row}-${col}`].height}px`,
31-
padding: '0'
31+
padding: '0',
32+
overflow: 'hidden'
3233
}"
3334
@mousedown.stop="(e) => handleCellMousedown(e, row, col)"
3435
@mouseenter.stop.prevent="handleCellMouseenter(row, col)"
@@ -102,7 +103,7 @@ const defaultTableCell = {
102103
margin: '0',
103104
fontFamily: 'default',
104105
lineHeight: '1',
105-
letterSpacing: '1',
106+
letterSpacing: '0',
106107
borderWidth: 0,
107108
borderColor: '#212121',
108109
borderType: 'none',

‎src/components/PageComponents/RoyTable/RoySimpleTextInTable.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,9 @@
2929
@mousedown="handleMouseDown"
3030
@keydown="handleKeyDown"
3131
@blur="handleBlur"
32-
v-html="propValue"
33-
></StyledSimpleText>
32+
>
33+
<div class="roy-simple-text-inner" v-html="propValue"></div>
34+
</StyledSimpleText>
3435
</div>
3536
</template>
3637

‎src/components/PageComponents/RoyTable/RoyTextInTable.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@
3636
/>
3737
</div>
3838
</RoyModal>
39-
<StyledText v-bind="style" v-html="propValue"></StyledText>
39+
<StyledText v-bind="style">
40+
<div class="roy-text-inner" v-html="propValue"></div>
41+
</StyledText>
4042
</div>
4143
</template>
4244

‎src/components/PageComponents/RoyText.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,9 @@
3232
/>
3333
</div>
3434
</RoyModal>
35-
<StyledText v-bind="style" v-html="propValue"></StyledText>
35+
<StyledText v-bind="style">
36+
<div class="roy-text-inner" v-html="propValue"></div>
37+
</StyledText>
3638
</div>
3739
</template>
3840

‎src/components/PageComponents/style.js

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -134,14 +134,8 @@ export const StyledText = styled('div', textProps)`
134134
color: ${(props) => props.color};
135135
background: ${(props) => props.background};
136136
border-radius: ${(props) => props.borderRadius};
137-
padding: ${(props) => `${props.padding}px`};
138137
margin: ${(props) => props.margin};
139-
font-size: ${(props) => `${props.fontSize}pt`};
140-
font-family: ${(props) =>
141-
props.fontFamily === 'default' ? 'inherit' : `${props.fontFamily}`};
142138
z-index: ${(props) => props.zIndex};
143-
line-height: ${(props) => props.lineHeight};
144-
letter-spacing: ${(props) => `${props.letterSpacing}px`};
145139
border: ${(props) => {
146140
const { borderWidth, borderType, borderColor } = props
147141
if (borderType === 'none') {
@@ -150,6 +144,16 @@ export const StyledText = styled('div', textProps)`
150144
return `${borderWidth}px ${borderType} ${borderColor}`
151145
}
152146
}};
147+
148+
.roy-text-inner {
149+
height: 100%;
150+
padding: ${(props) => `${props.padding}px`};
151+
line-height: ${(props) => props.lineHeight};
152+
letter-spacing: ${(props) => `${props.letterSpacing}px`};
153+
font-size: ${(props) => `${props.fontSize}pt`};
154+
font-family: ${(props) =>
155+
props.fontFamily === 'default' ? 'inherit' : `${props.fontFamily}`};
156+
}
153157
table {
154158
table-layout: fixed;
155159
border-collapse: separate;
@@ -161,6 +165,7 @@ export const StyledText = styled('div', textProps)`
161165
td {
162166
position: relative;
163167
background-color: #fff;
168+
overflow: hidden;
164169
}
165170
166171
p {
@@ -174,41 +179,44 @@ export const StyledSimpleText = styled('div', textProps)`
174179
height: 100%;
175180
overflow: hidden;
176181
position: absolute;
177-
display: flex;
178-
text-align: left;
179-
word-break: break-all;
180-
justify-content: ${(props) => props.justifyContent};
181-
align-items: ${(props) => props.alignItems};
182182
color: ${(props) => props.color};
183183
background: ${(props) => props.background};
184184
border: ${(props) => props.border};
185185
border-radius: ${(props) => props.borderRadius};
186-
padding: ${(props) => `${props.padding}px`};
187186
margin: ${(props) => props.margin};
188187
font-size: ${(props) => `${props.fontSize}pt`};
189188
font-family: ${(props) =>
190189
props.fontFamily === 'default' ? 'inherit' : `${props.fontFamily}`};
191-
z-index: ${(props) => props.zIndex};
192-
line-height: ${(props) => props.lineHeight};
193-
letter-spacing: ${(props) => `${props.letterSpacing}px`};
194190
border: ${(props) =>
195191
`${props.borderWidth}px ${props.borderType} ${props.borderColor}`};
196-
font-weight: ${(props) => `${props.fontWeight}`};
197-
font-style: ${(props) => `${props.fontStyle}`};
198-
text-decoration: ${(props) => {
199-
const { isUnderLine, isDelLine } = props
200-
const propsValue = {
201-
underline: isUnderLine,
202-
'line-through': isDelLine
203-
}
204-
if (isUnderLine || isDelLine) {
205-
return Object.keys(propsValue)
206-
.filter((item) => propsValue[item])
207-
.join(' ')
208-
} else {
209-
return 'none'
210-
}
211-
}};
192+
z-index: ${(props) => props.zIndex};
193+
.roy-simple-text-inner {
194+
height: 100%;
195+
display: flex;
196+
text-align: left;
197+
word-break: break-all;
198+
justify-content: ${(props) => props.justifyContent};
199+
align-items: ${(props) => props.alignItems};
200+
padding: ${(props) => `${props.padding}px`};
201+
line-height: ${(props) => props.lineHeight};
202+
letter-spacing: ${(props) => `${props.letterSpacing}px`};
203+
font-weight: ${(props) => `${props.fontWeight}`};
204+
font-style: ${(props) => `${props.fontStyle}`};
205+
text-decoration: ${(props) => {
206+
const { isUnderLine, isDelLine } = props
207+
const propsValue = {
208+
underline: isUnderLine,
209+
'line-through': isDelLine
210+
}
211+
if (isUnderLine || isDelLine) {
212+
return Object.keys(propsValue)
213+
.filter((item) => propsValue[item])
214+
.join(' ')
215+
} else {
216+
return 'none'
217+
}
218+
}};
219+
}
212220
`
213221

214222
export const StyledRect = styled('div', rectProps)`

‎src/components/Viewer/auto-render.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export class AutoRender {
141141
newElement.style.transform = 'none'
142142
const border = newElement.style.border
143143
newElement.style.border = 'none'
144-
newElement.innerHTML = afterPropValue
144+
newElement.innerHTML = `<div class="roy-text-inner">${afterPropValue}</div>`
145145
// 富文本高度自动给，然后走分页逻辑
146146
newElement.style.height = 'auto'
147147
let pEle
@@ -221,7 +221,7 @@ export class AutoRender {
221221
)
222222
}
223223
let newElement = this.createNewElementWithStyledComponent(element)
224-
newElement.innerHTML = afterPropValue
224+
newElement.innerHTML = `<div class="roy-simple-text-inner">${afterPropValue}</div>`
225225
this.addElementToCurPage(newElement.outerHTML, 0)
226226
newElement = null
227227
}

‎src/components/Viewer/auto-table.js

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -106,15 +106,15 @@ export class AutoTable {
106106
}
107107

108108
generateComplexTable() {
109-
const { tableDataSource, tableCols, bodyTableWidth } = this.propValue
109+
const { tableRowHeight, tableDataSource, tableCols, bodyTableWidth } =
110+
this.propValue
111+
let tableRowHeightPx = `${tableRowHeight}px`
110112
const tableData = this.dataSet[tableDataSource] || []
111113
const tableHead = tableCols
112114
.map((item) => {
113-
return `<th style='width: ${item.width}px;'>
114-
<div class="roy-complex-table-cell-in" style='justify-content: center;'>
115-
<div style='padding: 3px'>${item.title}</div>
116-
</div>
117-
</th>`
115+
return `<th style='width: ${item.width}px;'><div class="roy-complex-table-cell-in" style='justify-content: center;'>
116+
<div style='min-height: ${tableRowHeightPx};line-height: ${tableRowHeightPx};padding: 3px'>${item.title}</div>
117+
</div></th>`
118118
})
119119
.join('')
120120
let widthList = tableCols.map((item) => {
@@ -125,14 +125,14 @@ export class AutoTable {
125125
let tdEle = tableCols
126126
.map((col, index) => {
127127
const { field, formatter, align } = col
128-
return `<td style="width: ${widthList[index]}px;">
129-
<div class="roy-complex-table-cell-in" style='justify-content: ${align}'>
130-
<div style='padding: 3px'>${RenderUtil.getDataWithTypeConvertedByDataSource(
131-
row[field],
132-
formatter
133-
)}</div>
134-
</div>
135-
</td>`
128+
return `<td style="width: ${
129+
widthList[index]
130+
}px;"><div class="roy-complex-table-cell-in" style='justify-content: ${align}'>
131+
<div style='min-height: ${tableRowHeightPx};padding: 3px;display: flex;align-items: center'>${RenderUtil.getDataWithTypeConvertedByDataSource(
132+
row[field],
133+
formatter
134+
)}</div>
135+
</div></td>`
136136
})
137137
.join('')
138138
return `<tr class="roy-complex-table-row">${tdEle}</tr>`
@@ -167,7 +167,7 @@ export class AutoTable {
167167
newElement.style.width = '100%'
168168
newElement.style.height = `${element.height}px`
169169
newElement.style.position = 'static'
170-
newElement.innerHTML = afterPropValue
170+
newElement.innerHTML = `<div class="roy-simple-text-inner">${afterPropValue}</div>`
171171
newElement.style.height = `${element.height}px`
172172
const res = newElement.outerHTML
173173
instance.$destroy()
@@ -189,7 +189,7 @@ export class AutoTable {
189189
const newElement = instance.$el
190190
newElement.style.width = '100%'
191191
newElement.style.position = 'static'
192-
newElement.innerHTML = afterPropValue
192+
newElement.innerHTML = `<div class="roy-text-inner">${afterPropValue}</div>`
193193
const res = newElement.outerHTML
194194
instance.$destroy()
195195
return res

‎src/components/config/componentList.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const componentList = [
3333
margin: '0',
3434
fontFamily: 'default',
3535
lineHeight: '1',
36-
letterSpacing: '1',
36+
letterSpacing: '0',
3737
borderWidth: 0,
3838
borderColor: '#212121',
3939
borderType: 'none',

0 commit comments

Comments
 (0)