zhouchijian/fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor:foramt views/component-demo

Browse Source
This commit is contained in:
Pan
2017-11-17 17:51:41 +08:00
parent 46b4f74969
commit d20585a3f9
35 changed files with 289 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/components-demo/avatarUpload.vue
View File

@@ -1,15 +1,17 @@
<template>
<div class="components-container">
<code>这里核心代码用的是<a class='link-type' href='//github.com/dai-siki/vue-image-crop-upload'> vue-image-crop-upload</a>
由于我在使用时它只有vue@1版本，而且有些业务的需求耦合到七牛等等原因吧，自己改造了一下，如果大家要使用的话，优先还是使用官方component
<code>这里核心代码用的是
<a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>
由于我在使用时它只有vue@1版本，而且有些业务的需求耦合到七牛等等原因吧，自己改造了一下，如果大家要使用的话，优先还是使用官方component
</code>
<pan-thumb :image='image'></pan-thumb>
<pan-thumb :image="image"></pan-thumb>
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头像
</el-button>
<image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess" :key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
<image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess"
:key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
</div>
</template>
@@ -18,6 +20,7 @@ import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
name: 'avatarUpload-demo',
components: { ImageCropper, PanThumb },
data() {
return {

1
src/views/components-demo/backToTop.vue
View File

@@ -138,6 +138,7 @@
import BackToTop from '@/components/BackToTop'
export default {
name: 'backToTop-demo',
components: { BackToTop },
data() {
return {

49
src/views/components-demo/countTo.vue
View File

@@ -1,23 +1,39 @@
<template>
<div class="components-container">
<code> <a href='https://github.com/PanJiaChen/vue-countTo' target='_blank'>countTo component</a></code>
<count-to ref='example' class='example' :start-val='_startVal' :end-val='_endVal' :duration='_duration' :decimals='_decimals'
:separator='_separator' :prefix='_prefix' :suffix='_suffix' :autoplay='false'></count-to>
<div style='margin-left: 25%;margin-top: 40px;'>
<label class="label" for="startValInput">startVal: <input type="number" v-model.number='setStartVal' name='startValInput' /></label>
<label class="label" for="endValInput">endVal: <input type="number" v-model.number='setEndVal' name='endVaInput' /></label>
<label class="label" for="durationInput">duration: <input type="number" v-model.number='setDuration' name='durationInput' /></label>
<div class="startBtn example-btn" @click='start'>开始</div>
<div class="pause-resume-btn example-btn" @click='pauseResume'>暂停/恢复</div>
<p class="warn-content">
<a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a>
</p>
<count-to ref="example" class="example" :start-val="_startVal" :end-val="_endVal" :duration="_duration" :decimals="_decimals"
:separator="_separator" :prefix="_prefix" :suffix="_suffix" :autoplay="false"></count-to>
<div style="margin-left: 25%;margin-top: 40px;">
<label class="label" for="startValInput">startVal:
<input type="number" v-model.number="setStartVal" name="startValInput" />
</label>
<label class="label" for="endValInput">endVal:
<input type="number" v-model.number="setEndVal" name="endVaInput" />
</label>
<label class="label" for="durationInput">duration:
<input type="number" v-model.number="setDuration" name="durationInput" />
</label>
<div class="startBtn example-btn" @click="start">开始</div>
<div class="pause-resume-btn example-btn" @click="pauseResume">暂停/恢复</div>
<br/>
<label class="label" for="decimalsInput">decimals: <input type="number" v-model.number='setDecimals' name='decimalsInput' /></label>
<label class="label" for="separatorInput">separator: <input v-model='setSeparator' name='separatorInput' /></label>
<label class="label" for="prefixInput">prefix: <input v-model='setPrefix' name='prefixInput' /></label>
<label class="label" for="suffixInput">suffix: <input v-model='setSuffix' name='suffixInput' /></label>
<label class="label" for="decimalsInput">decimals:
<input type="number" v-model.number="setDecimals" name="decimalsInput" />
</label>
<label class="label" for="separatorInput">separator:
<input v-model="setSeparator" name="separatorInput" />
</label>
<label class="label" for="prefixInput">prefix:
<input v-model="setPrefix" name="prefixInput" />
</label>
<label class="label" for="suffixInput">suffix:
<input v-model="setSuffix" name="suffixInput" />
</label>
</div>
<code>&lt;count-to :start-val=&#x27;{{_startVal}}&#x27; :end-val=&#x27;{{_endVal}}&#x27; :duration=&#x27;{{_duration}}&#x27; :decimals=&#x27;{{_decimals}}&#x27;
:separator=&#x27;{{_separator}}&#x27; :prefix=&#x27;{{_prefix}}&#x27; :suffix=&#x27;{{_suffix}}&#x27; :autoplay=false&gt;</code>
<code>&lt;count-to :start-val=&#x27;{{_startVal}}&#x27; :end-val=&#x27;{{_endVal}}&#x27; :duration=&#x27;{{_duration}}&#x27;
:decimals=&#x27;{{_decimals}}&#x27; :separator=&#x27;{{_separator}}&#x27; :prefix=&#x27;{{_prefix}}&#x27; :suffix=&#x27;{{_suffix}}&#x27;
:autoplay=false&gt;</code>
</div>
</template>
@@ -25,6 +41,7 @@
import countTo from 'vue-count-to'
export default {
name: 'countTo-demo',
components: { countTo },
data() {
return {

1
src/views/components-demo/dndList.vue
View File

@@ -12,6 +12,7 @@ import DndList from '@/components/DndList'
import { fetchList } from '@/api/article'
export default {
name: 'dnd-list-demo',
components: { DndList },
data() {
return {

3
src/views/components-demo/dropzone.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="components-container">
<code>
基于<a class='link-type' href='https://github.com/rowanwins/vue-dropzone'> dropzone </a>封装 ,
基于<a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>封装 ,
由于我司业务有特殊需求，而且要传七牛 所以没用第三方 选择了自己封装
</code>
<div class="editor-container">
@@ -14,6 +14,7 @@
import Dropzone from '@/components/Dropzone'
export default {
name: 'dropzone-demo',
components: { Dropzone },
methods: {
dropzoneS(file) {

3
src/views/components-demo/jsonEditor.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="components-container" style='height:100vh'>
<div class="components-container" style="height:100vh">
<code>JsonEditor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code>
<div class="editor-container">
<json-editor ref="jsonEditor" v-model="value"></json-editor>
@@ -13,6 +13,7 @@ import JsonEditor from '@/components/JsonEditor'
const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'
export default {
name: 'jsonEditor-demo',
components: { JsonEditor },
data() {
return {

11
src/views/components-demo/markdown.vue
View File

@@ -1,10 +1,14 @@
<template>
<div class="components-container">
<code>Markdown 我们这里选用了 <a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，简单的用vue封装了一下<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader14'> 相关文章 </a></code>
<code>Markdown 我们这里选用了
<a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，简单的用vue封装了一下
<a target="_blank" href="https://segmentfault.com/a/1190000009762198#articleHeader14">
相关文章 </a>
</code>
<div class="editor-container">
<markdown-editor id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></markdown-editor>
<markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor>
</div>
<el-button @click='markdown2Html' style="margin-top:80px;" type="primary">转为HTML<i class="el-icon-document el-icon--right"></i></el-button>
<el-button @click="markdown2Html" style="margin-top:80px;" type="primary" icon="el-icon-document">转为HTML</el-button>
<div v-html="html"></div>
</div>
</template>
@@ -13,6 +17,7 @@
import MarkdownEditor from '@/components/MarkdownEditor'
export default {
name: 'markdown-demo',
components: { MarkdownEditor },
data() {
return {

17
src/views/components-demo/mixin.vue
View File

@@ -1,22 +1,22 @@
<template>
<div class="components-container">
<el-row>
<el-col :span="4" class='text-center'>
<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'>
<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'>
<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'>
<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'>
<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'>
<el-col :span="4" class="text-center">
<router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
</el-col>
</el-row>
@@ -43,7 +43,7 @@
<span>图片hover效果</span>
</div>
<div class="component-item">
<pan-thumb width='100px' height='100px' image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'>
<pan-thumb width="100px" height="100px" image="https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191">
vue-element-admin
</pan-thumb>
</div>
@@ -67,7 +67,7 @@
<span>hover text</span>
</div>
<div class="component-item">
<mallki className='mallki-text' text='vue-element-admin'></mallki>
<mallki className="mallki-text" text="vue-element-admin"></mallki>
</div>
</el-card>
</el-col>
@@ -83,6 +83,7 @@ import waves from '@/directive/waves/index.js' // 水波纹指令
import Mallki from '@/components/TextHoverEffect/Mallki'
export default {
name: 'componentMixin-demo',
components: {
PanThumb,
MdInput,

29
src/views/components-demo/splitpane.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="components-container">
<code>splitPane 如果你用过<a href='http://codepen.io/' target='_blank'> codepen</a>,<a href='https://jsfiddle.net/' target='_blank'> jsfiddle </a>就不会陌生了
<a href='https://github.com/PanJiaChen/vue-split-pane' target='_blank'>项目地址</a>
<code>splitPane 如果你用过<a href="http://codepen.io/" target="_blank"> codepen</a>,<a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>就不会陌生了
<a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'>项目地址</a>
</code>
<split-pane v-on:resize="resize" split="vertical">
<template slot="paneL">
@@ -26,6 +26,7 @@
import splitPane from 'vue-splitpane'
export default {
name: 'splitpane-demo',
components: { splitPane },
methods: {
resize() {
@@ -37,29 +38,29 @@ export default {
<style scoped>
.components-container {
position: relative;
height: 100vh;
position: relative;
height: 100vh;
}
.left-container {
background-color: #F38181;
height: 100%;
background-color: #F38181;
height: 100%;
}
.right-container {
background-color: #FCE38A;
height: 200px;
background-color: #FCE38A;
height: 200px;
}
.top-container {
background-color: #FCE38A;
width: 100%;
height: 100%;
background-color: #FCE38A;
width: 100%;
height: 100%;
}
.bottom-container {
width: 100%;
background-color: #95E1D3;
height: 100%;
width: 100%;
background-color: #95E1D3;
height: 100%;
}
</style>

1
src/views/components-demo/sticky.vue
View File

@@ -97,6 +97,7 @@
import Sticky from '@/components/Sticky'
export default {
name: 'sticky-demo',
components: { Sticky },
data() {
return {

9
src/views/components-demo/tinymce.vue
View File

@@ -1,10 +1,12 @@
<template>
<div class="components-container">
<code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader13'> 相关文章 </a> <a target='_blank' href='https://www.tinymce.com/'> 官网 </a></code>
<code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce
<a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor">文档介绍</a>
</code>
<div>
<tinymce :height='200' v-model="content"></tinymce>
<tinymce :height="200" v-model="content"></tinymce>
</div>
<div class='editor-content' v-html='content'></div>
<div class="editor-content" v-html="content"></div>
</div>
</template>
@@ -12,6 +14,7 @@
import Tinymce from '@/components/Tinymce'
export default {
name: 'tinymce-demo',
components: { Tinymce },
data() {
return {