You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/06/16 02:43:44 UTC

[incubator-echarts-doc] branch live-example updated: example: support absolute value in percent component

This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch live-example
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git


The following commit(s) were added to refs/heads/live-example by this push:
     new 4035a4b  example: support absolute value in percent component
4035a4b is described below

commit 4035a4bdbe6713613120bea75dda9a496437a443
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Jun 16 10:43:33 2020 +0800

    example: support absolute value in percent component
---
 src/components/DocContentItemCard.vue |  3 ++-
 src/components/LiveExample.vue        |  2 +-
 src/components/OptionControl.vue      |  4 +++-
 src/controls/ControlEnum.vue          |  5 -----
 src/controls/ControlPercent.vue       | 14 +++++++++-----
 src/i18n.js                           |  2 ++
 6 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/DocContentItemCard.vue b/src/components/DocContentItemCard.vue
index d7a65b7..bcbace4 100644
--- a/src/components/DocContentItemCard.vue
+++ b/src/components/DocContentItemCard.vue
@@ -404,7 +404,8 @@ $hierarchy-guider-color: #C592A0;
         display: inline-block;
     }
     .option-control {
-        display: inline-block;
+        // display: inline-block;
+        float: right;
     }
 
     .prop-type {
diff --git a/src/components/LiveExample.vue b/src/components/LiveExample.vue
index 2af3f34..4d8d281 100644
--- a/src/components/LiveExample.vue
+++ b/src/components/LiveExample.vue
@@ -87,7 +87,7 @@ function updateOption(option) {
         catch (e) {
             // 一些属性切换的时候可能会出现一些位置的错误
             console.error(e);
-            this.hasError = true
+            this.hasError = true;
         }
     }
 
diff --git a/src/components/OptionControl.vue b/src/components/OptionControl.vue
index 9e30a38..48102e7 100644
--- a/src/components/OptionControl.vue
+++ b/src/components/OptionControl.vue
@@ -100,5 +100,7 @@ export default {
 </script>
 
 <style lang="scss">
-
+.option-control {
+    margin-top: 10px;
+}
 </style>
\ No newline at end of file
diff --git a/src/controls/ControlEnum.vue b/src/controls/ControlEnum.vue
index 870d137..7a79497 100644
--- a/src/controls/ControlEnum.vue
+++ b/src/controls/ControlEnum.vue
@@ -47,10 +47,5 @@ export default {
         display: inline-block;
         vertical-align: middle;
     }
-
-    span {
-        font-size: 12px;
-        font-weight: bold;
-    }
 }
 </style>
\ No newline at end of file
diff --git a/src/controls/ControlPercent.vue b/src/controls/ControlPercent.vue
index 56af0b6..e458eb6 100644
--- a/src/controls/ControlPercent.vue
+++ b/src/controls/ControlPercent.vue
@@ -1,5 +1,6 @@
 <template>
 <div class="control-percent">
+    <el-switch v-model="absoluteMode" :active-text="$t('example.absoluteMode')"></el-switch>
     <el-input-number
         v-if="absoluteMode"
         controls-position="right"
@@ -13,7 +14,7 @@
     </el-input-number>
     <div v-else>
         <el-slider
-            v-model="innerValue"
+            v-model="percentValue"
             :min="0"
             :max="100"
             :step="1"
@@ -22,7 +23,7 @@
         ></el-slider>
         <el-input-number
             controls-position="right"
-            v-model="innerValue"
+            v-model="percentValue"
             size="mini"
             :min="0"
             :max="100"
@@ -41,7 +42,7 @@ export default {
 
     data() {
         return {
-            innerValue: +this.value.replace('%', ''),
+            percentValue: +this.value.replace('%', ''),
             absoluteValue: 0,
             absoluteMode: this.value.indexOf('%') >= 0
         }
@@ -49,13 +50,13 @@ export default {
 
     watch: {
         value(val) {
-            this.innerValue = +this.value.replace('%', '');
+            this.percentValue = +this.value.replace('%', '');
         }
     },
 
     methods: {
         onValueChange() {
-            this.$emit('change', this.innerValue + '%');
+            this.$emit('change', this.absoluteMode ? this.absoluteValue : this.percentValue + '%');
         },
         formatTooltip(val) {
             return val + '%';
@@ -66,6 +67,9 @@ export default {
 
 <style lang="scss">
 .control-percent {
+    &>div {
+        display: inline-block;
+    }
     .el-slider {
         width: 200px;
         display: inline-block;
diff --git a/src/i18n.js b/src/i18n.js
index 42077aa..a304331 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -27,6 +27,7 @@ export default {
             booleanDesc: 'Enable',
 
             vectorSetSeparate: 'Separately',
+            absoluteMode: 'Absolute',
 
             setOptionError: 'Something Unexpected Happerns. Click refresh to try again!',
 
@@ -63,6 +64,7 @@ export default {
             booleanDesc: '开启该功能',
 
             vectorSetSeparate: '分别设置',
+            absoluteMode: '绝对值',
 
             setOptionError: '发生了一些意料之外的错误,点击刷新再试试!',
 


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org