refactor:views/components

This commit is contained in:
Pan 2017-11-17 11:36:49 +08:00
parent 1286324214
commit 6d6a9df5b8
21 changed files with 154 additions and 143 deletions

View file

@ -164,6 +164,7 @@ export default {
.material-input__icon {
position: absolute;
left: 0;
line-height: $font-size-base;
color: $color-blue;
top: $spacer;
width: $index-has-icon;

View file

@ -95,18 +95,17 @@ export const asyncRouterMap = [
icon: 'component'
},
children: [
{ path: 'index', component: _import('components/index'), name: 'componentIndex', meta: { title: 'componentIndex' }},
{ path: 'tinymce', component: _import('components/tinymce'), name: 'tinymce', meta: { title: 'tinymce' }},
{ path: 'markdown', component: _import('components/markdown'), name: 'markdown', meta: { title: 'markdown' }},
{ path: 'json-editor', component: _import('components/jsonEditor'), name: 'jsonEditor', meta: { title: 'jsonEditor' }},
{ path: 'dnd-list', component: _import('components/dndList'), name: 'dndList', meta: { title: 'dndList' }},
{ path: 'splitpane', component: _import('components/splitpane'), name: 'splitpane', meta: { title: 'splitPane' }},
{ path: 'avatar-upload', component: _import('components/avatarUpload'), name: 'avatarUpload', meta: { title: 'avatarUpload' }},
{ path: 'dropzone', component: _import('components/dropzone'), name: 'dropzone', meta: { title: 'dropzone' }},
{ path: 'sticky', component: _import('components/sticky'), name: 'sticky', meta: { title: 'sticky' }},
{ path: 'count-to', component: _import('components/countTo'), name: 'countTo', meta: { title: 'countTo' }},
{ path: 'mixin', component: _import('components/mixin'), name: 'componentMixin', meta: { title: 'componentMixin' }},
{ path: 'back-to-top', component: _import('components/backToTop'), name: 'backToTop', meta: { title: 'backToTop' }}
{ path: 'tinymce', component: _import('components-demo/tinymce'), name: 'tinymce', meta: { title: 'tinymce' }},
{ path: 'markdown', component: _import('components-demo/markdown'), name: 'markdown', meta: { title: 'markdown' }},
{ path: 'json-editor', component: _import('components-demo/jsonEditor'), name: 'jsonEditor', meta: { title: 'jsonEditor' }},
{ path: 'dnd-list', component: _import('components-demo/dndList'), name: 'dndList', meta: { title: 'dndList' }},
{ path: 'splitpane', component: _import('components-demo/splitpane'), name: 'splitpane', meta: { title: 'splitPane' }},
{ path: 'avatar-upload', component: _import('components-demo/avatarUpload'), name: 'avatarUpload', meta: { title: 'avatarUpload' }},
{ path: 'dropzone', component: _import('components-demo/dropzone'), name: 'dropzone', meta: { title: 'dropzone' }},
{ path: 'sticky', component: _import('components-demo/sticky'), name: 'sticky', meta: { title: 'sticky' }},
{ path: 'count-to', component: _import('components-demo/countTo'), name: 'countTo', meta: { title: 'countTo' }},
{ path: 'mixin', component: _import('components-demo/mixin'), name: 'componentMixin', meta: { title: 'componentMixin' }},
{ path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop', meta: { title: 'backToTop' }}
]
},
@ -235,7 +234,7 @@ export const asyncRouterMap = [
{
path: '/i18n',
component: Layout,
children: [{ path: 'index', component: _import('i18n/index'), name: 'i18n', meta: { title: 'i18n', icon: 'international' }}]
children: [{ path: 'index', component: _import('i18n-demo/index'), name: 'i18n', meta: { title: 'i18n', icon: 'international' }}]
},
{ path: '*', redirect: '/404', hidden: true }

View file

@ -0,0 +1,118 @@
<template>
<div class="components-container">
<el-row>
<el-col :span="4" class='text-center'>
<router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
</el-col>
<el-col :span="4" class='text-center'>
<router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link>
</el-col>
<el-col :span="4" class='text-center'>
<router-link class="pan-btn pink-btn" to="/excel/download">Excel</router-link>
</el-col>
<el-col :span="4" class='text-center'>
<router-link class="pan-btn green-btn" to="/example/table/complex-table">Table</router-link>
</el-col>
<el-col :span="4" class='text-center'>
<router-link class="pan-btn tiffany-btn" to="/form/edit-form">Form</router-link>
</el-col>
<el-col :span="4" class='text-center'>
<router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top:50px;">
<el-col :span="6">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Material Design 的input</span>
</div>
<div style="height:100px;">
<el-form :model="demo" :rules="demoRules">
<el-form-item prop="title">
<md-input icon="search" name="title" placeholder="输入标题" v-model="demo.title">标题</md-input>
</el-form-item>
</el-form>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>图片hover效果</span>
</div>
<div class="component-item">
<pan-thumb width='100px' height='100px' image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'>
vue-element-admin
</pan-thumb>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>水波纹 waves v-directive</span>
</div>
<div class="component-item">
<el-button v-waves type="primary">水波纹效果</el-button>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>hover text</span>
</div>
<div class="component-item">
<mallki className='mallki-text' text='vue-element-admin'></mallki>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import PanThumb from '@/components/PanThumb'
import MdInput from '@/components/MDinput'
import waves from '@/directive/waves/index.js' //
import Mallki from '@/components/TextHoverEffect/Mallki'
export default {
components: {
PanThumb,
MdInput,
Mallki
},
directives: {
waves
},
data() {
const validate = (rule, value, callback) => {
if (value.length !== 6) {
callback(new Error('请输入六个字符'))
} else {
callback()
}
}
return {
demo: {
title: ''
},
demoRules: {
title: [{ required: true, trigger: 'change', validator: validate }]
}
}
}
}
</script>
<style scoped>
.component-item{
min-height: 100px;
}
</style>

View file

@ -1,7 +0,0 @@
<template>
<div class="components-container">
<code>这里暂时列出了自己在项目中用到的组件和一些自己封装的组件如有补充可以提<a target='_blank' href='https://github.com/PanJiaChen/vue-element-admin/issues'> issue </a><br/>
我个人崇尚自己封装组件因为很多组件会和业务后高度的耦合而且第三方封装的组件灵活性可控性都不高如有需要可以看楼主之前写过的一篇<a href='https://segmentfault.com/a/1190000009090836' target='_blank'>文章</a>
</code>
</div>
</template>

View file

@ -1,66 +0,0 @@
<template>
<div class="components-container">
<div class='component-item'>
<el-form :model="demo" :rules="demoRules">
<el-form-item prop="title">
<md-input icon="search" name="title" placeholder="输入标题" v-model="demo.title">标题</md-input>
</el-form-item>
</el-form>
<code class='code-part'>Material Design 的input</code>
</div>
<div class='component-item'>
<pan-thumb image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'>
上海花裤衩
</pan-thumb>
<code class='code-part'>图片hover效果</code>
</div>
<div class='component-item'>
<el-button v-waves type="primary">水波纹效果</el-button>
<code class='code-part'>水波纹 v-directive</code>
</div>
</div>
</template>
<script>
import PanThumb from '@/components/PanThumb'
import MdInput from '@/components/MDinput'
import waves from '@/directive/waves/index.js' //
export default {
components: {
PanThumb,
MdInput
},
directives: {
waves
},
data() {
const validate = (rule, value, callback) => {
if (value.length !== 6) {
callback(new Error('请输入六个字符'))
} else {
callback()
}
}
return {
demo: {
title: ''
},
demoRules: {
title: [{ required: true, trigger: 'change', validator: validate }]
}
}
}
}
</script>
<style scoped>
.component-item{
margin-top: 100px;
}
.code-part{
margin-top: 20px;
}
</style>

View file

@ -6,7 +6,7 @@
<div style="position:relative;">
<pan-thumb class="panThumb" :image="avatar"></pan-thumb>
<mallki className='mallki-text' text='vue-element-admin'></mallki>
<div class='progress-item'>
<div style="padding-top:35px;" class='progress-item'>
<span>Vue</span>
<el-progress :percentage="70"></el-progress>
</div>
@ -18,6 +18,10 @@
<span>Css</span>
<el-progress :percentage="12"></el-progress>
</div>
<div class='progress-item'>
<span>ESlint</span>
<el-progress :percentage="100" status="success"></el-progress>
</div>
</div>
</el-card>
</template>
@ -53,13 +57,7 @@ export default {
}
return statusMap[status]
}
},
created() {
},
methods: {
}
}
</script>
@ -86,7 +84,7 @@ export default {
}
.mallki-text {
position: absolute;
top: -10px;
top: 0px;
right: 0px;
font-size: 20px;
font-weight: bold;
@ -102,6 +100,9 @@ export default {
background-color: #fff;
margin: auto;
box-shadow: none!important;
/deep/ .pan-info{
box-shadow: none!important;
}
}
.progress-item {
margin-bottom: 10px;

View file

@ -54,9 +54,9 @@ export default {
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
x: 'center',
y: 'bottom',
data: ['industries', 'technology', 'forex', 'gold', 'forecasts', 'markets']
left: 'center',
bottom: '10',
data: ['industries', 'technology', 'forex', 'gold', 'forecasts']
},
calculable: true,
series: [
@ -71,8 +71,7 @@ export default {
{ value: 240, name: 'technology' },
{ value: 149, name: 'forex' },
{ value: 100, name: 'gold' },
{ value: 59, name: 'forecasts' },
{ value: 49, name: 'markets' }
{ value: 59, name: 'forecasts' }
],
animationEasing: 'cubicInOut',
animationDuration: 2600

View file

@ -58,8 +58,8 @@ export default {
}
},
radar: {
radius: '70%',
center: ['50%', '44%'],
radius: '66%',
center: ['50%', '42%'],
splitNumber: 8,
splitArea: {
areaStyle: {
@ -81,8 +81,8 @@ export default {
]
},
legend: {
left: 0,
bottom: 0,
left: 'center',
bottom: '10',
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
},
series: [{

View file

@ -1,29 +1,10 @@
<template>
<div class="dashboard-editor-container">
<github-corner></github-corner>
<!-- <el-row class="btn-group">
<el-col :span="4" class='text-center'>
<router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
</el-col>
<el-col :span="4" class='text-center'>
<router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link>
</el-col>
<el-col :span="4" class='text-center'>
<router-link class="pan-btn pink-btn" to="/excel/download">Excel</router-link>
</el-col>
<el-col :span="4" class='text-center'>
<router-link class="pan-btn green-btn" to="/example/table/complex-table">Table</router-link>
</el-col>
<el-col :span="4" class='text-center'>
<router-link class="pan-btn tiffany-btn" to="/form/edit-form">Form</router-link>
</el-col>
<el-col :span="4" class='text-center'>
<router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
</el-col>
</el-row> -->
<el-row class="panel-group" :gutter="40">
<el-col :span="6">
<div class='card-panel no-margin-left' @click="handleSetLineChartData('newVisitis')">
<div class='card-panel' @click="handleSetLineChartData('newVisitis')">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div>
@ -56,7 +37,7 @@
</div>
</el-col>
<el-col :span="6">
<div class='card-panel no-margin-right' @click="handleSetLineChartData('shoppings')">
<div class='card-panel' @click="handleSetLineChartData('shoppings')">
<div class="card-panel-icon-wrapper icon-shoppingCard">
<svg-icon icon-class="shoppingCard" class-name="card-panel-icon" />
</div>
@ -72,9 +53,9 @@
<line-chart :chart-data='lineChartData'></line-chart>
</el-row>
<el-row style="margin-top:30px;">
<el-row style="margin-top:30px;" :gutter="30">
<el-col :span="8">
<div class="chart-wrapper no-margin-left">
<div class="chart-wrapper">
<raddar-chart></raddar-chart>
</div>
</el-col>
@ -84,7 +65,7 @@
</div>
</el-col>
<el-col :span="8">
<div class="chart-wrapper no-margin-right">
<div class="chart-wrapper">
<bar-chart></bar-chart>
</div>
</el-col>
@ -100,15 +81,11 @@
<el-col :span="6">
<box-card></box-card>
</el-col>
</el-row>
</div>
</template>
<script>
import CountTo from 'vue-count-to'
import GithubCorner from '@/components/GithubCorner'
@ -169,17 +146,10 @@ export default {
.dashboard-editor-container {
padding: 30px;
background-color: rgb(240, 242, 245);
.no-margin-left {
margin-left: 0!important;
}
.no-margin-right {
margin-right: 0!important;
}
.panel-group {
margin-top: 20px;
}
.card-panel {
// margin: 0 25px;
height: 108px;
cursor: pointer;
font-size: 12px;
@ -247,11 +217,7 @@ export default {
}
.chart-wrapper {
background: #fff;
margin: 0 15px;
padding: 15px 15px 0;
}
.btn-group {
margin-bottom: 60px;
}
}
</style>