avue skeleton骨架屏实现占位图显示效果代码

代码语言:html

所属分类:布局界面

代码描述:avue skeleton骨架屏实现占位图显示效果代码

代码标签: 实现 位图 显示 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/avue.css">
</head>

<body>
    <div id="app">
        <div>
   最简单的占位效果。
  <avue-skeleton></avue-skeleton>
  <br />
  最后一行占满的效果
  <avue-skeleton block></avue-skeleton>
  <br />
  带头像的效果
  <avue-skeleton avatar></avue-skeleton>
  <br />
  自定义行数的效果
  <avue-skeleton avatar :rows="5"></avue-skeleton>
  <br />
  自定义列表的效果
  <avue-skeleton avatar :rows="4" :number="3"></avue-skeleton>
  <br />
  动态切换效果
  <el-switch :active-value="false" :inactive-value="true" v-model="loading&quo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0