center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat:仪表板矩形组件增加透明度样式设置

Browse Source
This commit is contained in:
wangjiahao 2021-07-22 11:44:57 +08:00
parent 5f95db6a53
commit b71a1d0a29
10 changed files with 101 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/canvas/components/RectangleAttr.vue
View File

@ -32,6 +32,14 @@
</el-tooltip>
</div>
<el-tooltip :content="$t('panel.opacity')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-touming" />
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="innerOpacity" type="number" size="mini" min="0" max="100" step="10" />
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip content="边框颜色">
@ -51,6 +59,7 @@
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
</div>
</div>
</div>
</el-card>
</template>
@ -101,7 +110,20 @@ export default {
}, {
value: '5',
label: '5'
}]
}],
innerOpacity: 0
}
},
watch: {
innerOpacity: {
handler(oldVal, newVal) {
this.styleInfo['opacity'] = this.innerOpacity / 100
}
}
},
mounted() {
if (this.styleInfo['opacity']) {
this.innerOpacity = this.styleInfo['opacity'] * 100
}
},
computed: {
@ -173,7 +195,7 @@ export default {
.el-card-main {
height: 34px;
z-index: 1000000000;
width: 210px;
width: 300px;
position: absolute;
}

2
frontend/src/lang/tw.js
View File

@ -1126,7 +1126,7 @@ export default {
lineHeight: '行高',
letterSpacing: '字間距',
textAlign: '左右對齊',
opacity: '透明度',
opacity: '不透明度',
verticalAlign: '上下對齊',
text_align_left: '左對齊',
text_align_center: '左右居中',

2
frontend/src/lang/zh.js
View File

@ -1127,7 +1127,7 @@ export default {
lineHeight: '行高',
letterSpacing: '字间距',
textAlign: '左右对齐',
opacity: '透明度',
opacity: '不透明度',
verticalAlign: '上下对齐',
text_align_left: '左对齐',
text_align_center: '左右居中',

52
frontend/src/styles/deicon/demo_index.html
View File

@ -54,6 +54,18 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe642;</span>
<div class="name">透明</div>
<div class="code-name">&amp;#xe642;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61a;</span>
<div class="name">弧度</div>
<div class="code-name">&amp;#xe61a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62d;</span>
<div class="name">放大</div>
@ -282,9 +294,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1626147352097') format('woff2'),
url('iconfont.woff?t=1626147352097') format('woff'),
url('iconfont.ttf?t=1626147352097') format('truetype');
src: url('iconfont.woff2?t=1626919869905') format('woff2'),
url('iconfont.woff?t=1626919869905') format('woff'),
url('iconfont.ttf?t=1626919869905') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -310,6 +322,24 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-touming"></span>
<div class="name">
透明
</div>
<div class="code-name">.icon-touming
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fangxing-"></span>
<div class="name">
弧度
</div>
<div class="code-name">.icon-fangxing-
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fangda"></span>
<div class="name">
@ -652,6 +682,22 @@
<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-touming"></use>
</svg>
<div class="name">透明</div>
<div class="code-name">#icon-touming</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fangxing-"></use>
</svg>
<div class="name">弧度</div>
<div class="code-name">#icon-fangxing-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fangda"></use>

14
frontend/src/styles/deicon/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 2459092 */
src: url('iconfont.woff2?t=1626147352097') format('woff2'),
url('iconfont.woff?t=1626147352097') format('woff'),
url('iconfont.ttf?t=1626147352097') format('truetype');
src: url('iconfont.woff2?t=1626919869905') format('woff2'),
url('iconfont.woff?t=1626919869905') format('woff'),
url('iconfont.ttf?t=1626919869905') format('truetype');
}
.iconfont {
@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-touming:before {
content: "\e642";
}
.icon-fangxing-:before {
content: "\e61a";
}
.icon-fangda:before {
content: "\e62d";
}

2
frontend/src/styles/deicon/iconfont.js
View File

File diff suppressed because one or more lines are too long

14
frontend/src/styles/deicon/iconfont.json
View File

@ -5,6 +5,20 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "4454064",
"name": "透明",
"font_class": "touming",
"unicode": "e642",
"unicode_decimal": 58946
},
{
"icon_id": "7311866",
"name": "弧度",
"font_class": "fangxing-",
"unicode": "e61a",
"unicode_decimal": 58906
},
{
"icon_id": "20921234",
"name": "放大",

BIN
frontend/src/styles/deicon/iconfont.ttf
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff2
View File

Binary file not shown.