|
|
|
@ -9,7 +9,8 @@ |
|
|
|
@click="handleItemClick(item)" |
|
|
|
:title="item.name" |
|
|
|
> |
|
|
|
<i :class="item.icon"></i> |
|
|
|
<svg-icon v-if="isSvgIcon(item.icon)" :icon-class="item.icon" class="toolbar-svg-icon" /> |
|
|
|
<i v-else :class="item.icon"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -42,9 +43,9 @@ export default { |
|
|
|
allToolbarItems: [ |
|
|
|
{ id: 'mouse', name: '鼠标', icon: 'el-icon-position' }, |
|
|
|
{ id: 'polygon', name: '面', icon: 'el-icon-house' }, |
|
|
|
{ id: 'rectangle', name: '矩形', icon: 'el-icon-crop' }, |
|
|
|
{ id: 'circle', name: '圆形', icon: 'el-icon-circle-plus-outline' }, |
|
|
|
{ id: 'sector', name: '扇形', icon: 'el-icon-pie-chart' }, |
|
|
|
{ id: 'rectangle', name: '矩形', icon: 'jx' }, |
|
|
|
{ id: 'circle', name: '圆形', icon: 'circle' }, |
|
|
|
{ id: 'sector', name: '扇形', icon: 'sx' }, |
|
|
|
{ id: 'arrow', name: '箭头', icon: 'el-icon-right' }, |
|
|
|
{ id: 'text', name: '文本', icon: 'el-icon-document' }, |
|
|
|
{ id: 'image', name: '图片', icon: 'el-icon-picture-outline' }, |
|
|
|
@ -55,7 +56,7 @@ export default { |
|
|
|
], |
|
|
|
// 测距模式工具列表 |
|
|
|
rangingToolbarItems: [ |
|
|
|
{ id: 'mouse', name: '鼠标', icon: 'el-icon-position' }, |
|
|
|
{ id: 'mouse', name: '鼠标', icon: 'cursor' }, |
|
|
|
{ id: 'point', name: '点', icon: 'el-icon-location' }, |
|
|
|
{ id: 'line', name: '线', icon: 'el-icon-edit-outline' }, |
|
|
|
{ id: 'clear', name: '清除', icon: 'el-icon-delete' } |
|
|
|
@ -72,6 +73,11 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
/** 判断是否为本地 SVG 图标（非 Element 的 el-icon-* 类名） */ |
|
|
|
isSvgIcon(icon) { |
|
|
|
return icon && typeof icon === 'string' && !icon.startsWith('el-icon-') |
|
|
|
}, |
|
|
|
|
|
|
|
handleItemClick(item) { |
|
|
|
if (item.id === 'clear') { |
|
|
|
this.$emit('clear-all') |
|
|
|
@ -148,6 +154,12 @@ export default { |
|
|
|
box-shadow: 0 2px 8px rgba(0, 138, 255, 0.3); |
|
|
|
} |
|
|
|
|
|
|
|
.toolbar-item .toolbar-svg-icon { |
|
|
|
width: 1em; |
|
|
|
height: 1em; |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.toolbar-item:disabled { |
|
|
|
opacity: 0.5; |
|
|
|
cursor: not-allowed; |
|
|
|
|
