Update readme
lin-xin
parent
0a17d0f5f2
commit
098fe34192
101
README.md
101
README.md
|
|
@ -37,7 +37,6 @@
|
|||
| |-- BaseTable.vue // 基础表格
|
||||
| |-- Login.vue // 登录
|
||||
| |-- Markdown.vue // markdown组件
|
||||
| |-- MixCharts.vue // 混合图表
|
||||
| |-- Readme.vue // 自述组件
|
||||
| |-- Upload.vue // 图片上传
|
||||
| |-- VueEditor.vue // 富文本编辑器
|
||||
|
|
@ -54,9 +53,9 @@
|
|||
|
||||
## 安装步骤 ##
|
||||
|
||||
git clone https://github.com/lin-xin/manage-system.git // 把模板下载到本地
|
||||
cd manage-system // 进入模板目录
|
||||
npm install // 安装项目依赖，等待安装完成之后
|
||||
git clone https://github.com/lin-xin/manage-system.git // 把模板下载到本地
|
||||
cd manage-system // 进入模板目录
|
||||
npm install // 安装项目依赖，等待安装完成之后
|
||||
|
||||
## 本地开发 ##
|
||||
|
||||
|
|
@ -89,20 +88,20 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Datasource from 'vue-datasource'; // 导入quillEditor组件
|
||||
import Datasource from 'vue-datasource'; // 导入quillEditor组件
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
information: {
|
||||
pagination: {...}, // 页码配置
|
||||
pagination: {...}, // 页码配置
|
||||
data: [...]
|
||||
},
|
||||
columns: [...], // 列名配置
|
||||
actions: [...] // 功能配置
|
||||
columns: [...], // 列名配置
|
||||
actions: [...] // 功能配置
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Datasource // 声明组件Datasource
|
||||
Datasource
|
||||
},
|
||||
methods: {
|
||||
changePage(values) {...},
|
||||
|
|
@ -124,18 +123,18 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { quillEditor } from 'vue-quill-editor'; // 导入quillEditor组件
|
||||
import { quillEditor } from 'vue-quill-editor'; // 导入quillEditor组件
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
content: '', // 编辑器的内容
|
||||
editorOption: { // 编辑器的配置
|
||||
content: '', // 编辑器的内容
|
||||
editorOption: { // 编辑器的配置
|
||||
// something config
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
quillEditor // 声明组件quillEditor
|
||||
quillEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -152,17 +151,17 @@ Vue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.c
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { markdownEditor } from 'vue-simplemde'; // 导入markdownEditor组件
|
||||
import { markdownEditor } from 'vue-simplemde'; // 导入markdownEditor组件
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
content:'', // markdown编辑器内容
|
||||
configs: { // markdown编辑器配置参数
|
||||
status: false, // 禁用底部状态栏
|
||||
initialValue: 'Hello BBK', // 设置初始值
|
||||
content:'', // markdown编辑器内容
|
||||
configs: { // markdown编辑器配置参数
|
||||
status: false, // 禁用底部状态栏
|
||||
initialValue: 'Hello BBK', // 设置初始值
|
||||
renderingConfig: {
|
||||
codeSyntaxHighlighting: true, // 开启代码高亮
|
||||
highlightingTheme: 'atom-one-light' // 自定义代码高亮主题
|
||||
codeSyntaxHighlighting: true, // 开启代码高亮
|
||||
highlightingTheme: 'atom-one-light' // 自定义代码高亮主题
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -181,30 +180,30 @@ Vue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.c
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<img :src="src"> // 用于显示上传的图片
|
||||
<img :src="src"> // 用于显示上传的图片
|
||||
<vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
|
||||
:crop="true" // 是否裁剪
|
||||
:crop="true" // 是否裁剪
|
||||
text="上传图片"
|
||||
url="" // 上传路径
|
||||
extensions="png,gif,jpeg,jpg" // 限制文件类型
|
||||
@:imageuploaded="imageuploaded"> // 监听图片上传完成事件
|
||||
url="" // 上传路径
|
||||
extensions="png,gif,jpeg,jpg" // 限制文件类型
|
||||
@:imageuploaded="imageuploaded"> // 监听图片上传完成事件
|
||||
</vue-core-image-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueCoreImageUpload from 'vue-core-image-upload'; // 导入VueCoreImageUpload组件
|
||||
import VueCoreImageUpload from 'vue-core-image-upload'; // 导入VueCoreImageUpload组件
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
src:'../img/1.jpg' // 默认显示图片地址
|
||||
src:'../img/1.jpg' // 默认显示图片地址
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VueCoreImageUpload // 声明组件VueCoreImageUpload
|
||||
VueCoreImageUpload // 声明组件VueCoreImageUpload
|
||||
},
|
||||
methods:{
|
||||
imageuploaded(res) { // 定义上传完成执行的方法
|
||||
imageuploaded(res) { // 定义上传完成执行的方法
|
||||
console.log(res)
|
||||
}
|
||||
}
|
||||
|
|
@ -213,40 +212,44 @@ Vue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.c
|
|||
|
||||
```
|
||||
|
||||
### vue-echarts-v3 ###
|
||||
基于vue2和eCharts.js3的图表组件。访问地址：[vue-echarts-v3](https://github.com/xlsdg/vue-echarts-v3)
|
||||
### vue-schart ###
|
||||
vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart)
|
||||
|
||||
```JavaScript
|
||||
<template>
|
||||
<div>
|
||||
<IEcharts :option="bar"></IEcharts>
|
||||
<schart :canvasId="canvasId"
|
||||
:type="type"
|
||||
:width="width"
|
||||
:height="height"
|
||||
:data="data"
|
||||
:options="options"
|
||||
></schart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IEcharts from 'vue-echarts-v3'; // 导入IEcharts组件
|
||||
import Schart from 'vue-schart'; // 导入Schart组件
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
bar: {
|
||||
title: {
|
||||
text: '柱状图' // 图标标题文本
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: { // 横坐标
|
||||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
|
||||
},
|
||||
yAxis: {}, // 纵坐标
|
||||
series: [{
|
||||
name: '销量',
|
||||
type: 'bar', // 图标类型
|
||||
data: [5, 20, 36, 10, 10, 20]
|
||||
}]
|
||||
}
|
||||
canvasId: 'myCanvas', // canvas的id
|
||||
type: 'bar', // 图表类型
|
||||
width: 500,
|
||||
height: 400,
|
||||
data: [
|
||||
{name: '2014', value: 1342},
|
||||
{name: '2015', value: 2123},
|
||||
{name: '2016', value: 1654},
|
||||
{name: '2017', value: 1795},
|
||||
],
|
||||
options: { // 图表可选参数
|
||||
title: 'Total sales of stores in recent years'
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
IEcharts // 声明组件VueCoreImageUpload
|
||||
Schart
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
64
README_EN.md
64
README_EN.md
|
|
@ -68,10 +68,10 @@ The scheme as a set of multi-function background frame templates, suitable for m
|
|||
## Component description and presentation ##
|
||||
|
||||
### element-ui ###
|
||||
A desktop component library based on vue.js2.0 . live demo：[element](http://element.eleme.io/#/zh-CN/component/layout)
|
||||
A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout)
|
||||
|
||||
### vue-datasource ###
|
||||
A Vue.js server side component to create dynamic tables. live demo：[vue-datasource](https://github.com/coderdiaz/vue-datasource)
|
||||
A Vue.js server side component to create dynamic tables. Github : [vue-datasource](https://github.com/coderdiaz/vue-datasource)
|
||||
|
||||
```JavaScript
|
||||
<template>
|
||||
|
|
@ -86,16 +86,16 @@ A Vue.js server side component to create dynamic tables. live demo：[vue-dataso
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Datasource from 'vue-datasource'; // import Datasource component
|
||||
import Datasource from 'vue-datasource'; // import Datasource component
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
information: {
|
||||
pagination: {...}, // pagination config
|
||||
pagination: {...}, // pagination config
|
||||
data: [...]
|
||||
},
|
||||
columns: [...], // col config
|
||||
actions: [...] // function config
|
||||
columns: [...], // col config
|
||||
actions: [...] // function config
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -111,7 +111,7 @@ A Vue.js server side component to create dynamic tables. live demo：[vue-dataso
|
|||
|
||||
|
||||
### Vue-Quill-Editor ###
|
||||
Quill editor component for Vue2. live demo：[vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
|
||||
Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
|
||||
|
||||
```JavaScript
|
||||
<template>
|
||||
|
|
@ -121,7 +121,7 @@ Quill editor component for Vue2. live demo：[vue-quill-editor](https://github.c
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { quillEditor } from 'vue-quill-editor'; // import quillEditor component
|
||||
import { quillEditor } from 'vue-quill-editor'; // import quillEditor component
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
|
|
@ -139,7 +139,7 @@ Quill editor component for Vue2. live demo：[vue-quill-editor](https://github.c
|
|||
```
|
||||
|
||||
### Vue-SimpleMDE ###
|
||||
Markdown Editor component for Vue.js. live demo：[Vue-SimpleMDE](https://github.com/F-loat/vue-simplemde)
|
||||
Markdown Editor component for Vue.js. Github : [Vue-SimpleMDE](https://github.com/F-loat/vue-simplemde)
|
||||
|
||||
```JavaScript
|
||||
<template>
|
||||
|
|
@ -172,7 +172,7 @@ Markdown Editor component for Vue.js. live demo：[Vue-SimpleMDE](https://github
|
|||
```
|
||||
|
||||
### Vue-Core-Image-Upload ###
|
||||
a vue plugin for image upload and crop. live demo：[Vue-Core-Image-Upload](https://github.com/Vanthink-UED/vue-core-image-upload)
|
||||
a vue plugin for image upload and crop. Github : [Vue-Core-Image-Upload](https://github.com/Vanthink-UED/vue-core-image-upload)
|
||||
|
||||
```JavaScript
|
||||
|
||||
|
|
@ -210,40 +210,44 @@ a vue plugin for image upload and crop. live demo：[Vue-Core-Image-Upload](http
|
|||
|
||||
```
|
||||
|
||||
### vue-echarts-v3 ###
|
||||
Vue.js v2.x+ component wrap for ECharts.js v3.x+. live demo：[vue-echarts-v3](https://github.com/xlsdg/vue-echarts-v3)
|
||||
### vue-schart ###
|
||||
Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vue-schart)
|
||||
|
||||
```JavaScript
|
||||
<template>
|
||||
<div>
|
||||
<IEcharts :option="bar"></IEcharts>
|
||||
<schart :canvasId="canvasId"
|
||||
:type="type"
|
||||
:width="width"
|
||||
:height="height"
|
||||
:data="data"
|
||||
:options="options"
|
||||
></schart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IEcharts from 'vue-echarts-v3';
|
||||
import Schart from 'vue-schart';
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
bar: {
|
||||
title: {
|
||||
text: '柱状图'
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
|
||||
},
|
||||
yAxis: {},
|
||||
series: [{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: [5, 20, 36, 10, 10, 20]
|
||||
}]
|
||||
}
|
||||
canvasId: 'myCanvas',
|
||||
type: 'bar',
|
||||
width: 500,
|
||||
height: 400,
|
||||
data: [
|
||||
{name: '2014', value: 1342},
|
||||
{name: '2015', value: 2123},
|
||||
{name: '2016', value: 1654},
|
||||
{name: '2017', value: 1795},
|
||||
],
|
||||
options: {
|
||||
title: 'Total sales of stores in recent years'
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
IEcharts
|
||||
Schart
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue