refactor:views/components
This commit is contained in:
Pan
parent
1286324214
commit
6d6a9df5b8
21 changed files with 154 additions and 143 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
|
|||
118
src/views/components-demo/mixin.vue
Normal file
118
src/views/components-demo/mixin.vue
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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: [{
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue