Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
D
dataease
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
zhu
dataease
Commits
1d316804
提交
1d316804
authored
7月 02, 2021
作者:
wangjiahao
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(panel): 文件组件拖拽是样式编辑改为悬浮式设计,在编辑仪表板是可以看到实时的效果
上级
995b9ea1
全部展开
隐藏空白字符变更
内嵌
并排
正在显示
13 个修改的文件
包含
671 行增加
和
20 行删除
+671
-20
index.vue
frontend/src/components/DeDrag/index.vue
+1
-1
ContextMenu.vue
...d/src/components/canvas/components/Editor/ContextMenu.vue
+0
-2
component-list.js
.../src/components/canvas/custom-component/component-list.js
+3
-3
demo_index.html
frontend/src/styles/deicon/demo_index.html
+210
-3
iconfont.css
frontend/src/styles/deicon/iconfont.css
+39
-3
iconfont.js
frontend/src/styles/deicon/iconfont.js
+0
-0
iconfont.json
frontend/src/styles/deicon/iconfont.json
+63
-0
iconfont.ttf
frontend/src/styles/deicon/iconfont.ttf
+0
-0
iconfont.woff
frontend/src/styles/deicon/iconfont.woff
+0
-0
iconfont.woff2
frontend/src/styles/deicon/iconfont.woff2
+0
-0
RectangleAttr.vue
frontend/src/views/Tinymce/RectangleAttr.vue
+174
-0
TextAttr.vue
frontend/src/views/Tinymce/TextAttr.vue
+171
-0
index.vue
frontend/src/views/panel/edit/index.vue
+10
-8
没有找到文件。
frontend/src/components/DeDrag/index.vue
浏览文件 @
1d316804
...
...
@@ -10,7 +10,7 @@
[classNameResizable]: resizable,
[classNameRotating]: rotating,
[classNameRotatable]: rotatable,
[classNameMouseOn]: mouseOn
[classNameMouseOn]: mouseOn
|| active
},
className
]"
...
...
frontend/src/components/canvas/components/Editor/ContextMenu.vue
浏览文件 @
1d316804
...
...
@@ -31,8 +31,6 @@ export default {
copyData
:
null
,
editFilter
:
[
'view'
,
'v-text'
,
'rect-shape'
,
'custom'
]
}
...
...
frontend/src/components/canvas/custom-component/component-list.js
浏览文件 @
1d316804
...
...
@@ -54,10 +54,10 @@ const list = [
width
:
300
,
height
:
100
,
fontSize
:
18
,
fontWeight
:
5
00
,
fontWeight
:
4
00
,
lineHeight
:
''
,
letterSpacing
:
0
,
textAlign
:
''
,
textAlign
:
'
left
'
,
color
:
'#000000'
}
},
...
...
@@ -75,7 +75,7 @@ const list = [
borderColor
:
''
,
borderRadius
:
''
,
fontSize
:
14
,
fontWeight
:
5
00
,
fontWeight
:
4
00
,
lineHeight
:
''
,
letterSpacing
:
0
,
textAlign
:
''
,
...
...
frontend/src/styles/deicon/demo_index.html
浏览文件 @
1d316804
...
...
@@ -54,6 +54,60 @@
<div
class=
"content unicode"
style=
"display: block;"
>
<ul
class=
"icon_lists dib-box"
>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
font-weight-bold
</div>
<div
class=
"code-name"
>
&
#xe659;
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
letter_spacing
</div>
<div
class=
"code-name"
>
&
#xe601;
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
letter-spacing
</div>
<div
class=
"code-name"
>
&
#xe679;
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
字体颜色
</div>
<div
class=
"code-name"
>
&
#xe60e;
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
format_letter_spacing_2
</div>
<div
class=
"code-name"
>
&
#xe6c3;
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
font_size
</div>
<div
class=
"code-name"
>
&
#xe710;
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
居中
</div>
<div
class=
"code-name"
>
&
#xe972;
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
居右
</div>
<div
class=
"code-name"
>
&
#xe608;
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
居左
</div>
<div
class=
"code-name"
>
&
#xe688;
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
实线
</div>
...
...
@@ -210,9 +264,9 @@
<pre><code
class=
"language-css"
>
@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=16251
27498350
') format('woff2'),
url('iconfont.woff?t=16251
27498350
') format('woff'),
url('iconfont.ttf?t=16251
27498350
') format('truetype');
src: url('iconfont.woff2?t=16251
98204132
') format('woff2'),
url('iconfont.woff?t=16251
98204132
') format('woff'),
url('iconfont.ttf?t=16251
98204132
') format('truetype');
}
</code></pre>
<h3
id=
"-iconfont-"
>
第二步:定义使用 iconfont 的样式
</h3>
...
...
@@ -238,6 +292,87 @@
<div
class=
"content font-class"
>
<ul
class=
"icon_lists dib-box"
>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-font-weight-bold"
></span>
<div
class=
"name"
>
font-weight-bold
</div>
<div
class=
"code-name"
>
.icon-font-weight-bold
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-letter_spacing"
></span>
<div
class=
"name"
>
letter_spacing
</div>
<div
class=
"code-name"
>
.icon-letter_spacing
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-letter-spacing"
></span>
<div
class=
"name"
>
letter-spacing
</div>
<div
class=
"code-name"
>
.icon-letter-spacing
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-zimua"
></span>
<div
class=
"name"
>
字体颜色
</div>
<div
class=
"code-name"
>
.icon-zimua
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-format_letter_spacing_"
></span>
<div
class=
"name"
>
format_letter_spacing_2
</div>
<div
class=
"code-name"
>
.icon-format_letter_spacing_
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-font_size"
></span>
<div
class=
"name"
>
font_size
</div>
<div
class=
"code-name"
>
.icon-font_size
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-align-center"
></span>
<div
class=
"name"
>
居中
</div>
<div
class=
"code-name"
>
.icon-align-center
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-juyou"
></span>
<div
class=
"name"
>
居右
</div>
<div
class=
"code-name"
>
.icon-juyou
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-juzuo"
></span>
<div
class=
"name"
>
居左
</div>
<div
class=
"code-name"
>
.icon-juzuo
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-solid_line"
></span>
<div
class=
"name"
>
...
...
@@ -472,6 +607,78 @@
<div
class=
"content symbol"
>
<ul
class=
"icon_lists dib-box"
>
<li
class=
"dib"
>
<svg
class=
"icon svg-icon"
aria-hidden=
"true"
>
<use
xlink:href=
"#icon-font-weight-bold"
></use>
</svg>
<div
class=
"name"
>
font-weight-bold
</div>
<div
class=
"code-name"
>
#icon-font-weight-bold
</div>
</li>
<li
class=
"dib"
>
<svg
class=
"icon svg-icon"
aria-hidden=
"true"
>
<use
xlink:href=
"#icon-letter_spacing"
></use>
</svg>
<div
class=
"name"
>
letter_spacing
</div>
<div
class=
"code-name"
>
#icon-letter_spacing
</div>
</li>
<li
class=
"dib"
>
<svg
class=
"icon svg-icon"
aria-hidden=
"true"
>
<use
xlink:href=
"#icon-letter-spacing"
></use>
</svg>
<div
class=
"name"
>
letter-spacing
</div>
<div
class=
"code-name"
>
#icon-letter-spacing
</div>
</li>
<li
class=
"dib"
>
<svg
class=
"icon svg-icon"
aria-hidden=
"true"
>
<use
xlink:href=
"#icon-zimua"
></use>
</svg>
<div
class=
"name"
>
字体颜色
</div>
<div
class=
"code-name"
>
#icon-zimua
</div>
</li>
<li
class=
"dib"
>
<svg
class=
"icon svg-icon"
aria-hidden=
"true"
>
<use
xlink:href=
"#icon-format_letter_spacing_"
></use>
</svg>
<div
class=
"name"
>
format_letter_spacing_2
</div>
<div
class=
"code-name"
>
#icon-format_letter_spacing_
</div>
</li>
<li
class=
"dib"
>
<svg
class=
"icon svg-icon"
aria-hidden=
"true"
>
<use
xlink:href=
"#icon-font_size"
></use>
</svg>
<div
class=
"name"
>
font_size
</div>
<div
class=
"code-name"
>
#icon-font_size
</div>
</li>
<li
class=
"dib"
>
<svg
class=
"icon svg-icon"
aria-hidden=
"true"
>
<use
xlink:href=
"#icon-align-center"
></use>
</svg>
<div
class=
"name"
>
居中
</div>
<div
class=
"code-name"
>
#icon-align-center
</div>
</li>
<li
class=
"dib"
>
<svg
class=
"icon svg-icon"
aria-hidden=
"true"
>
<use
xlink:href=
"#icon-juyou"
></use>
</svg>
<div
class=
"name"
>
居右
</div>
<div
class=
"code-name"
>
#icon-juyou
</div>
</li>
<li
class=
"dib"
>
<svg
class=
"icon svg-icon"
aria-hidden=
"true"
>
<use
xlink:href=
"#icon-juzuo"
></use>
</svg>
<div
class=
"name"
>
居左
</div>
<div
class=
"code-name"
>
#icon-juzuo
</div>
</li>
<li
class=
"dib"
>
<svg
class=
"icon svg-icon"
aria-hidden=
"true"
>
<use
xlink:href=
"#icon-solid_line"
></use>
...
...
frontend/src/styles/deicon/iconfont.css
浏览文件 @
1d316804
@font-face
{
font-family
:
"iconfont"
;
/* Project id 2459092 */
src
:
url('iconfont.woff2?t=16251
27498350
')
format
(
'woff2'
),
url('iconfont.woff?t=16251
27498350
')
format
(
'woff'
),
url('iconfont.ttf?t=16251
27498350
')
format
(
'truetype'
);
src
:
url('iconfont.woff2?t=16251
98204132
')
format
(
'woff2'
),
url('iconfont.woff?t=16251
98204132
')
format
(
'woff'
),
url('iconfont.ttf?t=16251
98204132
')
format
(
'truetype'
);
}
.iconfont
{
...
...
@@ -13,6 +13,42 @@
-moz-osx-font-smoothing
:
grayscale
;
}
.icon-font-weight-bold
:before
{
content
:
"\e659"
;
}
.icon-letter_spacing
:before
{
content
:
"\e601"
;
}
.icon-letter-spacing
:before
{
content
:
"\e679"
;
}
.icon-zimua
:before
{
content
:
"\e60e"
;
}
.icon-format_letter_spacing_
:before
{
content
:
"\e6c3"
;
}
.icon-font_size
:before
{
content
:
"\e710"
;
}
.icon-align-center
:before
{
content
:
"\e972"
;
}
.icon-juyou
:before
{
content
:
"\e608"
;
}
.icon-juzuo
:before
{
content
:
"\e688"
;
}
.icon-solid_line
:before
{
content
:
"\e64a"
;
}
...
...
frontend/src/styles/deicon/iconfont.js
浏览文件 @
1d316804
差异被折叠。
点击展开。
frontend/src/styles/deicon/iconfont.json
浏览文件 @
1d316804
...
...
@@ -5,6 +5,69 @@
"css_prefix_text"
:
"icon-"
,
"description"
:
""
,
"glyphs"
:
[
{
"icon_id"
:
"4283405"
,
"name"
:
"font-weight-bold"
,
"font_class"
:
"font-weight-bold"
,
"unicode"
:
"e659"
,
"unicode_decimal"
:
58969
},
{
"icon_id"
:
"9356145"
,
"name"
:
"letter_spacing"
,
"font_class"
:
"letter_spacing"
,
"unicode"
:
"e601"
,
"unicode_decimal"
:
58881
},
{
"icon_id"
:
"13169265"
,
"name"
:
"letter-spacing"
,
"font_class"
:
"letter-spacing"
,
"unicode"
:
"e679"
,
"unicode_decimal"
:
59001
},
{
"icon_id"
:
"7620139"
,
"name"
:
"字体颜色"
,
"font_class"
:
"zimua"
,
"unicode"
:
"e60e"
,
"unicode_decimal"
:
58894
},
{
"icon_id"
:
"13016621"
,
"name"
:
"format_letter_spacing_2"
,
"font_class"
:
"format_letter_spacing_"
,
"unicode"
:
"e6c3"
,
"unicode_decimal"
:
59075
},
{
"icon_id"
:
"18354433"
,
"name"
:
"font_size"
,
"font_class"
:
"font_size"
,
"unicode"
:
"e710"
,
"unicode_decimal"
:
59152
},
{
"icon_id"
:
"3717684"
,
"name"
:
"居中"
,
"font_class"
:
"align-center"
,
"unicode"
:
"e972"
,
"unicode_decimal"
:
59762
},
{
"icon_id"
:
"14764786"
,
"name"
:
"居右"
,
"font_class"
:
"juyou"
,
"unicode"
:
"e608"
,
"unicode_decimal"
:
58888
},
{
"icon_id"
:
"22405859"
,
"name"
:
"居左"
,
"font_class"
:
"juzuo"
,
"unicode"
:
"e688"
,
"unicode_decimal"
:
59016
},
{
"icon_id"
:
"20374711"
,
"name"
:
"实线"
,
...
...
frontend/src/styles/deicon/iconfont.ttf
浏览文件 @
1d316804
No preview for this file type
frontend/src/styles/deicon/iconfont.woff
浏览文件 @
1d316804
No preview for this file type
frontend/src/styles/deicon/iconfont.woff2
浏览文件 @
1d316804
No preview for this file type
frontend/src/views/Tinymce/RectangleAttr.vue
0 → 100644
浏览文件 @
1d316804
<
template
>
<el-card
class=
"el-card-main"
:style=
"mainStyle"
>
<div
style=
"position: relative;"
>
<div
style=
"width: 80px;margin-top: 2px;margin-left: 2px;float: left"
>
<el-tooltip
content=
"边框风格"
>
<el-select
v-model=
"styleInfo.borderStyle"
size=
"mini"
>
<el-option
v-for=
"item in lineStyle"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
>
<span
style=
"float: left;"
>
<i
:class=
"item.icon"
/>
</span>
<span
style=
"float: right; color: #8492a6; font-size: 12px"
>
{{
item
.
label
}}
</span>
</el-option>
</el-select>
</el-tooltip>
</div>
<div
style=
"width: 55px;float: left;margin-top: 2px;margin-left: 2px;"
>
<el-tooltip
content=
"边框宽度"
>
<el-select
v-model=
"styleInfo.borderWidth"
size=
"mini"
placeholder=
""
>
<el-option
v-for=
"item in lineFont"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
/>
</el-select>
</el-tooltip>
</div>
<div
style=
"width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
>
<div
style=
"width: 16px;height: 18px"
>
<el-tooltip
content=
"边框颜色"
>
<i
class=
"iconfont icon-huabi"
@
click=
"goBoardColor"
/>
</el-tooltip>
<div
:style=
"boardDivColor"
/>
<el-color-picker
ref=
"boardColorPicker"
v-model=
"styleInfo.borderColor"
style=
"margin-top: 7px;height: 0px"
size=
"mini"
/>
</div>
</div>
<div
style=
"width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
>
<div
style=
"width: 16px;height: 18px"
>
<el-tooltip
content=
"背景颜色"
>
<i
class=
"iconfont icon-beijingse1"
@
click=
"goBackgroundColor"
/>
</el-tooltip>
<div
:style=
"backgroundDivColor"
/>
<el-color-picker
ref=
"backgroundColorPicker"
v-model=
"styleInfo.backgroundColor"
style=
"margin-top: 7px;height: 0px"
size=
"mini"
/>
</div>
</div>
</div>
</el-card>
</
template
>
<
script
>
import
{
mapState
}
from
'vuex'
export
default
{
data
()
{
return
{
lineStyle
:
[{
icon
:
'iconfont icon-solid_line'
,
value
:
'solid'
,
label
:
'实线'
},
{
icon
:
'iconfont icon-xuxian'
,
value
:
'dashed'
,
label
:
'虚线'
},
{
icon
:
'iconfont icon-dianxian'
,
value
:
'dotted'
,
label
:
'点线'
}],
lineFont
:
[{
value
:
'0'
,
label
:
'0'
},
{
value
:
'1'
,
label
:
'1'
},
{
value
:
'2'
,
label
:
'2'
},
{
value
:
'3'
,
label
:
'3'
},
{
value
:
'4'
,
label
:
'4'
},
{
value
:
'5'
,
label
:
'5'
}]
}
},
computed
:
{
boardDivColor
()
{
const
style
=
{
height
:
'2px'
,
background
:
this
.
styleInfo
.
borderColor
}
return
style
},
backgroundDivColor
()
{
const
style
=
{
height
:
'2px'
,
background
:
this
.
styleInfo
.
backgroundColor
}
return
style
},
mainStyle
()
{
const
style
=
{
left
:
this
.
getPositionX
(
this
.
curComponent
.
style
.
left
)
+
'px'
,
top
:
(
this
.
getPositionY
(
this
.
curComponent
.
style
.
top
)
-
3
)
+
'px'
}
return
style
},
styleInfo
()
{
return
this
.
$store
.
state
.
curComponent
.
style
},
...
mapState
([
'curComponent'
,
'curCanvasScale'
,
'canvasStyleData'
])
},
methods
:
{
goBoardColor
()
{
this
.
$refs
.
boardColorPicker
.
handleTrigger
()
},
goBackgroundColor
()
{
this
.
$refs
.
backgroundColorPicker
.
handleTrigger
()
},
getPositionX
(
x
)
{
if
(
this
.
canvasStyleData
.
selfAdaption
)
{
return
(
x
*
this
.
curCanvasScale
.
scaleWidth
/
100
)
+
60
}
else
{
return
x
+
190
}
},
getPositionY
(
y
)
{
if
(
this
.
canvasStyleData
.
selfAdaption
)
{
return
y
*
this
.
curCanvasScale
.
scaleHeight
/
100
}
else
{
return
y
}
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.attr-list
{
overflow
:
auto
;
padding
:
20px
;
padding-top
:
0
;
height
:
100%
;
}
.el-card-main
{
height
:
34px
;
z-index
:
1000000000
;
width
:
210px
;
position
:
absolute
;
}
.
el-card-main
:
:
v-deep
.
el-card__body
{
padding
:
0px
!
important
;
}
</
style
>
frontend/src/views/Tinymce/TextAttr.vue
0 → 100644
浏览文件 @
1d316804
<
template
>
<el-card
class=
"el-card-main"
:style=
"mainStyle"
>
<div
style=
"position: relative;"
>
<div
style=
"width: 100px;float: left;margin-top: 2px;margin-left: 2px;"
>
<el-radio-group
v-model=
"styleInfo.textAlign"
size=
"mini"
>
<el-radio-button
v-for=
"item in textAlignOptions"
:key=
"item.label"
:label=
"item.label"
>
<el-tooltip
:content=
"item.tooltip"
>
<span
style=
"float: left;"
>
<i
:class=
"item.icon"
/>
</span>
</el-tooltip>
</el-radio-button>
</el-radio-group>
</div>
<el-tooltip
:content=
"$t('panel.fontSize')"
>
<i
style=
"float: left;margin-top: 3px;margin-left: 2px;"
class=
"iconfont icon-font_size"
/>
</el-tooltip>
<div
style=
"width: 70px;float: left;margin-top: 2px;margin-left: 2px;"
>
<el-input
v-model=
"styleInfo.fontSize"
type=
"number"
size=
"mini"
min=
"12"
max=
"128"
/>
</div>
<el-tooltip
:content=
"$t('panel.fontWeight')"
>
<i
style=
"float: left;margin-top: 3px;margin-left: 2px;"
class=
"icon iconfont icon-font-weight-bold"
/>
</el-tooltip>
<div
style=
"width: 70px;float: left;margin-top: 2px;margin-left: 2px;"
>
<el-input
v-model=
"styleInfo.fontWeight"
type=
"number"
size=
"mini"
min=
"100"
step=
"100"
max=
"900"
/>
</div>
<el-tooltip
:content=
"$t('panel.letterSpacing')"
>
<i
style=
"float: left;margin-top: 3px;margin-left: 2px;"
class=
"icon iconfont icon-letter_spacing"
/>
</el-tooltip>
<div
style=
"width: 70px;float: left;margin-top: 2px;margin-left: 2px;"
>
<el-input
v-model=
"styleInfo.letterSpacing"
type=
"number"
size=
"mini"
min=
"0"
max=
"99"
/>
</div>
<div
style=
"width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
>
<div
style=
"width: 16px;height: 18px"
>
<el-tooltip
:content=
"$t('panel.color')"
>
<i
class=
"icon iconfont icon-zimua"
@
click=
"goColor"
/>
</el-tooltip>
<div
:style=
"letterDivColor"
/>
<el-color-picker
ref=
"colorPicker"
v-model=
"styleInfo.color"
style=
"margin-top: 7px;height: 0px"
size=
"mini"
/>
</div>
</div>
<div
style=
"width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
>
<div
style=
"width: 16px;height: 18px"
>
<el-tooltip
content=
"背景颜色"
>
<i
class=
"iconfont icon-beijingse1"
@
click=
"goBackgroundColor"
/>
</el-tooltip>
<div
:style=
"backgroundDivColor"
/>
<el-color-picker
ref=
"backgroundColorPicker"
v-model=
"styleInfo.backgroundColor"
style=
"margin-top: 7px;height: 0px"
size=
"mini"
/>
</div>
</div>
</div>
</el-card>
</
template
>
<
script
>
import
{
mapState
}
from
'vuex'
export
default
{
data
()
{
return
{
textAlignOptions
:
[
{
icon
:
'iconfont icon-juzuo'
,
tooltip
:
this
.
$t
(
'panel.text_align_left'
),
label
:
'left'
},
{
icon
:
'iconfont icon-align-center'
,
tooltip
:
this
.
$t
(
'panel.text_align_center'
),
label
:
'center'
},
{
icon
:
'iconfont icon-juyou'
,
tooltip
:
this
.
$t
(
'panel.text_align_right'
),
label
:
'right'
}
]
}
},
computed
:
{
letterDivColor
()
{
const
style
=
{
height
:
'2px'
,
background
:
this
.
styleInfo
.
color
}
return
style
},
backgroundDivColor
()
{
const
style
=
{
height
:
'2px'
,
background
:
this
.
styleInfo
.
backgroundColor
}
return
style
},
mainStyle
()
{
const
style
=
{
left
:
this
.
getPositionX
(
this
.
curComponent
.
style
.
left
)
+
'px'
,
top
:
(
this
.
getPositionY
(
this
.
curComponent
.
style
.
top
)
-
3
)
+
'px'
}
return
style
},
styleInfo
()
{
return
this
.
$store
.
state
.
curComponent
.
style
},
...
mapState
([
'curComponent'
,
'curCanvasScale'
,
'canvasStyleData'
])
},
methods
:
{
goColor
()
{
this
.
$refs
.
colorPicker
.
handleTrigger
()
},
goBackgroundColor
()
{
this
.
$refs
.
backgroundColorPicker
.
handleTrigger
()
},
getPositionX
(
x
)
{
if
(
this
.
canvasStyleData
.
selfAdaption
)
{
return
(
x
*
this
.
curCanvasScale
.
scaleWidth
/
100
)
+
60
}
else
{
return
x
+
190
}
},
getPositionY
(
y
)
{
if
(
this
.
canvasStyleData
.
selfAdaption
)
{
return
y
*
this
.
curCanvasScale
.
scaleHeight
/
100
}
else
{
return
y
}
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.attr-list
{
overflow
:
auto
;
padding
:
20px
;
padding-top
:
0
;
height
:
100%
;
}
.el-card-main
{
height
:
34px
;
z-index
:
1000000000
;
width
:
450px
;
position
:
absolute
;
}
.
el-card-main
:
:
v-deep
.
el-card__body
{
padding
:
0px
!
important
;
}
>>>
.el-radio-button__inner
{
padding
:
5px
;
width
:
30px
;
}
</
style
>
frontend/src/views/panel/edit/index.vue
浏览文件 @
1d316804
...
...
@@ -157,8 +157,8 @@
<input
id=
"input"
ref=
"files"
type=
"file"
accept=
"image/*"
hidden
@
change=
"handleFileChange"
>
<!--矩形样式组件-->
test--------
{{
curComponent
&&
curComponent
.
type
}}
<RectangleAttr
v-if=
"curComponent&&curComponent.type==='rect-shape'"
/>
<TextAttr
v-if=
"curComponent&&curComponent.type==='v-text'"
/>
</el-row>
</
template
>
...
...
@@ -199,6 +199,7 @@ import toast from '@/components/canvas/utils/toast'
import
{
commonStyle
,
commonAttr
}
from
'@/components/canvas/custom-component/component-list'
import
generateID
from
'@/components/canvas/utils/generateID'
import
RectangleAttr
from
'@/components/canvas/components/RectangleAttr'
import
TextAttr
from
'@/views/Tinymce/TextAttr'
export
default
{
name
:
'PanelEdit'
,
...
...
@@ -218,7 +219,8 @@ export default {
AttrListExtend
,
AssistComponent
,
PanelTextEditor
,
RectangleAttr
RectangleAttr
,
TextAttr
},
data
()
{
return
{
...
...
@@ -455,12 +457,12 @@ export default {
this
.
$store
.
commit
(
'recordSnapshot'
)
this
.
clearCurrentInfo
()
// 文字组件
if
(
component
.
type
===
'v-text'
)
{
this
.
$store
.
commit
(
'setCurComponent'
,
{
component
:
component
,
index
:
this
.
componentData
.
length
})
this
.
styleDialogVisible
=
true
this
.
show
=
false
}
//
//
文字组件
//
if (component.type === 'v-text') {
//
this.$store.commit('setCurComponent', { component: component, index: this.componentData.length })
//
this.styleDialogVisible = true
//
this.show = false
//
}
},
clearCurrentInfo
()
{
this
.
currentWidget
=
null
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论