7171 </style >
7272
7373<script >
74- import InputArea from ' ./InputArea.vue'
75- import PreviewArea from ' ./PreviewArea.vue'
76- import Toolbar from ' ./Toolbar.vue'
77- import EditorDialog from ' ./Dialog.vue'
74+ import InputArea from ' ./InputArea.vue'
75+ import PreviewArea from ' ./PreviewArea.vue'
76+ import Toolbar from ' ./Toolbar.vue'
77+ import EditorDialog from ' ./Dialog.vue'
7878
79- import {defaultConfig , getConfig } from ' ./DefaultConfig'
79+ import {defaultConfig , getConfig } from ' ./DefaultConfig'
8080
81- export default {
82- name: ' luogu-markdown-editor' ,
83- props: {
84- value: {
85- type: String
86- },
87- config: {
88- type: Object ,
89- default : function () {
90- return defaultConfig
91- }
92- }
93- },
94- data () {
95- let config = getConfig (this .config )
96- return {
97- code: ' ' ,
98- showDialog: false ,
99- dialogRequest: {},
100- insertCode: null ,
101- editorConfig: config,
102- editorHeight: config .height
103- }
104- },
105- mounted () {
106- this .code = this .value
107- },
108- components: {
109- InputArea,
110- PreviewArea,
111- Toolbar,
112- EditorDialog
113- },
114- methods: {
115- updateCode (code ) {
116- this .$emit (' input' , code)
117- },
118- insert (code ) {
119- if (code !== null ) {
120- this .insertCode = code
121- }
122- },
123- closeDialog () {
124- this .showDialog = false
125- },
126- dialogFinish (request ) {
127- this .insert (request .callback (request .data ))
128- this .closeDialog ()
129- },
130- clickToolbar (request ) {
131- if (this .showDialog ) {
132- return
133- }
134- this .dialogRequest = request
135- this .showDialog = true
136- },
137- handleToolbarOperation (operation ) {
138- if (operation === ' hide' ) {
139- if (this .config .previewDisplay === ' normal' )
140- this .config .previewDisplay = ' hide'
141- else
142- this .config .previewDisplay = ' normal'
143- }
144- if (operation === ' fullscreen' ) {
145- if (! this .config .fullscreen ) {
146- this .config .fullscreen = true
147- this .editorHeight = (screen .height - this .$refs .toolbar .$el .clientHeight ).toString () + ' px'
148- console .log (this .editorHeight )
149-
150- } else {
151- this .config .fullscreen = false
152- this .editorHeight = this .editorConfig .height
153- }
154- }
155- }
81+ export default {
82+ name: ' luogu-markdown-editor' ,
83+ props: {
84+ value: {
85+ type: String
86+ },
87+ config: {
88+ type: Object ,
89+ default : function () {
90+ return defaultConfig
91+ }
92+ }
93+ },
94+ data () {
95+ let config = getConfig (this .config )
96+ return {
97+ code: ' ' ,
98+ showDialog: false ,
99+ dialogRequest: {},
100+ insertCode: null ,
101+ editorConfig: config,
102+ editorHeight: config .height
103+ }
104+ },
105+ mounted () {
106+ this .code = this .value
107+ },
108+ components: {
109+ InputArea,
110+ PreviewArea,
111+ Toolbar,
112+ EditorDialog
113+ },
114+ methods: {
115+ updateCode (code ) {
116+ this .$emit (' input' , code)
117+ },
118+ insert (code ) {
119+ if (code !== null ) {
120+ this .insertCode = code
121+ }
122+ },
123+ closeDialog () {
124+ this .showDialog = false
125+ },
126+ dialogFinish (request ) {
127+ this .insert (request .callback (request .data ))
128+ this .closeDialog ()
129+ },
130+ clickToolbar (request ) {
131+ if (this .showDialog ) {
132+ return
133+ }
134+ this .dialogRequest = request
135+ this .showDialog = true
136+ },
137+ handleToolbarOperation (operation ) {
138+ if (operation === ' hide' ) {
139+ if (this .config .previewDisplay === ' normal' ) { this .config .previewDisplay = ' hide' } else { this .config .previewDisplay = ' normal' }
140+ }
141+ if (operation === ' fullscreen' ) {
142+ if (! this .config .fullscreen ) {
143+ this .config .fullscreen = true
144+ this .editorHeight = (screen .height - this .$refs .toolbar .$el .clientHeight ).toString () + ' px'
145+ console .log (this .editorHeight )
146+ } else {
147+ this .config .fullscreen = false
148+ this .editorHeight = this .editorConfig .height
156149 }
150+ }
157151 }
152+ }
153+ }
158154 </script >
0 commit comments