You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dubbo.apache.org by mi...@apache.org on 2018/09/29 09:03:38 UTC
[incubator-dubbo-ops] branch develop updated: Separate each
configuration item (#127)
This is an automated email from the ASF dual-hosted git repository.
min pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/incubator-dubbo-ops.git
The following commit(s) were added to refs/heads/develop by this push:
new ccb7d81 Separate each configuration item (#127)
ccb7d81 is described below
commit ccb7d814fbf9924091658a57b82713bfa37caba8
Author: 马金凯 <ma...@vip.qq.com>
AuthorDate: Sat Sep 29 17:03:34 2018 +0800
Separate each configuration item (#127)
---
.../src/components/AccessControl.vue | 6 +-
dubbo-admin-frontend/src/components/AceEditor.vue | 160 +++++++++++++--------
2 files changed, 106 insertions(+), 60 deletions(-)
diff --git a/dubbo-admin-frontend/src/components/AccessControl.vue b/dubbo-admin-frontend/src/components/AccessControl.vue
index 73d9063..de7be6a 100644
--- a/dubbo-admin-frontend/src/components/AccessControl.vue
+++ b/dubbo-admin-frontend/src/components/AccessControl.vue
@@ -102,8 +102,7 @@
:readonly="modal.id != null"
v-model="modal.service" />
<v-subheader class="pa-0 mt-3">BLACK/WHITE LIST CONTENT</v-subheader>
- <ace-editor v-model="modal.content"
- :config="modal.aceConfig" />
+ <ace-editor v-model="modal.content" />
</v-form>
</v-card-text>
<v-card-actions>
@@ -187,8 +186,7 @@ export default {
' - 2.2.2.2\n' +
'whitelist:\n' +
' - 3.3.3.3\n' +
- ' - 4.4.*\n',
- aceConfig: {}
+ ' - 4.4.*\n'
},
services: [],
confirm: {
diff --git a/dubbo-admin-frontend/src/components/AceEditor.vue b/dubbo-admin-frontend/src/components/AceEditor.vue
index 1469f2a..afbcef3 100644
--- a/dubbo-admin-frontend/src/components/AceEditor.vue
+++ b/dubbo-admin-frontend/src/components/AceEditor.vue
@@ -14,39 +14,72 @@
- See the License for the specific language governing permissions and
- limitations under the License.
-->
+
+<!--
+Usage:
+ <template>
+ <ace-editor v-model="content" width="100%" height="200px" lang="javascript" :theme="theme" />
+ </template>
+ <script>
+ import AceEditor from '@/components/AceEditor'
+ export default {
+ components: {
+ AceEditor
+ },
+ data: () => ({
+ content: 'console.log("Hello Ace Editor!")',
+ theme: 'dawn'
+ })
+ }
+</script>
+-->
<template>
- <div :style="{height: instanceConfig.height, width: instanceConfig.width}"></div>
+ <div :style="{height: height, width: width}"></div>
</template>
<script>
import brace from 'brace'
-let defaultConfig = {
- width: '100%',
- height: '300px',
- lang: 'yaml',
- theme: 'monokai',
- readonly: false,
- fontSize: 14,
- tabSize: 2,
- overrideValueHistory: true
-}
-
export default {
name: 'ace-editor',
props: {
value: String,
- config: {
- type: Object,
- default () {
- return {}
- }
+ width: {
+ type: String,
+ default: '100%'
+ },
+ height: {
+ type: String,
+ default: '300px'
+ },
+ lang: {
+ type: String,
+ default: 'yaml'
+ },
+ theme: {
+ type: String,
+ default: 'monokai'
+ },
+ readonly: {
+ type: Boolean,
+ default: false
+ },
+ fontsize: {
+ type: Number,
+ default: 14
+ },
+ tabsize: {
+ type: Number,
+ default: 2
+ },
+ overrideValueHistory: {
+ type: Boolean,
+ default: true
}
},
data () {
return {
$ace: null,
- instanceConfig: Object.assign({}, defaultConfig, this.config),
_content: ''
}
},
@@ -55,7 +88,7 @@ export default {
if (newVal !== oldVal) {
if (this._content !== newVal) {
this._content = newVal
- if (this.instanceConfig.overrideValueHistory) {
+ if (this.overrideValueHistory) {
this.$ace.getSession().setValue(newVal)
} else {
this.$ace.setValue(newVal, 1)
@@ -63,53 +96,68 @@ export default {
}
}
},
- config (newVal, oldVal) {
+ lang (newVal, oldVal) {
+ if (newVal !== oldVal && newVal) {
+ require(`brace/mode/${newVal}`)
+ this.$ace.getSession().setMode(`ace/mode/${newVal}`)
+ }
+ },
+ theme (newVal, oldVal) {
+ if (newVal !== oldVal && newVal) {
+ require(`brace/theme/${newVal}`)
+ this.$ace.setTheme(`ace/theme/${newVal}`)
+ }
+ },
+ readonly (newVal, oldVal) {
+ if (newVal !== oldVal) {
+ this.$ace.setReadOnly(newVal)
+ }
+ },
+ fontsize (newVal, oldVal) {
if (newVal !== oldVal) {
- this.instanceConfig = Object.assign({}, defaultConfig, newVal)
- this.initAce(this.instanceConfig)
+ this.$ace.setFontSize(newVal)
}
}
},
- methods: {
- initAce (conf) {
- this.$ace = brace.edit(this.$el)
- this.$ace.$blockScrolling = Infinity
-
- this.$emit('init', this.$ace)
-
- require(`brace/mode/${conf.lang}`)
- require(`brace/theme/${conf.theme}`)
+ mounted () {
+ this.$ace = brace.edit(this.$el)
+ this.$ace.$blockScrolling = Infinity
+ let {
+ lang,
+ theme,
+ readonly,
+ fontsize,
+ tabsize,
+ overrideValueHistory
+ } = this
- let session = this.$ace.getSession()
- session.setMode(`ace/mode/${conf.lang}`)
- session.setTabSize(conf.tabSize)
- session.setUseSoftTabs(true)
- session.setUseWrapMode(true)
+ this.$emit('init', this.$ace)
- if (conf.overrideValueHistory) {
- session.setValue(this.value)
- } else {
- this.$ace.setValue(this.value, 1)
- }
+ let session = this.$ace.getSession()
- this.$ace.setTheme(`ace/theme/${conf.theme}`)
- this.$ace.setReadOnly(conf.readonly)
- this.$ace.setFontSize(conf.fontSize)
- this.$ace.setShowPrintMargin(false)
+ require(`brace/mode/${lang}`)
+ session.setMode(`ace/mode/${lang}`)
+ session.setTabSize(tabsize)
+ session.setUseSoftTabs(true)
+ session.setUseWrapMode(true)
- this.$ace.on('change', () => {
- var aceValue = this.$ace.getValue()
- this.$emit('input', aceValue)
- this._content = aceValue
- })
- }
- },
- mounted () {
- if (this.instanceConfig) {
- this.initAce(this.instanceConfig)
+ if (overrideValueHistory) {
+ session.setValue(this.value)
} else {
- this.initAce(defaultConfig)
+ this.$ace.setValue(this.value, 1)
}
+
+ require(`brace/theme/${theme}`)
+ this.$ace.setTheme(`ace/theme/${theme}`)
+ this.$ace.setReadOnly(readonly)
+ this.$ace.setFontSize(fontsize)
+ this.$ace.setShowPrintMargin(false)
+
+ this.$ace.on('change', () => {
+ var aceValue = this.$ace.getValue()
+ this.$emit('input', aceValue)
+ this._content = aceValue
+ })
}
}
</script>