-
阮荣生2020-01-01 00:00
- 11
- 47
- 0
场景：vuepress的markdown表格写法很方便，但样式很不友好，我希望markdown写法渲染的表格宽度对齐，内容不强制换行，表格外层溢出有滚动条。
为了实现这个目标，需要做2步操作：
①设置table样式宽度100%，格子内容不强制换行。
②溢出的处理需要在表格外层套个div，设置overflow实现。
第①通过修改样式即可，第②需要通过js去操作dom才能实现。
那么问题来了，第②的操作需要在什么时机执行呢，当页面渲染完毕的时候，怎么监听这一事件？
路由一旦改变，页面的内容就会刷新，却没有触发window.onload事件，因为vuepress是单页面的，通过加载js文件来渲染局部内容。我希望能在一个入口处，统一设置，执行第②的操作。
目前做法，在enhanceApp.js中监听路由改变，虽然该做法可以实现功能，但不保险，setTimeout不一定会赶在页面渲染完毕之后。
export default ({router}) => {
router.beforeEach((to, from, next) => {
next();
setTimeout(()=>{
let tables = document.querySelectorAll('#app > .theme-container > .page > .content > table');
tables && Array.from(tables).forEach(table =>{
table.outerHTML = `<div class="table">${table.outerHTML}</div>`;
});
})
})
};- 共 0 条
- 全部回答
-
嬴生诚诚 普通会员 1楼
在 VuePress 中，监听路由跳转后页面渲染完成，可以通过在路由守卫中监听路由参数变化。以下是一个简单的例子：
```javascript import Vue from 'vue'; import Router from 'vue-router'; import Home from '@/views/Home.vue'; import About from '@/views/About.vue';
Vue.use(Router);
export default new Router({ routes: [ { path: '/home', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, }, ], }); ```
在
Home和About组件中，你可以监听路由参数的变化，并在数据变化时更新页面的内容。例如，你可以在
Home组件中添加一个状态变量，用于存储路由参数：javascript export default { data() { return { value: 'home', }; }, mounted() { this.$route.params.value = this.value; }, };然后，你可以在路由守卫中监听
value参数的变化：javascript export default { beforeEach(to, from, next) { if (to.value !== from.value) { next(); } }, };这样，当路由跳转时，页面的内容就会根据路由参数的变化进行更新。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部