vue分页获取数据插件_Vue插件，用于在获取数据时呈现假内容，以提供更好的UX

vue分页获取数据插件

Vue内容占位符 (vue-content-placeholders)

Composable components for rendering fake (progressive) content like facebook in vue

可渲染虚假(渐进)内容的可组合组件，例如Vue中的Facebook

Vue addon for rendering fake content while data is fetching to provide better UX and lower bounce rate.

Vue插件可在获取数据时呈现假内容，以提供更好的用户体验和更低的跳出率。

安装 (Installation)

• via npm: npm install vue-content-placeholders --save

  通过npm： npm install vue-content-placeholders --save

• via yarn: yarn add vue-content-placeholders

  通过纱线： yarn add vue-content-placeholders

用法 (Usage)

Include plugin in your main.js file.

在main.js文件中包含插件。

import Vue from 'vue'
import VueContentPlaceholders from 'vue-content-placeholders'

Vue.use(VueContentPlaceholders)

⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

import️导入软件包时包含一个css文件。 您可能需要设置捆绑程序才能将CSS嵌入到页面中。

例子： (Examples:)

<content-placeholders>
  <content-placeholders-heading :img="true" />
  <content-placeholders-text :lines="3" />
</content-placeholders>

<content-placeholders :rounded="true">
  <content-placeholders-img />
  <content-placeholders-heading />
</content-placeholders>

可用的组件和属性 (Available components and properties)

• root <content-placeholders>

  根<content-placeholders>

  • animated (default: true)animated (默认值：true)
  • rounded (default: false) - border radiusrounded (默认值：false)-边框半径
  • centered (default: false)centered (默认值：false)

  these properties define how all children components will act

  这些属性定义了所有子组件的行为方式

• <content-placeholders-heading />

  <content-placeholders-heading />

  • img (default: false)img (默认值：false)

• <content-placeholders-text />

  <content-placeholders-text />

  • lines (default: 4)lines (默认值：4)

• <content-placeholders-img />

  <content-placeholders-img />

翻译自: https://vuejsexamples.com/vue-addon-for-rendering-fake-content-while-data-is-fetching-to-provide-better-ux/

vue分页获取数据插件