Bladeren bron

Update README.md

lin-xin 9 jaren geleden
bovenliggende
commit
7520bf2c45
3 gewijzigde bestanden met toevoegingen van 106 en 3 verwijderingen
  1. 104 0
      README.md
  2. 1 1
      src/components/page/Markdown.vue
  3. 1 2
      src/components/page/Upload.vue

+ 104 - 0
README.md

@@ -66,6 +66,110 @@
 	npm run build
 
 ## 组件使用说明与演示 ##
+### Vue-Quill-Editor ###
+基于Quill、适用于Vue2的富文本编辑器。访问地址:[vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
+
+	<template>
+		<div>
+			<quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
+		</div>
+	</template>
+
+	<script>
+		import { quillEditor } from 'vue-quill-editor';			// 导入quillEditor组件
+	    export default {
+	        data: function(){
+	            return {
+	                content: '',								// 编辑器的内容
+	                editorOption: {								// 编辑器的配置
+	                    // something config
+	                }
+	            }
+	        },
+	        components: {
+	            quillEditor										// 声明组件quillEditor
+	        }
+		}
+	</script>
+
+### Vue-SimpleMDE ###
+Vue.js的Markdown Editor组件。访问地址:[Vue-SimpleMDE](https://github.com/F-loat/vue-simplemde)
+
+	<template>
+	    <div>
+	        <markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor>
+	    </div>
+	</template>
+
+	<script>
+	    import { markdownEditor } from 'vue-simplemde';			// 导入markdownEditor组件
+	    export default {
+	        data: function(){
+	            return {
+	                content:'',									// markdown编辑器内容
+	                configs: {									// markdown编辑器配置参数
+	                    status: false,							// 禁用底部状态栏
+	                    initialValue: 'Hello BBK',				// 设置初始值
+	                    renderingConfig: {
+	                        codeSyntaxHighlighting: true,		// 开启代码高亮
+	                        highlightingTheme: 'atom-one-light' // 自定义代码高亮主题
+	                    }
+	                }
+	            }
+	        },
+	        components: {
+	            markdownEditor									// 声明组件markdownEditor
+	        }
+	    }
+	</script>
+
+### Vue-Core-Image-Upload ###
+一款轻量级的vue上传插件,支持裁剪。访问地址:[Vue-Core-Image-Upload](https://github.com/Vanthink-UED/vue-core-image-upload)
+
+```JavaScript
+
+	<template>
+	    <div>
+			<img :src="src">									// 用于显示上传的图片
+	        <vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
+	           :crop="true"										// 是否裁剪
+	           text="上传图片"
+	           url=""											// 上传路径
+	           extensions="png,gif,jpeg,jpg"					// 限制文件类型
+	           @:imageuploaded="imageuploaded">					// 监听图片上传完成事件
+			</vue-core-image-upload>
+	    </div>
+	</template>
+	
+	<script>
+	    import VueCoreImageUpload  from 'vue-core-image-upload';	// 导入VueCoreImageUpload组件
+	    export default {
+	        data: function(){
+	            return {
+	                src:'../img/1.jpg'							// 默认显示图片地址
+	            }
+	        },
+	        components: {
+	            VueCoreImageUpload								// 声明组件VueCoreImageUpload
+	        },
+	        methods:{
+	            imageuploaded(res) {							// 定义上传完成执行的方法
+	                console.log(res)
+	            }
+	        }
+	    }
+	</script>
+
+```
+
+### vue-echarts-v3 ###
+基于vue2和eCharts.js3的图表组件。访问地址:[vue-echarts-v3](https://github.com/xlsdg/vue-echarts-v3)
+
+	<template>
+	    <div>
+	        <markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor>
+	    </div>
+	</template>
 
 
 ## 其他注意事项 ##

+ 1 - 1
src/components/page/Markdown.vue

@@ -21,7 +21,7 @@
             return {
                 content:'',
                 configs: {
-                    status: false,
+                    status: true,
                     initialValue: 'Hello BBK',
                     renderingConfig: {
                         codeSyntaxHighlighting: true,

+ 1 - 2
src/components/page/Upload.vue

@@ -41,7 +41,6 @@
 </template>
 
 <script>
-    import axios from 'axios';
     import VueCoreImageUpload  from 'vue-core-image-upload';
     export default {
         data: function(){
@@ -51,7 +50,7 @@
             }
         },
         components: {
-            VueCoreImageUpload
+                VueCoreImageUpload
         },
         methods:{
             imageuploaded(res) {