cupshe-skeleton v0.0.2

Vue-Skeletion

Installation

npm

$ npm i vue-skeleton -S

yarn

$ yarn add vue-skeleton

Usage

main.js:

import { createApp } from 'vue';
import App from './app.vue';
import 'windi.css';
import skeleton from 'vue-skeleton';
createApp(App)
  .use(skeleton)
  .mount('#app');

template:

<div>
  <h1 v-skeleton>
   {{ title }}
  </h1>
</div>
<script setup>
const description = ref('');
// 模拟请求
setTimeout(() => {
  description.value = 'hello world';
}, 5000);
</script>

列表渲染 需要配合使用状态(isLock)。超过骨架默认展示数量，后续新增的节点只会执行mounted,不会执行beforeUpdate，所以如果没有状态锁定后续新增的节点会一直Loading

<p
  v-for="item in state.list"
  v-skeleton:[isLock]
>
  {{ item.name }}
</p>
<script>
 import { reactive, ref } from 'vue';
const isLock = ref(false);
const state = reactive({
  list: [
    {},
    {},
  ]
});
// 模拟请求
setTimeout(() => {
  state.list = [
    {name: 'zhangsan'},
    {name: 'lisi'},
    {name: 'wanger'},
    {name: 'caowu'},
    {name: 'xiaohuang'},
    {name: 'xiaoli'}
  ];
  isLock.value = true;
}, 5000);
</script>