refactor:views/components

src/views/components-demo/avatarUpload.vue

@@ -0,0 +1,49 @@
+<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>
+
+    <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>
+  </div>
+</template>
+
+<script>
+import ImageCropper from '@/components/ImageCropper'
+import PanThumb from '@/components/PanThumb'
+
+export default {
+  components: { ImageCropper, PanThumb },
+  data() {
+    return {
+      imagecropperShow: false,
+      imagecropperKey: 0,
+      image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
+    }
+  },
+  methods: {
+    cropSuccess(resData) {
+      this.imagecropperShow = false
+      this.imagecropperKey = this.imagecropperKey + 1
+      this.image = resData.files.avatar
+    },
+    close() {
+      this.imagecropperShow = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .avatar{
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+  }
+</style>
+

src/views/components-demo/backToTop.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="components-container">
+    <code>页面滚动到指定位置会在右下角出现返回顶部按钮</code>
+    <code>可自定义按钮的样式、show/hide临界点、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素 </code>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
+    <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
+    <el-tooltip placement="top" content="文字提示">
+      <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+import BackToTop from '@/components/BackToTop'
+
+export default {
+  components: { BackToTop },
+  data() {
+    return {
+      myBackToTopStyle: {
+        right: '50px',
+        bottom: '50px',
+        width: '40px',
+        height: '40px',
+        'border-radius': '4px',
+        'line-height': '45px', // 请保持与高度一致以垂直居中
+        background: '#e7eaf1'// 按钮的背景颜色
+      }
+    }
+  }
+}
+  </script>

src/views/components-demo/countTo.vue

@@ -0,0 +1,188 @@
+<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>
+      <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>
+    </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>
+  </div>
+</template>
+
+<script>
+import countTo from 'vue-count-to'
+
+export default {
+  components: { countTo },
+  data() {
+    return {
+      setStartVal: 0,
+      setEndVal: 2017,
+      setDuration: 4000,
+      setDecimals: 0,
+      setSeparator: ',',
+      setSuffix: ' rmb',
+      setPrefix: '¥ '
+    }
+  },
+  computed: {
+    _startVal() {
+      if (this.setStartVal) {
+        return this.setStartVal
+      } else {
+        return 0
+      }
+    },
+    _endVal() {
+      if (this.setEndVal) {
+        return this.setEndVal
+      } else {
+        return 0
+      }
+    },
+    _duration() {
+      if (this.setDuration) {
+        return this.setDuration
+      } else {
+        return 100
+      }
+    },
+    _decimals() {
+      if (this.setDecimals) {
+        if (this.setDecimals < 0 || this.setDecimals > 20) {
+          alert('digits argument must be between 0 and 20')
+          return 0
+        }
+        return this.setDecimals
+      } else {
+        return 0
+      }
+    },
+    _separator() {
+      return this.setSeparator
+    },
+    _suffix() {
+      return this.setSuffix
+    },
+    _prefix() {
+      return this.setPrefix
+    }
+  },
+  methods: {
+    start() {
+      this.$refs.example.start()
+    },
+    pauseResume() {
+      this.$refs.example.pauseResume()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.example-btn {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: 500;
+  text-align: center;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  line-height: 1.5;
+  padding: 4px 15px;
+  font-size: 12px;
+  border-radius: 4px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
+  transition: all .3s cubic-bezier(.645, .045, .355, 1);
+  position: relative;
+  color: rgba(0, 0, 0, .65);
+  background-color: #fff;
+  border-color: #d9d9d9;
+}
+
+.example-btn:hover {
+  color: #4AB7BD;
+  background-color: #fff;
+  border-color: #4AB7BD;
+}
+.example {
+  font-size: 50px;
+  color: #F6416C;
+  display: block;
+  margin: 10px 0;
+  text-align: center;
+  font-size: 80px;
+  font-weight: 500;
+}
+
+.label {
+  color: #2f4f4f;
+  font-size: 16px;
+  display: inline-block;
+  margin: 15px 30px 15px 0;
+}
+
+input {
+  position: relative;
+  display: inline-block;
+  padding: 4px 7px;
+  width: 70px;
+  height: 28px;
+  cursor: text;
+  font-size: 12px;
+  line-height: 1.5;
+  color: rgba(0, 0, 0, .65);
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+}
+
+.startBtn {
+  margin-left: 20px;
+  font-size: 20px;
+  color: #30B08F;
+  background-color: #fff;
+}
+
+.startBtn:hover {
+  background-color: #30B08F;
+  color: #fff;
+  border-color: #30B08F;
+}
+
+.pause-resume-btn {
+  font-size: 20px;
+  color: #E65D6E;
+  background-color: #fff;
+}
+
+.pause-resume-btn:hover {
+  background-color: #E65D6E;
+  color: #fff;
+  border-color: #E65D6E;
+}
+</style>
+
+

src/views/components-demo/dndList.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="components-container">
+    <code>drag-list base on <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a></code>
+    <div class="editor-container">
+       <dnd-list :list1="list1" :list2="list2" list1Title="头条列表" list2Title="文章池"></dnd-list>
+    </div>
+  </div>
+</template>
+
+<script>
+import DndList from '@/components/DndList'
+import { fetchList } from '@/api/article'
+
+export default {
+  components: { DndList },
+  data() {
+    return {
+      list1: [],
+      list2: []
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      this.listLoading = true
+      fetchList().then(response => {
+        this.list1 = response.data.items.splice(0, 5)
+        this.list2 = response.data.items
+      })
+    }
+  }
+}
+</script>
+
+

src/views/components-demo/dropzone.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="components-container">
+    <code>
+      基于<a class='link-type' href='https://github.com/rowanwins/vue-dropzone'> dropzone </a>封装 ,
+      由于我司业务有特殊需求，而且要传七牛 所以没用第三方 选择了自己封装
+    </code>
+    <div class="editor-container">
+      <dropzone v-on:dropzone-removedFile="dropzoneR" v-on:dropzone-success="dropzoneS" id="myVueDropzone" url="https://httpbin.org/post"></dropzone>
+    </div>
+  </div>
+</template>
+
+<script>
+import Dropzone from '@/components/Dropzone'
+
+export default {
+  components: { Dropzone },
+  methods: {
+    dropzoneS(file) {
+      console.log(file)
+      this.$message({ message: '上传成功', type: 'success' })
+    },
+    dropzoneR(file) {
+      console.log(file)
+      this.$message({ message: '删除成功', type: 'success' })
+    }
+  }
+}
+</script>
+
+

src/views/components-demo/jsonEditor.vue

@@ -0,0 +1,31 @@
+<template>
+  <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>
+    </div>
+  </div>
+</template>
+
+<script>
+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 {
+  components: { JsonEditor },
+  data() {
+    return {
+      value: JSON.parse(jsonData)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.editor-container{
+  position: relative;
+  height: 100%;
+}
+</style>
+

src/views/components-demo/markdown.vue

@@ -0,0 +1,45 @@
+<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>
+    <div class="editor-container">
+      <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>
+    <div v-html="html"></div>
+  </div>
+</template>
+
+<script>
+import MarkdownEditor from '@/components/MarkdownEditor'
+
+export default {
+  components: { MarkdownEditor },
+  data() {
+    return {
+      content: '## Simplemde',
+      html: ''
+    }
+  },
+  computed: {
+    cachedViews() {
+      return this.$store.state.app.cachedViews
+    }
+  },
+  // deactivated() {
+  //   console.log(this.cachedViews.indexOf(this.$route.name))
+  //   if (this.cachedViews.indexOf(this.$route.name) < 0) {
+  //     this.$destroy()
+  //   }
+  // },
+  methods: {
+    markdown2Html() {
+      import('showdown').then(showdown => {
+        const converter = new showdown.Converter()
+        this.html = converter.makeHtml(this.content)
+      })
+    }
+  }
+}
+</script>
+
+

src/views/components-demo/mixin.vue

@@ -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>

src/views/components-demo/splitpane.vue

@@ -0,0 +1,65 @@
+<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>
+		<split-pane v-on:resize="resize" split="vertical">
+			<template slot="paneL">
+				<div class="left-container"></div>
+			</template>
+			<template slot="paneR">
+				<split-pane split="horizontal">
+					<template slot="paneL">
+						<div class="top-container"></div>
+					</template>
+					<template slot="paneR">
+						<div class="bottom-container">
+						</div>
+					</template>
+				</split-pane>
+			</template>
+		</split-pane>
+	</div>
+</template>
+
+<script>
+import splitPane from 'vue-splitpane'
+
+export default {
+  components: { splitPane },
+  methods: {
+    resize() {
+      console.log('resize')
+    }
+  }
+}
+</script>
+
+<style  scoped>
+	.components-container {
+		position: relative;
+		height: 100vh;
+	}
+
+	.left-container {
+		background-color: #F38181;
+		height: 100%;
+	}
+
+	.right-container {
+		background-color: #FCE38A;
+		height: 200px;
+	}
+
+	.top-container {
+		background-color: #FCE38A;
+		width: 100%;
+		height: 100%;
+	}
+
+	.bottom-container {
+		width: 100%;
+		background-color: #95E1D3;
+		height: 100%;
+	}
+</style>

src/views/components-demo/sticky.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <sticky className="sub-navbar">
+      <el-dropdown trigger="click">
+        <el-button>
+          平台<i class="el-icon-caret-bottom el-icon--right"></i>
+        </el-button>
+        <el-dropdown-menu class="no-border" slot="dropdown">
+          <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
+            <el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
+              {{item.name}}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <el-dropdown trigger="click">
+        <el-button>
+          外链<i class="el-icon-caret-bottom el-icon--right"></i>
+        </el-button>
+        <el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
+          <el-input placeholder="请输入内容" v-model="url">
+            <template slot="prepend">填写url</template>
+          </el-input>
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <div class="time-container">
+        <el-date-picker v-model="time" type="datetime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="发布时间">
+        </el-date-picker>
+      </div>
+
+      <el-button style="margin-left: 10px;" type="success">发布
+      </el-button>
+    </sticky>
+
+    <div class="components-container">
+      <code>Sticky header 当页面滚动到预设的位置会吸附在顶部</code>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import Sticky from '@/components/Sticky'
+
+export default {
+  components: { Sticky },
+  data() {
+    return {
+      time: '',
+      url: '',
+      platforms: ['a-platform'],
+      platformsOptions: [
+        { key: 'a-platform', name: '平台A' },
+        { key: 'b-platform', name: '平台B' },
+        { key: 'c-platform', name: '平台C' }
+      ],
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now()
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .time-container {
+    display: inline-block;
+  }
+</style>
+

src/views/components-demo/tinymce.vue

@@ -0,0 +1,30 @@
+<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>
+    <div>
+      <tinymce :height='200' v-model="content"></tinymce>
+    </div>
+    <div class='editor-content' v-html='content'></div>
+  </div>
+</template>
+
+<script>
+import Tinymce from '@/components/Tinymce'
+
+export default {
+  components: { Tinymce },
+  data() {
+    return {
+      content: 'Tinymce'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.editor-content{
+  margin-top: 20px;
+}
+</style>
+
+