Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
绝世唐门三哥
Vue Manage System
提交
245812df
Vue Manage System
项目概览
绝世唐门三哥
/
Vue Manage System
通知
3
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Vue Manage System
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
245812df
编写于
3月 01, 2017
作者:
L
lin-xin
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update README.md
上级
7520bf2c
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
163 addition
and
86 deletion
+163
-86
README.md
README.md
+163
-86
未找到文件。
README.md
浏览文件 @
245812df
...
...
@@ -66,110 +66,187 @@
npm run build
## 组件使用说明与演示 ##
### element-ui ###
一套基于vue.js2.0的桌面组件库。访问地址:
[
element
](
http://element.eleme.io/#/zh-CN/component/layout
)
### vue-datasource ###
一个用于动态创建表格的vue.js服务端组件。访问地址:
[
vue-datasource
](
https://github.com/coderdiaz/vue-datasource
)
```
JavaScript
<template>
<div>
<datasource language="en" :table-data="information.data"
:columns="columns"
:pagination="information.pagination"
:actions="actions"
v-on:change="changePage"
v-on:searching="onSearch"></datasource>
</div>
</template>
<script>
import Datasource from 'vue-datasource'; // 导入quillEditor组件
export default {
data: function(){
return {
information: {
pagination: {...}, // 页码配置
data: [...]
},
columns: [...], // 列名配置
actions: [...] // 功能配置
}
},
components: {
Datasource // 声明组件Datasource
},
methods: {
changePage(values) {...},
onSearch(searchQuery) {...}
}
}
</script>
```
### 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>
```
JavaScript
<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>
```
JavaScript
<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>
<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>
```
JavaScript
<template>
<div>
<IEcharts :option="bar"></IEcharts>
</div>
</template>
<script>
import IEcharts from 'vue-echarts-v3'; // 导入IEcharts组件
export default {
data: function(){
return {
bar: {
title: {
text: '柱状图' // 图标标题文本
},
tooltip: {},
xAxis: { // 横坐标
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {}, // 纵坐标
series: [{
name: '销量',
type: 'bar', // 图标类型
data: [5, 20, 36, 10, 10, 20]
}]
}
}
},
components: {
IEcharts // 声明组件VueCoreImageUpload
}
}
</script>
```
## 其他注意事项 ##
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录