Skip to content

Commit 4b8bc76

Browse files
dark-flamesdark-flames
committed
Update btns
1 parent 1564a1e commit 4b8bc76

File tree

8 files changed

+222
-25
lines changed

8 files changed

+222
-25
lines changed

‎src/components/Dialog.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
}
4848
4949
.mp-dialog-container {
50-
width: 380px;
50+
width: 500px;
5151
margin: 0 auto;
5252
background-color: #fff;
5353
border-radius: 2px;

‎src/components/dialog-input-components/AbstractInputComponent.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script>
2+
export default {
3+
props: {
4+
requestField: {
5+
type: Object
6+
},
7+
param: {
8+
default() {
9+
return {}
10+
}
11+
}
12+
},
13+
data() {
14+
return {
15+
request: this.requestField,
16+
value :this.requestField.default ? this.requestField.default : ''
17+
}
18+
},
19+
watch: {
20+
value(newValue) {
21+
this.request.value = newValue
22+
this.$emit('change', this.request)
23+
}
24+
}
25+
}
26+
</script>

‎src/components/dialog-input-components/CodeMirror.vue‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<template>
2+
<div id="mp-dialog-codemirror">
3+
<label v-if="request.title">{{ request.title }}</label>
4+
<div class="mp-dialog-codemirror-editor"></div>
5+
<codemirror
6+
:value="value"
7+
:options="this.param.editorSetting"
8+
ref="editor"
9+
@change="updateContent">
10+
</codemirror>
11+
</div>
12+
</template>
13+
14+
<style>
15+
#mp-dialog-codemirror {
16+
overflow: auto;
17+
}
18+
19+
#mp-dialog-codemirror label {
20+
padding-top: 5px;
21+
vertical-align: top;
22+
margin-right: 10px;
23+
width: 20%;
24+
font-size: 14px;
25+
color: #666;
26+
}
27+
28+
#mp-dialog-codemirror .mp-dialog-codemirror-editor {
29+
display: inline-block;
30+
width: 95%;
31+
}
32+
</style>
33+
34+
<script>
35+
import abstractInputComponent from './AbstractInputComponent.vue'
36+
import { codemirror } from 'vue-codemirror-lite'
37+
38+
export default {
39+
name: 'dialog-codemirror',
40+
extends: abstractInputComponent,
41+
components: {
42+
codemirror
43+
},
44+
mounted() {
45+
let defaultSetting = {
46+
lineNumbers: true,
47+
lineWrapping: true,
48+
height: '200px'
49+
}
50+
51+
if(!this.param.editorSetting)
52+
this.param.editorSetting = defaultSetting
53+
else {
54+
for(let setting in defaultSetting) {
55+
if(this.param.editorSetting[setting] === undefined)
56+
this.param.editorSetting[setting] = defaultSetting[setting]
57+
}
58+
}
59+
60+
this.editor.setSize('100%', this.param.editorSetting.height)
61+
this.editor.focus()
62+
},
63+
computed: {
64+
editor () {
65+
return this.$refs.editor.editor
66+
}
67+
},
68+
methods: {
69+
updateContent(newContent) {
70+
this.value = newContent
71+
}
72+
}
73+
}
74+
</script>

‎src/components/dialog-input-components/Input.vue‎

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,39 +14,26 @@
1414
float: left;
1515
padding-top: 5px;
1616
vertical-align: top;
17+
margin-right: 10px;
1718
width: 20%;
1819
font-size: 14px;
1920
color: #666;
2021
}
2122
2223
#mp-dialog-input input {
2324
float: left;
24-
width: 73%;
25+
width: 70%;
2526
color: #999;
2627
padding: 8px;
2728
border: 1px solid #ddd;
2829
}
2930
</style>
3031

3132
<script>
33+
import abstractInputComponent from './AbstractInputComponent.vue'
34+
3235
export default {
3336
name: 'dialog-input',
34-
props: {
35-
requestField: {
36-
type: Object
37-
}
38-
},
39-
data() {
40-
return {
41-
request: this.requestField,
42-
value :this.requestField.default ? this.requestField.default : ''
43-
}
44-
},
45-
watch: {
46-
value(newValue) {
47-
this.request.value = newValue
48-
this.$emit('change', this.request)
49-
}
50-
}
37+
extends: abstractInputComponent
5138
}
5239
</script>

‎src/components/dialog-input-components/Select.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<div id="mp-dialog-select">
3+
<label>{{ request.title }}</label>
4+
<select v-model="value">
5+
<option v-for="option in request.param.options" :value="option.value">{{ option.title }}</option>
6+
</select>
7+
</div>
8+
</template>
9+
10+
<style>
11+
#mp-dialog-select {
12+
overflow: auto;
13+
}
14+
15+
#mp-dialog-select label {
16+
float: left;
17+
padding-top: 5px;
18+
vertical-align: top;
19+
margin-right: 10px;
20+
width: 20%;
21+
font-size: 14px;
22+
color: #666;
23+
}
24+
25+
#mp-dialog-select select{
26+
float: left;
27+
display: inline-block;
28+
width: 70%;
29+
margin-top: 5px;
30+
color: #999;
31+
border: 1px solid #ddd;
32+
}
33+
</style>
34+
35+
<script>
36+
import abstractInputComponent from './AbstractInputComponent.vue'
37+
38+
export default {
39+
name: 'dialog-select',
40+
extends: abstractInputComponent
41+
}
42+
</script>

‎src/components/dialog-input-components/components.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
import Input from './input.vue'
1+
import input from './Input.vue'
2+
import select from './Select.vue'
3+
import codemirror from './CodeMirror.vue'
24

35
export default {
4-
'dialog-input': Input
6+
'dialog-input': input,
7+
'dialog-select': select,
8+
'dialog-codemirror': codemirror
59
}

‎src/components/toolbar-button/btn-code.js‎

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,48 @@ export default {
99
{
1010
name: 'lang',
1111
title: '语言类型',
12-
type: 'input',
12+
type: 'dialog-select',
13+
param: {
14+
options: [
15+
{
16+
title: "c",
17+
value: 'c'
18+
},
19+
{
20+
title: 'cpp',
21+
value: 'cpp'
22+
},
23+
{
24+
title: "pascal",
25+
value: 'pascal'
26+
},
27+
{
28+
title: "python",
29+
value: 'python'
30+
},
31+
{
32+
title: "java",
33+
value: 'java'
34+
},
35+
{
36+
title: "javascript",
37+
value: 'javascript'
38+
},
39+
{
40+
title: "php",
41+
value: 'php'
42+
},
43+
{
44+
title: "未选择",
45+
value: ''
46+
}
47+
]
48+
},
1349
default: ''
1450
},
1551
{
1652
name: 'code',
17-
title: '代码',
18-
type: 'textarea',
53+
type: 'dialog-codemirror',
1954
default: ''
2055
}
2156
],

‎src/components/toolbar-button/btn-table.js‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,28 @@ export default {
1717
title: '列数',
1818
type: 'dialog-input',
1919
default: '2'
20+
},
21+
{
22+
name: 'align',
23+
title: '对齐方式',
24+
type: 'dialog-select',
25+
param: {
26+
options: [
27+
{
28+
title: "左对齐",
29+
value: 1
30+
},
31+
{
32+
title: "居中",
33+
value: 2
34+
},
35+
{
36+
title: "右对齐",
37+
value: 3
38+
}
39+
]
40+
},
41+
default: 0
2042
}
2143
],
2244
callback (data) {
@@ -28,7 +50,14 @@ export default {
2850

2951
let divString = ''
3052
for (let i = 0; i < data.col; i++) {
31-
divString += '| ------------ '
53+
if(data.align === 1)
54+
divString += '| :----------- '
55+
else if(data.align === 2)
56+
divString += '| :----------: '
57+
else if(data.align === 3)
58+
divString += '| -----------: '
59+
else
60+
divString += '| -----------: '
3261
}
3362

3463
divString += '|'

0 commit comments

Comments
 (0)