perf:format code&&fix typo
This commit is contained in:
Pan
parent
497b96f931
commit
f2fcdee815
24
index.html
24
index.html
|
|
@ -1,15 +1,15 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
<meta name="renderer" content="webkit">
|
<meta name="renderer" content="webkit">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
<title>Juicy</title>
|
<title>vue-element-admin</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<script src=<%= htmlWebpackPlugin.options.path %>/tinymce/tinymce.min.js></script>
|
||||||
<script src=<%= htmlWebpackPlugin.options.path %>/tinymce/tinymce.min.js></script>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -10,12 +10,12 @@ vueSticky.install = Vue => {
|
||||||
|
|
||||||
elStyle.position = '-webkit-sticky'
|
elStyle.position = '-webkit-sticky'
|
||||||
elStyle.position = 'sticky'
|
elStyle.position = 'sticky'
|
||||||
// if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
|
// if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
|
||||||
// if (~elStyle.position.indexOf('sticky')) {
|
// if (~elStyle.position.indexOf('sticky')) {
|
||||||
// elStyle.top = `${stickyTop}px`;
|
// elStyle.top = `${stickyTop}px`;
|
||||||
// elStyle.zIndex = zIndex;
|
// elStyle.zIndex = zIndex;
|
||||||
// return
|
// return
|
||||||
// }
|
// }
|
||||||
const elHeight = el.getBoundingClientRect().height
|
const elHeight = el.getBoundingClientRect().height
|
||||||
const elWidth = el.getBoundingClientRect().width
|
const elWidth = el.getBoundingClientRect().width
|
||||||
elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`
|
elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="components-container">
|
<div class="components-container">
|
||||||
<code>drag-list base on <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a></code>
|
<code>drag-list base on
|
||||||
|
<a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
|
||||||
|
</code>
|
||||||
<div class="editor-container">
|
<div class="editor-container">
|
||||||
<dnd-list :list1="list1" :list2="list2" list1Title="头条列表" list2Title="文章池"></dnd-list>
|
<dnd-list :list1="list1" :list2="list2" list1Title="头条列表" list2Title="文章池"></dnd-list>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<code>Markdown 我们这里选用了
|
<code>Markdown 我们这里选用了
|
||||||
<a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，简单的用vue封装了一下
|
<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 target="_blank" href="https://segmentfault.com/a/1190000009762198#articleHeader14">
|
||||||
相关文章 </a>
|
相关文章 </a>
|
||||||
</code>
|
</code>
|
||||||
<div class="editor-container">
|
<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>
|
||||||
|
|
@ -16,26 +16,25 @@
|
||||||
<script>
|
<script>
|
||||||
import MarkdownEditor from '@/components/MarkdownEditor'
|
import MarkdownEditor from '@/components/MarkdownEditor'
|
||||||
|
|
||||||
|
const content = `
|
||||||
|
**this is test**
|
||||||
|
|
||||||
|
* vue
|
||||||
|
* element
|
||||||
|
* webpack
|
||||||
|
|
||||||
|
## Simplemde
|
||||||
|
`
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'markdown-demo',
|
name: 'markdown-demo',
|
||||||
components: { MarkdownEditor },
|
components: { MarkdownEditor },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
content: '## Simplemde',
|
content: content,
|
||||||
html: ''
|
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: {
|
methods: {
|
||||||
markdown2Html() {
|
markdown2Html() {
|
||||||
import('showdown').then(showdown => {
|
import('showdown').then(showdown => {
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,26 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="components-container">
|
<div class="components-container">
|
||||||
<code>splitPane 如果你用过<a href="http://codepen.io/" target="_blank"> codepen</a>,<a href="https://jsfiddle.net/" target="_blank"> jsfiddle </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>
|
<a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'>项目地址</a>
|
||||||
</code>
|
</code>
|
||||||
<split-pane v-on:resize="resize" split="vertical">
|
<split-pane v-on:resize="resize" split="vertical">
|
||||||
<template slot="paneL">
|
<template slot="paneL">
|
||||||
<div class="left-container"></div>
|
<div class="left-container"></div>
|
||||||
</template>
|
</template>
|
||||||
<template slot="paneR">
|
<template slot="paneR">
|
||||||
<split-pane split="horizontal">
|
<split-pane split="horizontal">
|
||||||
<template slot="paneL">
|
<template slot="paneL">
|
||||||
<div class="top-container"></div>
|
<div class="top-container"></div>
|
||||||
</template>
|
</template>
|
||||||
<template slot="paneR">
|
<template slot="paneR">
|
||||||
<div class="bottom-container">
|
<div class="bottom-container"></div>
|
||||||
</div>
|
</template>
|
||||||
</template>
|
</split-pane>
|
||||||
</split-pane>
|
</template>
|
||||||
</template>
|
</split-pane>
|
||||||
</split-pane>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="components-container">
|
<div class="components-container">
|
||||||
<code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce
|
<code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce
|
||||||
<a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor">文档介绍</a>
|
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor">文档介绍</a>
|
||||||
</code>
|
</code>
|
||||||
<div>
|
<div>
|
||||||
<tinymce :height="200" v-model="content"></tinymce>
|
<tinymce :height="200" v-model="content"></tinymce>
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
<el-progress :percentage="12"></el-progress>
|
<el-progress :percentage="12"></el-progress>
|
||||||
</div>
|
</div>
|
||||||
<div class='progress-item'>
|
<div class='progress-item'>
|
||||||
<span>ESlint</span>
|
<span>ESLint</span>
|
||||||
<el-progress :percentage="100" status="success"></el-progress>
|
<el-progress :percentage="100" status="success"></el-progress>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -56,7 +56,7 @@ export default {
|
||||||
legend: {
|
legend: {
|
||||||
left: 'center',
|
left: 'center',
|
||||||
bottom: '10',
|
bottom: '10',
|
||||||
data: ['industries', 'technology', 'forex', 'gold', 'forecasts']
|
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
|
||||||
},
|
},
|
||||||
calculable: true,
|
calculable: true,
|
||||||
series: [
|
series: [
|
||||||
|
|
@ -67,11 +67,11 @@ export default {
|
||||||
radius: [15, 95],
|
radius: [15, 95],
|
||||||
center: ['50%', '38%'],
|
center: ['50%', '38%'],
|
||||||
data: [
|
data: [
|
||||||
{ value: 320, name: 'industries' },
|
{ value: 320, name: 'Industries' },
|
||||||
{ value: 240, name: 'technology' },
|
{ value: 240, name: 'Technology' },
|
||||||
{ value: 149, name: 'forex' },
|
{ value: 149, name: 'Forex' },
|
||||||
{ value: 100, name: 'gold' },
|
{ value: 100, name: 'Gold' },
|
||||||
{ value: 59, name: 'forecasts' }
|
{ value: 59, name: 'Forecasts' }
|
||||||
],
|
],
|
||||||
animationEasing: 'cubicInOut',
|
animationEasing: 'cubicInOut',
|
||||||
animationDuration: 2600
|
animationDuration: 2600
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue