diff --git a/App.vue b/App.vue
index 451c12a..43fc6ac 100755
--- a/App.vue
+++ b/App.vue
@@ -6,7 +6,7 @@
@on-copy="onCopy"
@on-upload-image="onUpladImage"
@on-save="onSave"
- :height="500"
+ :height="fullHeight"
/>
@@ -21,11 +21,33 @@
components: {
Markdown
},
- data: function () {
- return {
- val: ''
+ mounted() {
+ const that = this
+ window.onresize = () => {
+ return (() => {
+ window.fullHeight = document.documentElement.clientHeight
+ that.fullHeight = window.fullHeight
+ })()
}
},
+ data: function () {
+ return {
+ val: '',
+ fullHeight: document.documentElement.clientHeight
+ }
+ },
+ watch: {
+ fullHeight(val) {
+ if (!this.timer) {
+ this.fullHeight = val
+ this.timer = true
+ let that = this
+ setTimeout(function() {
+ that.timer = false
+ }, 400)
+ }
+ }
+ },
methods: {
onReady(data) {
console.log(data)
diff --git a/README.md b/README.md
index a677da3..950daab 100755
--- a/README.md
+++ b/README.md
@@ -342,7 +342,15 @@ export default index.setOptions({
预览区域和文档预览组件暂不支持自动生成目录,实现自动生成目录思路目前想到的大致有
- 重写`renderer.heading` 方法,为生成的标题添加id,输入特定快捷键,如`[TOC]`时,查找预览区域内的的所有标题标签,分析等级关系,生成目录标签
-
+属性 | 说明| 类型| 默认值
+-|-|-|-
+affix |固定模式| Boolean |true
+offset-top |距离窗口顶部达到指定偏移量后触发 |Number| 0
+offset-bottom |距离窗口底部达到指定偏移量后触发| Number| -
+bounds| 锚点区域边界,单位:px| Number| 5
+scroll-offset| 点击滚动的额外距离| Number| 0
+container| 指定滚动的容器 |String | HTMLElement| -
+show-ink| 是否显示小圆点| Boolean |false
### icon替换
项目内所有的icon和命名参考`/assets/font/index.html`,替换时需注意,预览区域的checkbox为icon,注意一并替换,
修改`/assets/css/index.less`内的`input[type="checkbox"]`的`:after`样式。
diff --git a/img/截图.jpg b/img/截图.jpg
new file mode 100644
index 0000000..0fcec28
Binary files /dev/null and b/img/截图.jpg differ
diff --git a/src/assets/css/anchor.less b/src/assets/css/anchor.less
new file mode 100644
index 0000000..40e10a6
--- /dev/null
+++ b/src/assets/css/anchor.less
@@ -0,0 +1,81 @@
+// Anchor
+@primary-color : #2d8cf0;
+@anchor-border-width: 2px;
+@border-color-split : #e8eaec; // inside
+@body-background : #fff;
+@transition-time : .2s;
+@text-color : #515a6e;
+.anchor{
+ &-wrapper{
+ overflow: auto;
+ padding-left: 4px;
+ margin-left: -4px;
+ }
+
+ &{
+ position: relative;
+ padding-left: @anchor-border-width;
+
+ &-ink {
+ position: absolute;
+ height: 100%;
+ left: 0;
+ top: 0;
+ &:before {
+ content: ' ';
+ position: relative;
+ width: @anchor-border-width;
+ height: 100%;
+ display: block;
+ background-color: @border-color-split;
+ margin: 0 auto;
+ }
+ &-ball {
+ display: inline-block;
+ position: absolute;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ border: 2px solid @primary-color;
+ background-color: @body-background;
+ left: 50%;
+ transition: top @transition-time ease-in-out;
+ transform: translate(-50%, 2px);
+ }
+ }
+
+ &.fixed &-ink &-ink-ball {
+ display: none;
+ }
+ }
+
+ &-link {
+ padding: 8px 0 6px 16px !important;
+ line-height: 1;
+
+ &-title {
+ font-size: 12px;
+ text-decoration:none;
+ display: block;
+ position: relative;
+ transition: all .3s;
+ color: @text-color;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-bottom: 8px;
+ &:only-child {
+ margin-bottom: 0;
+ }
+ }
+
+ &-active > &-title {
+ color: @primary-color;
+ }
+ }
+
+ &-link &-link {
+ padding-top: 6px;
+ padding-bottom: 6px;
+ }
+}
diff --git a/src/assets/css/index.less b/src/assets/css/index.less
index 1e22a4a..0c2ea8e 100644
--- a/src/assets/css/index.less
+++ b/src/assets/css/index.less
@@ -1,3 +1,4 @@
+@import './anchor.less';
@margin: 8px 0;
@line-height: 22px;
diff --git a/src/assets/js/marked/createToc.js b/src/assets/js/marked/createToc.js
new file mode 100644
index 0000000..d32f069
--- /dev/null
+++ b/src/assets/js/marked/createToc.js
@@ -0,0 +1,19 @@
+export default {
+ add(text, level) {
+ const anchor = `toc${level}${++this.index}`;
+ const item = { anchor, level, text };
+ const items = this.tocItems;
+
+ if (item.level <= 3) {
+ items.push(item);
+ }
+
+ return anchor;
+ },
+ reset: function() {
+ this.tocItems = [];
+ this.index = 0;
+ },
+ tocItems: [],
+ index: 0
+};
diff --git a/src/assets/js/marked/index.js b/src/assets/js/marked/index.js
index ff90515..1be469c 100644
--- a/src/assets/js/marked/index.js
+++ b/src/assets/js/marked/index.js
@@ -1,3 +1,4 @@
+import tocObj from './createToc';
var block = {
newline: /^\n+/,
code: /^( {4}[^\n]+\n*)+/,
@@ -947,20 +948,22 @@ Renderer.prototype.html = function (html) {
};
Renderer.prototype.heading = function (text, level, raw, slugger) {
- if (this.options.headerIds) {
- return '
/g, '' + this.copyBtnText + '') } this.html = html; + //toc + this.toc = tocObj.tocItems; + tocObj.reset() + this.addImageClickListener(); this.addCopyListener(); this.$emit('input', currentValue); diff --git a/src/mixins/common.js b/src/mixins/common.js index 66ca350..6aa24c8 100644 --- a/src/mixins/common.js +++ b/src/mixins/common.js @@ -1,8 +1,11 @@ import {saveFile} from '../utils'; import defaultTools from '../config/tools'; +import AnchorLink from '../components/Anchor/anchorLink' +import Anchor from '../components/Anchor/anchor' export default { name: 'markdown', + components: {Anchor,AnchorLink}, props: { value: { type: [String, Number],').replace(/<\/pre>/g, '