添加权限测试页
lin-xin
parent
54e932862f
commit
ca465688d7
|
|
@ -31,12 +31,12 @@
|
|||
{
|
||||
icon: 'el-icon-setting',
|
||||
index: 'readme',
|
||||
title: '自述'
|
||||
title: '自述文件'
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-menu',
|
||||
index: '2',
|
||||
title: '表格',
|
||||
title: '常用表格',
|
||||
subs: [
|
||||
{
|
||||
index: 'basetable',
|
||||
|
|
@ -44,14 +44,14 @@
|
|||
},
|
||||
{
|
||||
index: 'vuetable',
|
||||
title: 'Vue表格组件'
|
||||
title: 'datasource表格'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-date',
|
||||
index: '3',
|
||||
title: '表单',
|
||||
title: '表单相关',
|
||||
subs: [
|
||||
{
|
||||
index: 'baseform',
|
||||
|
|
@ -74,17 +74,17 @@
|
|||
{
|
||||
icon: 'el-icon-star-on',
|
||||
index: 'basecharts',
|
||||
title: '图表'
|
||||
title: 'schart图表'
|
||||
},
|
||||
// {
|
||||
// icon: 'el-icon-edit',
|
||||
// index: 'drag',
|
||||
// title: '拖拽列表'
|
||||
// },
|
||||
{
|
||||
icon: 'el-icon-edit',
|
||||
index: 'drag',
|
||||
title: '拖拽'
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-edit',
|
||||
icon: 'el-icon-warning',
|
||||
index: 'permission',
|
||||
title: '权限'
|
||||
title: '权限测试'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -110,4 +110,7 @@
|
|||
.sidebar > ul {
|
||||
height:100%;
|
||||
}
|
||||
.sidebar i{
|
||||
margin-top: -4px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,25 +6,27 @@
|
|||
<el-breadcrumb-item>基础图表</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="plugins-tips">
|
||||
vue-schart：vue.js封装sChart.js的图表组件。
|
||||
访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
|
||||
</div>
|
||||
<div class="schart">
|
||||
<div class="content-title">柱状图</div>
|
||||
<schart canvasId="bar" width="500" height="400" :data="data1" type="bar" :options="options1"></schart>
|
||||
</div>
|
||||
<div class="schart">
|
||||
<div class="content-title">折线图</div>
|
||||
<schart canvasId="line" width="500" height="400" :data="data1" type="line" :options="options1"></schart>
|
||||
</div>
|
||||
<div class="schart">
|
||||
<div class="content-title">饼状图</div>
|
||||
<schart canvasId="pie" width="500" height="400" :data="data2" type="pie" :options="options2"></schart>
|
||||
</div>
|
||||
<div class="schart">
|
||||
<div class="content-title">环形图</div>
|
||||
<schart canvasId="ring" width="500" height="400" :data="data2" type="ring" :options="options2"></schart>
|
||||
<div class="container">
|
||||
<div class="plugins-tips">
|
||||
vue-schart：vue.js封装sChart.js的图表组件。
|
||||
访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
|
||||
</div>
|
||||
<div class="schart">
|
||||
<div class="content-title">柱状图</div>
|
||||
<schart canvasId="bar" width="500" height="400" :data="data1" type="bar" :options="options1"></schart>
|
||||
</div>
|
||||
<div class="schart">
|
||||
<div class="content-title">折线图</div>
|
||||
<schart canvasId="line" width="500" height="400" :data="data1" type="line" :options="options1"></schart>
|
||||
</div>
|
||||
<div class="schart">
|
||||
<div class="content-title">饼状图</div>
|
||||
<schart canvasId="pie" width="500" height="400" :data="data2" type="pie" :options="options2"></schart>
|
||||
</div>
|
||||
<div class="schart">
|
||||
<div class="content-title">环形图</div>
|
||||
<schart canvasId="ring" width="500" height="400" :data="data2" type="ring" :options="options2"></schart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,82 +1,84 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>基本表单</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="form-box">
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item label="表单名称">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择器">
|
||||
<el-select v-model="form.region" placeholder="请选择">
|
||||
<el-option key="bbk" label="步步高" value="bbk"></el-option>
|
||||
<el-option key="xtc" label="小天才" value="xtc"></el-option>
|
||||
<el-option key="imoo" label="imoo" value="imoo"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择开关">
|
||||
<el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="多选框">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="步步高" name="type"></el-checkbox>
|
||||
<el-checkbox label="小天才" name="type"></el-checkbox>
|
||||
<el-checkbox label="imoo" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="单选框">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="步步高"></el-radio>
|
||||
<el-radio label="小天才"></el-radio>
|
||||
<el-radio label="imoo"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="文本框">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">提交</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: true,
|
||||
type: ['步步高'],
|
||||
resource: '小天才',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.$message.success('提交成功！');
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>基本表单</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="form-box">
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item label="表单名称">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择器">
|
||||
<el-select v-model="form.region" placeholder="请选择">
|
||||
<el-option key="bbk" label="步步高" value="bbk"></el-option>
|
||||
<el-option key="xtc" label="小天才" value="xtc"></el-option>
|
||||
<el-option key="imoo" label="imoo" value="imoo"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择开关">
|
||||
<el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="多选框">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="步步高" name="type"></el-checkbox>
|
||||
<el-checkbox label="小天才" name="type"></el-checkbox>
|
||||
<el-checkbox label="imoo" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="单选框">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="步步高"></el-radio>
|
||||
<el-radio label="小天才"></el-radio>
|
||||
<el-radio label="imoo"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="文本框">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">提交</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: true,
|
||||
type: ['步步高'],
|
||||
resource: '小天才',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.$message.success('提交成功！');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -6,38 +6,40 @@
|
|||
<el-breadcrumb-item>基础表格</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="handle-box">
|
||||
<el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
|
||||
<el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10">
|
||||
<el-option key="1" label="广东省" value="广东省"></el-option>
|
||||
<el-option key="2" label="湖南省" value="湖南省"></el-option>
|
||||
</el-select>
|
||||
<el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
|
||||
<el-button type="primary" icon="search" @click="search">搜索</el-button>
|
||||
</div>
|
||||
<el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="date" label="日期" sortable width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址" :formatter="formatter">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="small"
|
||||
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger"
|
||||
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
@current-change ="handleCurrentChange"
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
<div class="container">
|
||||
<div class="handle-box">
|
||||
<el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
|
||||
<el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10">
|
||||
<el-option key="1" label="广东省" value="广东省"></el-option>
|
||||
<el-option key="2" label="湖南省" value="湖南省"></el-option>
|
||||
</el-select>
|
||||
<el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
|
||||
<el-button type="primary" icon="search" @click="search">搜索</el-button>
|
||||
</div>
|
||||
<el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="date" label="日期" sortable width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址" :formatter="formatter">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="small"
|
||||
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger"
|
||||
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
@current-change ="handleCurrentChange"
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -88,6 +90,7 @@
|
|||
},
|
||||
// 获取 easy-mock 的模拟数据
|
||||
getData(){
|
||||
// 开发环境使用 easy-mock 数据，正式环境使用 json 文件
|
||||
if(process.env.NODE_ENV === 'development'){
|
||||
this.url = '/ms/table/list';
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,18 +5,20 @@
|
|||
<el-breadcrumb-item><i class="el-icon-upload2"></i> 拖拽排序</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="drag-box-left">
|
||||
<div class="drag-title">拖动排序</div>
|
||||
<div class="drag-list" draggable="true"
|
||||
v-for="list in data1"
|
||||
:data-id="list.id"
|
||||
@dragstart="dragstartEvent"
|
||||
@dragend="dragendEvent"
|
||||
@dragenter="dragenterEvent"
|
||||
@dragleave="dragleaveEvent"
|
||||
@dragover="dragoverEvent"
|
||||
:key="list.id"
|
||||
>{{list.title}}</div>
|
||||
<div class="container">
|
||||
<div class="drag-box-left">
|
||||
<div class="drag-title">拖动排序</div>
|
||||
<div class="drag-list" draggable="true"
|
||||
v-for="list in data1"
|
||||
:data-id="list.id"
|
||||
@dragstart="dragstartEvent"
|
||||
@dragend="dragendEvent"
|
||||
@dragenter="dragenterEvent"
|
||||
@dragleave="dragleaveEvent"
|
||||
@dragover="dragoverEvent"
|
||||
:key="list.id"
|
||||
>{{list.title}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -46,8 +48,7 @@
|
|||
},
|
||||
methods: {
|
||||
dragstartEvent(ev) {
|
||||
const self = this;
|
||||
self.dragElement = ev.target;
|
||||
this.dragElement = ev.target;
|
||||
ev.target.style.backgroundColor = '#f8f8f8';
|
||||
},
|
||||
dragendEvent(ev) {
|
||||
|
|
@ -55,19 +56,17 @@
|
|||
ev.preventDefault();
|
||||
},
|
||||
dragenterEvent(ev) {
|
||||
const self = this;
|
||||
if(self.dragElement != ev.target){
|
||||
ev.target.parentNode.insertBefore(self.dragElement, ev.target);
|
||||
if(this.dragElement != ev.target){
|
||||
ev.target.parentNode.insertBefore(this.dragElement, ev.target);
|
||||
}
|
||||
},
|
||||
dragleaveEvent(ev) {
|
||||
const self = this;
|
||||
if(self.dragElement != ev.target){
|
||||
if(self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
|
||||
ev.target.parentNode.appendChild(self.dragElement);
|
||||
self.lock = false;
|
||||
if(this.dragElement != ev.target){
|
||||
if(this.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
|
||||
ev.target.parentNode.appendChild(this.dragElement);
|
||||
this.lock = false;
|
||||
}else{
|
||||
self.lock = true;
|
||||
this.lock = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -38,11 +38,10 @@
|
|||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
const self = this;
|
||||
self.$refs[formName].validate((valid) => {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
localStorage.setItem('ms_username',self.ruleForm.username);
|
||||
self.$router.push('/readme');
|
||||
localStorage.setItem('ms_username',this.ruleForm.username);
|
||||
this.$router.push('/readme');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -1,42 +1,44 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>markdown</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="plugins-tips">
|
||||
Vue-SimpleMDE：Vue.js的Markdown Editor组件。
|
||||
访问地址：<a href="https://github.com/F-loat/vue-simplemde" target="_blank">Vue-SimpleMDE</a>
|
||||
</div>
|
||||
<markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor>
|
||||
<div class="plugins-tips">
|
||||
<p>既然用了markdown语法了，那么就有一个很实际的问题了。要怎么在前台展示数据呢？</p>
|
||||
<br>
|
||||
<p>这个时候就需要解析markdown语法了。可以使用 <a href="https://github.com/miaolz123/vue-markdown" target="_blank">vue-markdown</a>：一个基于vue.js的markdown语法解析插件。（这里不作展开，有需要自行了解）</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { markdownEditor } from 'vue-simplemde';
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
content:'',
|
||||
configs: {
|
||||
status: true,
|
||||
initialValue: 'Hello BBK',
|
||||
renderingConfig: {
|
||||
codeSyntaxHighlighting: true,
|
||||
highlightingTheme: 'atom-one-light'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
markdownEditor
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>markdown</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="plugins-tips">
|
||||
Vue-SimpleMDE：Vue.js的Markdown Editor组件。
|
||||
访问地址：<a href="https://github.com/F-loat/vue-simplemde" target="_blank">Vue-SimpleMDE</a>
|
||||
</div>
|
||||
<markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor>
|
||||
<div class="plugins-tips">
|
||||
<p>既然用了markdown语法了，那么就有一个很实际的问题了。要怎么在前台展示数据呢？</p>
|
||||
<br>
|
||||
<p>这个时候就需要解析markdown语法了。可以使用 <a href="https://github.com/miaolz123/vue-markdown" target="_blank">vue-markdown</a>：一个基于vue.js的markdown语法解析插件。（这里不作展开，有需要自行了解）</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { markdownEditor } from 'vue-simplemde';
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
content:'',
|
||||
configs: {
|
||||
status: true,
|
||||
initialValue: 'Hello BBK',
|
||||
renderingConfig: {
|
||||
codeSyntaxHighlighting: true,
|
||||
highlightingTheme: 'atom-one-light'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
markdownEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,216 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>基础图表</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="plugins-tips">
|
||||
vue-echarts-v3：基于vue2和eCharts.js3的图表组件。
|
||||
访问地址：<a href="https://github.com/xlsdg/vue-echarts-v3" target="_blank">vue-echarts-v3</a>
|
||||
</div>
|
||||
<div class="content-title">基础图表</div>
|
||||
<div class="echarts">
|
||||
<IEcharts :option="line" ></IEcharts>
|
||||
</div>
|
||||
<div class="echarts">
|
||||
<IEcharts :option="bar" ></IEcharts>
|
||||
</div>
|
||||
<div class="echarts">
|
||||
<IEcharts :option="pie" ></IEcharts>
|
||||
</div>
|
||||
<div class="echarts">
|
||||
<IEcharts :option="pie_radius" ></IEcharts>
|
||||
</div>
|
||||
<div class="content-title">混合图表</div>
|
||||
<div class="mix-echarts">
|
||||
<IEcharts :option="mix" ></IEcharts>
|
||||
</div>
|
||||
<v-schart canvasId="canvas" width="500" height="400" :data="data" type="bar"></v-schart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import IEcharts from 'vue-echarts-v3';
|
||||
import vSchart from 'vue-schart';
|
||||
import IEcharts from 'vue-echarts-v3/src/lite.vue';
|
||||
|
||||
import 'echarts/lib/chart/bar';
|
||||
import 'echarts/lib/chart/line';
|
||||
import 'echarts/lib/chart/pie';
|
||||
import 'echarts/lib/component/legend';
|
||||
import 'echarts/lib/component/tooltip';
|
||||
import 'echarts/lib/component/title';
|
||||
export default {
|
||||
components: {
|
||||
IEcharts,vSchart
|
||||
},
|
||||
data: () => ({
|
||||
data:[
|
||||
{name:'2012',value:1141},
|
||||
{name:'2013',value:1499},
|
||||
{name:'2014',value:2260},
|
||||
{name:'2015',value:1170},
|
||||
{name:'2016',value:970},
|
||||
{name:'2017',value:1450}
|
||||
],
|
||||
line: {
|
||||
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949"],
|
||||
title: {
|
||||
text: '曲线图'
|
||||
},
|
||||
xAxis: {
|
||||
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
|
||||
},
|
||||
yAxis:{},
|
||||
series: [
|
||||
{
|
||||
name: "销量",
|
||||
type: "line",
|
||||
data: [5, 20, 36, 10, 10, 20]
|
||||
}
|
||||
]
|
||||
},
|
||||
bar: {
|
||||
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949"],
|
||||
title: {
|
||||
text: '柱状图'
|
||||
},
|
||||
xAxis: {
|
||||
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
|
||||
},
|
||||
yAxis:{},
|
||||
series: [
|
||||
{
|
||||
name: "销量",
|
||||
type: "bar",
|
||||
data: [5, 20, 36, 10, 10, 20]
|
||||
}
|
||||
]
|
||||
},
|
||||
pie: {
|
||||
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
|
||||
title : {
|
||||
text: '饼状图',
|
||||
x:'center'
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋"]
|
||||
},
|
||||
series : [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'pie',
|
||||
radius : '55%',
|
||||
center: ['50%', '50%'],
|
||||
data:[
|
||||
{value:335, name:'衬衫'},
|
||||
{value:310, name:'羊毛衫'},
|
||||
{value:234, name:'雪纺衫'},
|
||||
{value:135, name:'裤子'},
|
||||
{value:548, name:'高跟鞋'}
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
pie_radius:{
|
||||
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
|
||||
title : {
|
||||
text: '环形图',
|
||||
x:'center'
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋"]
|
||||
},
|
||||
series : [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'pie',
|
||||
radius : ['40%','60%'],
|
||||
data:[
|
||||
{value:335, name:'衬衫'},
|
||||
{value:310, name:'羊毛衫'},
|
||||
{value:234, name:'雪纺衫'},
|
||||
{value:135, name:'裤子'},
|
||||
{value:548, name:'高跟鞋'}
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
mix:{
|
||||
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
|
||||
legend: {
|
||||
data:['步步高','小天才','imoo']
|
||||
},
|
||||
xAxis: {
|
||||
data: ['周一','周二','周三','周四','周五','周末']
|
||||
},
|
||||
yAxis:{},
|
||||
series: [
|
||||
{
|
||||
name: "步步高",
|
||||
type: "line",
|
||||
data: [15, 20, 26, 30, 40, 27]
|
||||
},
|
||||
{
|
||||
name: "小天才",
|
||||
type: "bar",
|
||||
data: [5, 30, 36, 10, 34, 20]
|
||||
},
|
||||
{
|
||||
name: "imoo",
|
||||
type: "bar",
|
||||
data: [35, 40, 30, 50, 60, 40]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.echarts {
|
||||
float: left;
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
}
|
||||
.content-title{
|
||||
clear: both;
|
||||
font-weight: 400;
|
||||
line-height: 50px;
|
||||
margin: 10px 0;
|
||||
font-size: 22px;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
.mix-echarts{
|
||||
width:900px;
|
||||
height:600px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,39 +2,13 @@
|
|||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-setting"></i> 自述</el-breadcrumb-item>
|
||||
<el-breadcrumb-item><i class="el-icon-warning"></i> 权限测试</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="ms-doc">
|
||||
<h3>README.md</h3>
|
||||
<article>
|
||||
<h1>manage-system</h1>
|
||||
<p>基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案</p>
|
||||
<h2>前言</h2>
|
||||
<p>之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。</p>
|
||||
<p>该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。</p>
|
||||
<h2>功能</h2>
|
||||
<el-checkbox disabled checked>Element UI</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>登录/注销</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>表格</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>表单</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>图表</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>富文本编辑器</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>markdown编辑器</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>图片拖拽/裁剪上传</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>支持切换主题色</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>列表拖拽排序</el-checkbox>
|
||||
<br>
|
||||
</article>
|
||||
<div class="container">
|
||||
<h1>管理员权限页面</h1>
|
||||
<p>只有用 admin 账号登录的才拥有管理员权限，才能进到这个页面，其他账号想进来都会跳到登录页面，重新用管理员账号登录才有权限。</p>
|
||||
<p>想尝试一下，请<router-link to="/login" class="logout">退出登录</router-link>，随便输入个账号名，再进来试试看。</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -49,48 +23,16 @@
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ms-doc{
|
||||
width:100%;
|
||||
max-width: 980px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
.ms-doc h3{
|
||||
padding: 9px 10px 10px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #d8d8d8;
|
||||
border-bottom: 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.ms-doc article{
|
||||
padding: 45px;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
.ms-doc article h1{
|
||||
font-size:32px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.ms-doc article h2 {
|
||||
margin: 24px 0 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
padding-bottom: 7px;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.ms-doc article p{
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.ms-doc article .el-checkbox{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
h1{
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
p{
|
||||
line-height: 30px;
|
||||
margin-bottom: 10px;
|
||||
text-indent: 2em;
|
||||
}
|
||||
.logout{
|
||||
color: #409EFF;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,96 +1,88 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-setting"></i> 自述</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="ms-doc">
|
||||
<h3>README.md</h3>
|
||||
<article>
|
||||
<h1>manage-system</h1>
|
||||
<p>基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案</p>
|
||||
<h2>前言</h2>
|
||||
<p>之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。</p>
|
||||
<p>该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。</p>
|
||||
<h2>功能</h2>
|
||||
<el-checkbox disabled checked>Element UI</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>登录/注销</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>表格</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>表单</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>图表</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>富文本编辑器</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>markdown编辑器</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>图片拖拽/裁剪上传</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>支持切换主题色</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>列表拖拽排序</el-checkbox>
|
||||
<br>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ms-doc{
|
||||
width:100%;
|
||||
max-width: 980px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
.ms-doc h3{
|
||||
padding: 9px 10px 10px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #d8d8d8;
|
||||
border-bottom: 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.ms-doc article{
|
||||
padding: 45px;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
.ms-doc article h1{
|
||||
font-size:32px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.ms-doc article h2 {
|
||||
margin: 24px 0 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
padding-bottom: 7px;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.ms-doc article p{
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.ms-doc article .el-checkbox{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-setting"></i> 自述</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="ms-doc">
|
||||
<h3>README.md</h3>
|
||||
<article>
|
||||
<h1>manage-system</h1>
|
||||
<p>基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案</p>
|
||||
<h2>前言</h2>
|
||||
<p>之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。</p>
|
||||
<p>该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。</p>
|
||||
<h2>功能</h2>
|
||||
<el-checkbox disabled checked>Element UI</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>登录/注销</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>表格</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>表单</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>图表</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>富文本编辑器</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>markdown编辑器</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>图片拖拽/裁剪上传</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>支持切换主题色</el-checkbox>
|
||||
<br>
|
||||
<el-checkbox disabled checked>列表拖拽排序</el-checkbox>
|
||||
<br>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ms-doc{
|
||||
width:100%;
|
||||
max-width: 980px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
.ms-doc h3{
|
||||
padding: 9px 10px 10px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #d8d8d8;
|
||||
border-bottom: 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.ms-doc article{
|
||||
padding: 45px;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
.ms-doc article h1{
|
||||
font-size:32px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.ms-doc article h2 {
|
||||
margin: 24px 0 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
padding-bottom: 7px;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.ms-doc article p{
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.ms-doc article .el-checkbox{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,33 +6,36 @@
|
|||
<el-breadcrumb-item>图片上传</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="content-title">支持拖拽</div>
|
||||
<div class="plugins-tips">
|
||||
Element UI自带上传组件。
|
||||
访问地址：<a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a>
|
||||
<div class="container">
|
||||
<div class="content-title">支持拖拽</div>
|
||||
<div class="plugins-tips">
|
||||
Element UI自带上传组件。
|
||||
访问地址：<a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a>
|
||||
</div>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="/api/posts/"
|
||||
multiple>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
<div class="content-title">支持裁剪</div>
|
||||
<div class="plugins-tips">
|
||||
Vue-Core-Image-Upload：一款轻量级的vue上传插件，支持裁剪。
|
||||
访问地址：<a href="https://github.com/Vanthink-UED/vue-core-image-upload" target="_blank">Vue-Core-Image-Upload</a>
|
||||
</div>
|
||||
<img class="pre-img" :src="src" alt="">
|
||||
<vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
|
||||
:crop="true"
|
||||
text="上传图片"
|
||||
url="/api/posts/"
|
||||
extensions="png,gif,jpeg,jpg"
|
||||
@:imageuploaded="imageuploaded"
|
||||
@:errorhandle="handleError"
|
||||
></vue-core-image-upload>
|
||||
</div>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="/api/posts/"
|
||||
multiple>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
<div class="content-title">支持裁剪</div>
|
||||
<div class="plugins-tips">
|
||||
Vue-Core-Image-Upload：一款轻量级的vue上传插件，支持裁剪。
|
||||
访问地址：<a href="https://github.com/Vanthink-UED/vue-core-image-upload" target="_blank">Vue-Core-Image-Upload</a>
|
||||
</div>
|
||||
<img class="pre-img" :src="src" alt="">
|
||||
<vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
|
||||
:crop="true"
|
||||
text="上传图片"
|
||||
url="/api/posts/"
|
||||
extensions="png,gif,jpeg,jpg"
|
||||
@:imageuploaded="imageuploaded"
|
||||
@:errorhandle="handleError"></vue-core-image-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,52 +1,54 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>编辑器</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="plugins-tips">
|
||||
Vue-Quill-Editor：基于Quill、适用于Vue2的富文本编辑器。
|
||||
访问地址：<a href="https://github.com/surmon-china/vue-quill-editor" target="_blank">vue-quill-editor</a>
|
||||
</div>
|
||||
<quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
|
||||
<el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { quillEditor } from 'vue-quill-editor';
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
content: '<p>Hello BBK</p>',
|
||||
editorOption: {
|
||||
// something config
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
quillEditor
|
||||
},
|
||||
methods: {
|
||||
onEditorChange({ editor, html, text }) {
|
||||
this.content = html;
|
||||
},
|
||||
submit(){
|
||||
console.log(this.content);
|
||||
this.$message.success('提交成功！');
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
editor() {
|
||||
return this.$refs.myTextEditor.quillEditor;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.editor-btn{
|
||||
margin-top: 20px;
|
||||
}
|
||||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>编辑器</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="plugins-tips">
|
||||
Vue-Quill-Editor：基于Quill、适用于Vue2的富文本编辑器。
|
||||
访问地址：<a href="https://github.com/surmon-china/vue-quill-editor" target="_blank">vue-quill-editor</a>
|
||||
</div>
|
||||
<quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
|
||||
<el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { quillEditor } from 'vue-quill-editor';
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
content: '<p>Hello BBK</p>',
|
||||
editorOption: {
|
||||
// something config
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
quillEditor
|
||||
},
|
||||
methods: {
|
||||
onEditorChange({ editor, html, text }) {
|
||||
this.content = html;
|
||||
},
|
||||
submit(){
|
||||
console.log(this.content);
|
||||
this.$message.success('提交成功！');
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
editor() {
|
||||
return this.$refs.myTextEditor.quillEditor;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.editor-btn{
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,17 +3,20 @@
|
|||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>Vue表格组件</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>VueDatasource</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="plugins-tips">
|
||||
vue-datasource：一个用于动态创建表格的vue.js服务端组件。
|
||||
访问地址：<a href="https://github.com/coderdiaz/vue-datasource" target="_blank">vue-datasource</a>
|
||||
<div class="container">
|
||||
<div class="plugins-tips">
|
||||
vue-datasource：一个用于动态创建表格的vue.js服务端组件。
|
||||
访问地址：<a href="https://github.com/coderdiaz/vue-datasource" target="_blank">vue-datasource</a>
|
||||
</div>
|
||||
<datasource language="en" :table-data="getData" :columns="columns" :pagination="information.pagination"
|
||||
:actions="actions"
|
||||
v-on:change="changePage"
|
||||
v-on:searching="onSearch"
|
||||
></datasource>
|
||||
</div>
|
||||
<datasource language="en" :table-data="getData" :columns="columns" :pagination="information.pagination"
|
||||
:actions="actions"
|
||||
v-on:change="changePage"
|
||||
v-on:searching="onSearch"></datasource>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -21,8 +24,7 @@
|
|||
import axios from 'axios';
|
||||
import Datasource from 'vue-datasource';
|
||||
export default {
|
||||
data: function(){
|
||||
const self = this;
|
||||
data(){
|
||||
return {
|
||||
url: './static/datasource.json',
|
||||
information: {
|
||||
|
|
@ -51,8 +53,8 @@
|
|||
{
|
||||
text: 'Click',
|
||||
class: 'btn-primary',
|
||||
event(e, row) {
|
||||
self.$message('选中的行数： ' + row.row.id);
|
||||
event: (e, row)=>{
|
||||
row && this.$message('选中的行数： ' + row.row.id);
|
||||
}
|
||||
}
|
||||
],
|
||||
|
|
@ -73,15 +75,15 @@
|
|||
},
|
||||
computed:{
|
||||
getData(){
|
||||
const self = this;
|
||||
return self.information.data.filter(function (d) {
|
||||
if(d.name.indexOf(self.query) > -1){
|
||||
return this.information.data.filter((d) =>{
|
||||
if(d.name.indexOf(this.query) > -1){
|
||||
return d;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeMount(){
|
||||
// 开发环境使用 easy-mock 数据，正式环境使用 json 文件
|
||||
if(process.env.NODE_ENV === 'development'){
|
||||
this.url = '/ms/table/source';
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@ html,body,#app,.wrapper{
|
|||
overflow: hidden;
|
||||
}
|
||||
body{
|
||||
font-family:"Helvetica Neue",Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
|
||||
font-family:'PingFang SC', "Helvetica Neue",Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
|
||||
}
|
||||
a{text-decoration: none}
|
||||
.content{
|
||||
background: none repeat scroll 0 0 #fff;
|
||||
background: none repeat scroll 0 0 #f0f0f0;
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
right: 0;
|
||||
|
|
@ -20,6 +20,12 @@ a{text-decoration: none}
|
|||
box-sizing: border-box;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.container{
|
||||
padding: 30px;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.crumbs{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue