Skip to content

Commit 098fe34

Browse files
lin-xinlin-xin
committed
Update readme
1 parent 0a17d0f commit 098fe34

File tree

2 files changed

+86
-79
lines changed

2 files changed

+86
-79
lines changed

‎README.md‎

Lines changed: 52 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@
3737
| |-- BaseTable.vue // 基础表格
3838
| |-- Login.vue // 登录
3939
| |-- Markdown.vue // markdown组件
40-
| |-- MixCharts.vue // 混合图表
4140
| |-- Readme.vue // 自述组件
4241
| |-- Upload.vue // 图片上传
4342
| |-- VueEditor.vue // 富文本编辑器
@@ -54,9 +53,9 @@
5453

5554
## 安装步骤 ##
5655

57-
git clone https://github.com/lin-xin/manage-system.git // 把模板下载到本地
58-
cd manage-system // 进入模板目录
59-
npm install // 安装项目依赖，等待安装完成之后
56+
git clone https://github.com/lin-xin/manage-system.git // 把模板下载到本地
57+
cd manage-system // 进入模板目录
58+
npm install // 安装项目依赖，等待安装完成之后
6059

6160
## 本地开发 ##
6261

@@ -89,20 +88,20 @@
8988
</template>
9089

9190
<script>
92-
import Datasource from 'vue-datasource'; // 导入quillEditor组件
91+
import Datasource from 'vue-datasource'; // 导入quillEditor组件
9392
export default {
9493
data: function(){
9594
return {
9695
information: {
97-
pagination: {...}, // 页码配置
96+
pagination: {...}, // 页码配置
9897
data: [...]
9998
},
100-
columns: [...], // 列名配置
101-
actions: [...] // 功能配置
99+
columns: [...], // 列名配置
100+
actions: [...] // 功能配置
102101
}
103102
},
104103
components: {
105-
Datasource // 声明组件Datasource
104+
Datasource
106105
},
107106
methods: {
108107
changePage(values) {...},
@@ -124,18 +123,18 @@
124123
</template>
125124

126125
<script>
127-
import { quillEditor } from 'vue-quill-editor'; // 导入quillEditor组件
126+
import { quillEditor } from 'vue-quill-editor'; // 导入quillEditor组件
128127
export default {
129128
data: function(){
130129
return {
131-
content: '', // 编辑器的内容
132-
editorOption: { // 编辑器的配置
130+
content: '', // 编辑器的内容
131+
editorOption: { // 编辑器的配置
133132
// something config
134133
}
135134
}
136135
},
137136
components: {
138-
quillEditor // 声明组件quillEditor
137+
quillEditor
139138
}
140139
}
141140
</script>
@@ -152,17 +151,17 @@ Vue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.c
152151
</template>
153152

154153
<script>
155-
import { markdownEditor } from 'vue-simplemde'; // 导入markdownEditor组件
154+
import { markdownEditor } from 'vue-simplemde'; // 导入markdownEditor组件
156155
export default {
157156
data: function(){
158157
return {
159-
content:'', // markdown编辑器内容
160-
configs: { // markdown编辑器配置参数
161-
status: false, // 禁用底部状态栏
162-
initialValue: 'Hello BBK', // 设置初始值
158+
content:'', // markdown编辑器内容
159+
configs: { // markdown编辑器配置参数
160+
status: false, // 禁用底部状态栏
161+
initialValue: 'Hello BBK', // 设置初始值
163162
renderingConfig: {
164-
codeSyntaxHighlighting: true, // 开启代码高亮
165-
highlightingTheme: 'atom-one-light' // 自定义代码高亮主题
163+
codeSyntaxHighlighting: true, // 开启代码高亮
164+
highlightingTheme: 'atom-one-light' // 自定义代码高亮主题
166165
}
167166
}
168167
}
@@ -181,30 +180,30 @@ Vue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.c
181180

182181
<template>
183182
<div>
184-
<img :src="src"> // 用于显示上传的图片
183+
<img :src="src"> // 用于显示上传的图片
185184
<vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
186-
:crop="true" // 是否裁剪
185+
:crop="true" // 是否裁剪
187186
text="上传图片"
188-
url="" // 上传路径
189-
extensions="png,gif,jpeg,jpg" // 限制文件类型
190-
@:imageuploaded="imageuploaded"> // 监听图片上传完成事件
187+
url="" // 上传路径
188+
extensions="png,gif,jpeg,jpg" // 限制文件类型
189+
@:imageuploaded="imageuploaded"> // 监听图片上传完成事件
191190
</vue-core-image-upload>
192191
</div>
193192
</template>
194193

195194
<script>
196-
import VueCoreImageUpload from 'vue-core-image-upload'; // 导入VueCoreImageUpload组件
195+
import VueCoreImageUpload from 'vue-core-image-upload'; // 导入VueCoreImageUpload组件
197196
export default {
198197
data: function(){
199198
return {
200-
src:'../img/1.jpg' // 默认显示图片地址
199+
src:'../img/1.jpg' // 默认显示图片地址
201200
}
202201
},
203202
components: {
204-
VueCoreImageUpload // 声明组件VueCoreImageUpload
203+
VueCoreImageUpload // 声明组件VueCoreImageUpload
205204
},
206205
methods:{
207-
imageuploaded(res) { // 定义上传完成执行的方法
206+
imageuploaded(res) { // 定义上传完成执行的方法
208207
console.log(res)
209208
}
210209
}
@@ -213,40 +212,44 @@ Vue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.c
213212

214213
```
215214

216-
### vue-echarts-v3 ###
217-
基于vue2和eCharts.js3的图表组件。访问地址：[vue-echarts-v3](https://github.com/xlsdg/vue-echarts-v3)
215+
### vue-schart ###
216+
vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart)
218217

219218
```JavaScript
220219
<template>
221220
<div>
222-
<IEcharts :option="bar"></IEcharts>
221+
<schart :canvasId="canvasId"
222+
:type="type"
223+
:width="width"
224+
:height="height"
225+
:data="data"
226+
:options="options"
227+
></schart>
223228
</div>
224229
</template>
225230

226231
<script>
227-
import IEcharts from 'vue-echarts-v3'; // 导入IEcharts组件
232+
import Schart from 'vue-schart'; // 导入Schart组件
228233
export default {
229234
data: function(){
230235
return {
231-
bar: {
232-
title: {
233-
text: '柱状图' // 图标标题文本
234-
},
235-
tooltip: {},
236-
xAxis: { // 横坐标
237-
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
238-
},
239-
yAxis: {}, // 纵坐标
240-
series: [{
241-
name: '销量',
242-
type: 'bar', // 图标类型
243-
data: [5, 20, 36, 10, 10, 20]
244-
}]
245-
}
236+
canvasId: 'myCanvas', // canvas的id
237+
type: 'bar', // 图表类型
238+
width: 500,
239+
height: 400,
240+
data: [
241+
{name: '2014', value: 1342},
242+
{name: '2015', value: 2123},
243+
{name: '2016', value: 1654},
244+
{name: '2017', value: 1795},
245+
],
246+
options: { // 图表可选参数
247+
title: 'Total sales of stores in recent years'
248+
}
246249
}
247250
},
248251
components: {
249-
IEcharts // 声明组件VueCoreImageUpload
252+
Schart
250253
}
251254
}
252255
</script>

‎README_EN.md‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,10 @@ The scheme as a set of multi-function background frame templates, suitable for m
6868
## Component description and presentation ##
6969

7070
### element-ui ###
71-
A desktop component library based on vue.js2.0 . live demo：[element](http://element.eleme.io/#/zh-CN/component/layout)
71+
A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout)
7272

7373
### vue-datasource ###
74-
A Vue.js server side component to create dynamic tables. live demo：[vue-datasource](https://github.com/coderdiaz/vue-datasource)
74+
A Vue.js server side component to create dynamic tables. Github : [vue-datasource](https://github.com/coderdiaz/vue-datasource)
7575

7676
```JavaScript
7777
<template>
@@ -86,16 +86,16 @@ A Vue.js server side component to create dynamic tables. live demo：[vue-dataso
8686
</template>
8787

8888
<script>
89-
import Datasource from 'vue-datasource'; // import Datasource component
89+
import Datasource from 'vue-datasource'; // import Datasource component
9090
export default {
9191
data: function(){
9292
return {
9393
information: {
94-
pagination: {...}, // pagination config
94+
pagination: {...}, // pagination config
9595
data: [...]
9696
},
97-
columns: [...], // col config
98-
actions: [...] // function config
97+
columns: [...], // col config
98+
actions: [...] // function config
9999
}
100100
},
101101
components: {
@@ -111,7 +111,7 @@ A Vue.js server side component to create dynamic tables. live demo：[vue-dataso
111111

112112

113113
### Vue-Quill-Editor ###
114-
Quill editor component for Vue2. live demo：[vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
114+
Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
115115

116116
```JavaScript
117117
<template>
@@ -121,7 +121,7 @@ Quill editor component for Vue2. live demo：[vue-quill-editor](https://github.c
121121
</template>
122122

123123
<script>
124-
import { quillEditor } from 'vue-quill-editor'; // import quillEditor component
124+
import { quillEditor } from 'vue-quill-editor'; // import quillEditor component
125125
export default {
126126
data: function(){
127127
return {
@@ -139,7 +139,7 @@ Quill editor component for Vue2. live demo：[vue-quill-editor](https://github.c
139139
```
140140

141141
### Vue-SimpleMDE ###
142-
Markdown Editor component for Vue.js. live demo：[Vue-SimpleMDE](https://github.com/F-loat/vue-simplemde)
142+
Markdown Editor component for Vue.js. Github : [Vue-SimpleMDE](https://github.com/F-loat/vue-simplemde)
143143

144144
```JavaScript
145145
<template>
@@ -172,7 +172,7 @@ Markdown Editor component for Vue.js. live demo：[Vue-SimpleMDE](https://github
172172
```
173173

174174
### Vue-Core-Image-Upload ###
175-
a vue plugin for image upload and crop. live demo：[Vue-Core-Image-Upload](https://github.com/Vanthink-UED/vue-core-image-upload)
175+
a vue plugin for image upload and crop. Github : [Vue-Core-Image-Upload](https://github.com/Vanthink-UED/vue-core-image-upload)
176176

177177
```JavaScript
178178

@@ -210,40 +210,44 @@ a vue plugin for image upload and crop. live demo：[Vue-Core-Image-Upload](http
210210

211211
```
212212

213-
### vue-echarts-v3 ###
214-
Vue.js v2.x+ component wrap for ECharts.js v3.x+. live demo：[vue-echarts-v3](https://github.com/xlsdg/vue-echarts-v3)
213+
### vue-schart ###
214+
Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vue-schart)
215215

216216
```JavaScript
217217
<template>
218218
<div>
219-
<IEcharts :option="bar"></IEcharts>
219+
<schart :canvasId="canvasId"
220+
:type="type"
221+
:width="width"
222+
:height="height"
223+
:data="data"
224+
:options="options"
225+
></schart>
220226
</div>
221227
</template>
222228

223229
<script>
224-
import IEcharts from 'vue-echarts-v3';
230+
import Schart from 'vue-schart';
225231
export default {
226232
data: function(){
227233
return {
228-
bar: {
229-
title: {
230-
text: '柱状图'
231-
},
232-
tooltip: {},
233-
xAxis: {
234-
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
235-
},
236-
yAxis: {},
237-
series: [{
238-
name: '销量',
239-
type: 'bar',
240-
data: [5, 20, 36, 10, 10, 20]
241-
}]
242-
}
234+
canvasId: 'myCanvas',
235+
type: 'bar',
236+
width: 500,
237+
height: 400,
238+
data: [
239+
{name: '2014', value: 1342},
240+
{name: '2015', value: 2123},
241+
{name: '2016', value: 1654},
242+
{name: '2017', value: 1795},
243+
],
244+
options: {
245+
title: 'Total sales of stores in recent years'
246+
}
243247
}
244248
},
245249
components: {
246-
IEcharts
250+
Schart
247251
}
248252
}
249253
</script>

0 commit comments

Comments
 (0)