vue - 骨架屏

原文

github

dps生成首页骨架屏

1. npm i draw-page-structure –g
2. cnpm install puppeteer -g
3. dps init
4. 修改 dps.config.js 进行相关配置
5. dps start 开始生成骨架屏
6. animation: 'opacity 1s linear infinite;'配置动效
7. 将生成的html内容放到项目的html中

const dpsConfig = {
	url: 'http://localhost:8080/#/',      // 待生成骨架屏页面的地址，用百度（https://baidu.com）试试也可以
	output: {
		filepath: '',   // 生成骨架屏的存放页面，一般为项目的入口页面
		injectSelector: '#app'  // 生成的骨架屏插入页面的节点
	},
	// header: {
	// 	height: 40,
	// 	background: '#1b9af4'
	// },
	// background: '#eee',
	animation: 'opacity 1s linear infinite;',
	// includeElement: function(node, draw) {
		// 定制某个节点画出来的样子，带上return false
		// if(node.id == 'ui-alert') {
			// 跳过该节点及其子节点
			// return false;
		// }
		// if(node.tagName.toLowerCase() === 'img') {
			// 对该图片生成宽100%，高8%，颜色为红色的色块
			// draw({
				// width: 100,
				// height: 8,
				// left: 0,
				// top: 0,
				// zIndex: 99999999,
				// background: 'red'
			// });
			// return false;
		// } 
	// },
	// writePageStructure: function(html) {
		// 自己处理生成的骨架屏
		// fs.writeFileSync(filepath, html);
		// console.log(html)
	// },
	init: function() {
		// 生成骨架屏之前的操作，比如删除干扰节点
	}
}

module.exports = dpsConfig;

组件骨架屏 - vue-content-loader

文档地址

<template>
  <content-loader :width="476" :height="75" :speed="2" primaryColor="#f3f3f3" secondaryColor="#ecebeb">
    <rect x="45" y="35" rx="3" ry="3" width="360" height="6" />
    <rect x="45" y="55" rx="3" ry="3" width="300" height="6" />
    <rect x="45" y="15" rx="3" ry="3" width="100" height="6" />
    <rect x="15" y="15" rx="1" ry="1" width="20" height="20" />
  </content-loader>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { ContentLoader } from 'vue-content-loader';
@Component({
  components: {
    ContentLoader
  }
})
export default class CommentSkeleton extends Vue {}
</script>

<style lang="less"></style>