diff --git a/docs/.vuepress/theme/global-components/CodeSimulator.vue b/docs/.vuepress/theme/global-components/CodeSimulator.vue index 4ff7638d67dbb190069373aaa5278f3c4f5eda6f..c2f79ca3c8907879fcb50cc11ad0f15a70c56d83 100644 --- a/docs/.vuepress/theme/global-components/CodeSimulator.vue +++ b/docs/.vuepress/theme/global-components/CodeSimulator.vue @@ -12,8 +12,20 @@ export default { activeIndex: 0 } }, - created(){}, + mounted(){ + this.onWindowResize() + window.addEventListener('resize', this.onWindowResize) + }, + beforeDestroy(){ + window.removeEventListener('resize', this.onWindowResize) + }, methods:{ + onWindowResize(){ + const contentWidth = getComputedStyle(document.querySelector('.theme-default-content')).width + if (window.matchMedia('(max-width: 410px)').matches) { + this.$refs.codeIframe.style.maxWidth = contentWidth + } + }, onClick(index){ this.activeIndex = index }, @@ -37,7 +49,7 @@ export default { h('iframe',{class:'code-iframe',attrs:{ src:this.src, frameborder:'0' - }}) + },ref:'codeIframe'}) ]), ] @@ -84,7 +96,7 @@ export default { } - diff --git a/docs/.vuepress/theme/styles/index.styl b/docs/.vuepress/theme/styles/index.styl index b3adb3447a00173bba4c66569088649dfb97c598..b79e93030cad57d7a87134d2691e2b0b5471207c 100644 --- a/docs/.vuepress/theme/styles/index.styl +++ b/docs/.vuepress/theme/styles/index.styl @@ -88,6 +88,10 @@ main.page @media (max-width: $MQMobile) & margin-top $navbarHeight + img + max-width 100% !important + table + position relative h1, h2, h3, h4, h5, h6 diff --git a/docs/README.md b/docs/README.md index ae1503c789777b7e8bae8b7f19b231c2e9ec21a2..9adfe41d3a5211679ba929a47c019adca0f7a41c 100644 --- a/docs/README.md +++ b/docs/README.md @@ -93,11 +93,15 @@ pageClass: custom-page-class 京东小程序版 -
+
+ +
-
+
+ +