Vue3骨架屏(Skeleton)

67 篇文章 4 订阅
65 篇文章 3 订阅

效果如下图:在线预览

在这里插入图片描述
![在这里插35e42918b2659b696be9994.png)

APIs

参数说明类型默认值必传
animated是否展示动画效果booleantruefalse
button是否使用按钮占位图boolean | SkeletonButtonPropsfalsefalse
avatar是否显示头像占位图boolean | SkeletonAvatarPropsfalsefalse
input是否使用输入框占位图boolean | SkeletonInputPropsfalsefalse
image是否使用图像占位图booleanfalsefalse
title是否显示标题占位图boolean | SkeletonTitlePropstruefalse
paragraph是否显示段落占位图boolean | SkeletonParagraphPropstruefalse
loadingtrue 时,显示占位图,反之则直接展示子组件booleantruefalse

SkeletonButtonProps Type

名称说明类型必传
shape指定按钮的形状‘default’ | ‘round’ | ‘circle’false
size设置按钮的大小‘default’ | ‘small’ | ‘large’false
block将按钮宽度调整为其父宽度的选项booleanfalse

SkeletonAvatarProps Type

名称说明类型必传
shape指定头像的形状‘circle’ | ‘square’false
size设置头像占位图的大小number | ‘default’ | ‘small’ | ‘large’false

SkeletonInputProps Type

名称说明类型必传
size设置输入框的大小‘default’ | ‘small’ | ‘large’false

SkeletonTitleProps Type

名称说明类型必传
width设置标题占位图的宽度number | stringfalse

SkeletonParagraphProps Type

名称说明类型必传
rows设置段落占位图的行数number | stringfalse
width设置段落占位图的宽度,若为数组时则为对应的每行宽度,反之则是最后一行的宽度number | string | Array<number|string>false

创建骨架屏组件Skeleton.vue

<script setup lang="ts">
import { computed } from 'vue'

interface SkeletonButtonProps {
  shape?: 'default'|'round'|'circle' // 指定按钮的形状
  size?: 'default'|'small'|'large' // 设置按钮的大小
  block?: boolean // 将按钮宽度调整为其父宽度的选项
}
interface SkeletonAvatarProps {
  shape?: 'circle'|'square' // 指定头像的形状
  size?: number|'default'|'small'|'large' // 设置头像占位图的大小
}
interface SkeletonInputProps {
  size: 'default'|'small'|'large' // 设置输入框的大小
}
interface SkeletonTitleProps {
  width?: number|string // 设置标题占位图的宽度
}
interface SkeletonParagraphProps {
  rows?: number|string // 设置段落占位图的行数
  width?: number|string|Array<number|string>	// 设置段落占位图的宽度,若为数组时则为对应的每行宽度,反之则是最后一行的宽度
}
interface Props {
  animated?: boolean // 是否展示动画效果
  button?: boolean|SkeletonButtonProps // 是否使用按钮占位图
  avatar?: boolean|SkeletonAvatarProps // 是否显示头像占位图
  input?: boolean|SkeletonInputProps // 是否使用输入框占位图
  image?: boolean // 是否使用图像占位图
  title?: boolean|SkeletonTitleProps // 是否显示标题占位图
  paragraph?: boolean|SkeletonParagraphProps // 是否显示段落占位图
  loading?: boolean // 为 true 时,显示占位图,反之则直接展示子组件
}
const props = withDefaults(defineProps<Props>(), {
  animated: true,
  button: false,
  image: false,
  avatar: false,
  input: false,
  title: true,
  paragraph: true,
  loading: true
})
const buttonSize = computed(() => {
  if (typeof props.button === 'object') {
    if (props.button.size === 'large') {
      return 40
    }
    if (props.button.size === 'small') {
      return 24
    }
    return 32
  }
})
const titleTop = computed(() => {
  if (typeof props.avatar === 'boolean') {
    return 8
  } else {
    if (typeof props.avatar.size === 'number') {
      return (props.avatar.size - 16) / 2
    } else {
      const topMap = {
        default: 8,
        small: 4,
        large: 12
      }
      return topMap[props.avatar.size || 'default']
    }
  }
})
const titleWidth = computed(() => {
  if (typeof props.title === 'boolean') {
    return '38%'
  } else {
    if (typeof props.title.width === 'number') {
      return props.title.width + 'px'
    }
    return props.title.width || '38%'
  }
})
const paragraphRows = computed(() => {
  if (typeof props.paragraph === 'boolean') {
    return 3
  }
  return props.paragraph.rows
})
const paragraphWidth = computed(() => {
  if (typeof props.paragraph === 'boolean') {
    return Array(paragraphRows.value)
  } else {
    if (Array.isArray(props.paragraph.width)) {
      return props.paragraph.width.map((width: number|string) => {
        if (typeof width === 'number') {
          return width + 'px'
        } else {
          return width
        }
      })
    } else if (typeof props.paragraph.width === 'number') {
      return Array(paragraphRows.value).fill(props.paragraph.width + 'px')
    } else {
      return Array(paragraphRows.value).fill(props.paragraph.width)
    }
  }
})
</script>
<template>
  <div
    v-if="loading"
    :class="['m-skeleton', {'m-skeleton-avatar': avatar, 'm-skeleton-animated': animated}]"
    :style="`--button-size: ${buttonSize}px; --title-top: ${titleTop}px;`">
    <span
      v-if="button"
      :class="[
        'u-skeleton-button',
        {
          'u-button-round': typeof button !== 'boolean' && button.shape === 'round',
          'u-button-circle': typeof button !== 'boolean' && button.shape === 'circle',
          'u-button-sm': typeof button !== 'boolean' && button.size === 'small',
          'u-button-lg': typeof button !== 'boolean' && button.size === 'large',
          'u-button-block': typeof button !== 'boolean' && button.shape !== 'circle' && button.block,
        }
      ]"></span>
    <span
      :class="[
        'u-skeleton-input',
        {
          'u-input-sm': typeof input !== 'boolean' && input.size === 'small',
          'u-input-lg': typeof input !== 'boolean' && input.size === 'large',
        }
      ]" v-if="input"></span>
    <div class="m-skeleton-image" v-if="image">
      <svg viewBox="0 0 1098 1024" xmlns="http://www.w3.org/2000/svg" class="m-skeleton-image-svg">
        <path class="u-skeleton-image-path" d="M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z"></path>
      </svg>
    </div>
    <div class="m-skeleton-header" v-if="avatar">
      <span
        :class="[
          'u-skeleton-avatar',
          {
            'u-avatar-sm': typeof avatar !== 'boolean' && avatar.size === 'small',
            'u-avatar-lg': typeof avatar !== 'boolean' && avatar.size === 'large',
            'u-avatar-square': typeof avatar !== 'boolean' && avatar.shape === 'square',
          }
        ]"></span>
    </div>
    <template v-if="!button && !image && !input">
      <div class="m-skeleton-content">
        <h3 class="u-skeleton-title" :style="{ width: titleWidth }"></h3>
        <ul class="u-skeleton-paragraph">
          <li v-for="n in paragraphRows" :key="n" :style="`width: ${paragraphWidth[(n as number) - 1]};`"></li>
        </ul>
      </div>
    </template>
  </div>
  <slot v-else></slot>
</template>
<style lang="less" scoped>
.m-skeleton {
  display: table;
  width: 100%;
  .u-skeleton-button {
    display: inline-block;
    vertical-align: top;
    background: rgba(0, 0, 0, .06);
    border-radius: 4px;
    width: 64px;
    min-width: 64px;
    height: 32px;
    line-height: 32px;
  }
  .u-button-sm {
    width: 48px;
    min-width: 48px;
    height: 24px;
    line-height: 24px;
  }
  .u-button-lg {
    width: 80px;
    min-width: 80px;
    height: 40px;
    line-height: 40px;
  }
  .u-button-round {
    border-radius: var(--button-size);
  }
  .u-button-circle {
    width: var(--button-size);
    min-width: var(--button-size);
    border-radius: 50%;
  }
  .u-button-block {
    width: 100%;
  }
  .u-skeleton-input {
    display: inline-block;
    vertical-align: top;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    width: 160px;
    min-width: 160px;
    height: 32px;
    line-height: 32px;
  }
  .u-input-sm {
    width: 120px;
    min-width: 120px;
    height: 24px;
    line-height: 24px;
  }
  .u-input-lg {
    width: 200px;
    min-width: 200px;
    height: 40px;
    line-height: 40px;
  }
  .m-skeleton-image {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    background: rgba(0, 0, 0, .06);
    border-radius: 4px;
    width: 96px;
    height: 96px;
    line-height: 96px;
    .m-skeleton-image-svg {
      width: 48px;
      height: 48px;
      line-height: 48px;
      max-width: 192px;
      max-height: 192px;
      .u-skeleton-image-path {
        fill: #bfbfbf;
      }
    }
  }
  .m-skeleton-header {
    display: table-cell;
    padding-right: 16px;
    vertical-align: top;
    .u-skeleton-avatar {
      display: inline-block;
      vertical-align: top;
      background: rgba(0, 0, 0, .06);
      width: 32px;
      height: 32px;
      line-height: 32px;
      border-radius: 50%;
    }
    .u-avatar-sm {
      width: 24px;
      height: 24px;
      line-height: 24px;
    }
    .u-avatar-lg {
      width: 40px;
      height: 40px;
      line-height: 40px;
    }
    .u-avatar-square {
      border-radius: 6px;
    }
  }
  .m-skeleton-content {
    display: table-cell;
    width: 100%;
    vertical-align: top;
    .u-skeleton-title {
      margin: 0;
      height: 16px;
      background: rgba(0, 0, 0, .06);
      border-radius: 4px;
    }
    .u-skeleton-paragraph {
      margin-top: 24px;
      padding: 0;
      li {
        height: 16px;
        list-style: none;
        background: rgba(0, 0, 0, .06);
        border-radius: 4px;
        &:not(:first-child) {
          margin-top: 16px;
        }
        &:last-child {
          width: 61%;
        }
      }
    }
  }
}
.m-skeleton-avatar {
  .m-skeleton-content {
    .u-skeleton-title {
      margin-top: var(--title-top);
    }
    .u-skeleton-paragraph {
      margin-top: 28px;
    }
  }
}
.m-skeleton-animated {
  .u-skeleton-button,
  .u-skeleton-input,
  .m-skeleton-image,
  .m-skeleton-header .u-skeleton-avatar,
  .m-skeleton-content .u-skeleton-title,
  .m-skeleton-content .u-skeleton-paragraph li {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background: transparent;
    &::after {
      position: absolute;
      top: 0;
      left: -150%;
      bottom: 0;
      right: -150%;
      background: linear-gradient(90deg, rgba(0, 0, 0, .06) 25%, rgba(0, 0, 0, .15) 37%, rgba(0, 0, 0, .06) 63%);
      animation-name: skeleton-loading;
      animation-duration: 1.4s;
      animation-timing-function: ease;
      animation-iteration-count: infinite;
      content: "";
    }
    @keyframes skeleton-loading {
      0% {
        transform: translateX(-37.5%);
      }
      100% {
        transform: translateX(37.5%);
      }
    }
  }
}
</style>

在要使用的页面引入

<script setup lang="ts">
import Skeleton from './Skeleton.vue'
import { ref } from 'vue'

const loading = ref<boolean>(false)

const showSkeleton = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
const animated = ref(false)
const block = ref(false)
const size = ref('default')
const buttonShape = ref('default')
const avatarShape = ref('circle')
const sizeOptions = ref([
  {
    label: 'Default',
    value: 'default'
  },
  {
    label: 'Large',
    value: 'large'
  },
  {
    label: 'Small',
    value: 'small'
  }
])
const buttonShapeOptions = ref([
  {
    label: 'Default',
    value: 'default'
  },
  {
    label: 'Round',
    value: 'round'
  },
  {
    label: 'Circle',
    value: 'circle'
  }
])
const avatarShapeOptions = ref([
  {
    label: 'Square',
    value: 'square'
  },
  {
    label: 'Circle',
    value: 'circle'
  }
])
</script>
<template>
  <div>
    <h1>{{ $route.name }} {{ $route.meta.title }}</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <Skeleton />
    <h2 class="mt30 mb10">复杂的组合</h2>
    <Skeleton avatar :paragraph="{ rows: 4 }" />
    <h2 class="mt30 mb10">包含子组件</h2>
    <Button :loading="loading" @click="showSkeleton">Show Skeleton</Button>
    <br/>
    <br/>
    <Skeleton :loading="loading">
      <div>
        <h4>Vue Amazing UI, a design language</h4>
        <br/>
        <p>
          We supply a series of design principles, practical patterns and high quality design
          resources, to help people create their product prototypes beautifully and efficiently.
        </p>
      </div>
    </Skeleton>
    <h2 class="mt30 mb10">自定义标题和段落</h2>
    <Skeleton avatar :title="{ width: '24%' }" :paragraph="{ rows: 4, width: ['48%', '72%', '96%', '60%'] }" />
    <h2 class="mt30 mb10">按钮 / 输入框 / 图像 / 头像</h2>
    <Flex :gap="32">
      <Flex vertical :gap="12" width="50%">
        <Skeleton :animated="animated" :button="{ shape: buttonShape, size: size, block: block}" />
        <Skeleton style="width: 200px" :animated="animated" :input="{ size: size }" />
        <Skeleton :animated="animated" image />
        <Skeleton :avatar="{ shape: avatarShape, size: size }" :paragraph="{ rows: 2 }" />
      </Flex>
      <Flex vertical :gap="36" width="50%">
        <Space :gap="32">
          <Space align="center">
            animated: <Switch v-model:checked="animated" />
          </Space>
          <Space align="center">
            Button Block: <Switch v-model:checked="block" />
          </Space>
        </Space>
        <Space align="center">
          Size: <Radio :options="sizeOptions" v-model:value="size" button />
        </Space>
        <Space align="center">
          Button Shape: <Radio :options="buttonShapeOptions" v-model:value="buttonShape" button />
        </Space>
        <Space align="center">
          Avatar Shape: <Radio :options="avatarShapeOptions" v-model:value="avatarShape" button />
        </Space>
      </Flex>
    </Flex>
  </div>
</template>
  • 14
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,可以使用第三方库vue-skeleton-webpack-plugin来实现骨架。以下是一个简单的示例: 1. 安装vue-skeleton-webpack-plugin库: ```bash npm install vue-skeleton-webpack-plugin --save-dev ``` 2. 在vue.config.js中配置插件: ```js const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin'); module.exports = { configureWebpack: { plugins: [ new SkeletonWebpackPlugin({ webpackConfig: require('path/to/your/webpack.config'), quiet: true, minimize: true, router: { mode: 'hash', routes: [ { path: '/', skeletonId: 'skeleton-home' }, { path: '/about', skeletonId: 'skeleton-about' }, ] } }) ] } } ``` 这里配置了插件的相关选项,包括webpackConfig(指定webpack配置文件)、quiet(是否开启静默模式)、minimize(是否压缩骨架代码)和router(指定骨架对应的路由信息)等。 3. 在组件中使用骨架: ```vue <template> <div> <div v-if="$skeletonId === 'skeleton-home'"> <SkeletonHome /> </div> <div v-else> <!-- 实际内容 --> </div> </div> </template> <script> import SkeletonHome from '@/components/SkeletonHome.vue'; export default { components: { SkeletonHome } } </script> ``` 这里使用了$v-skeleton-id指令来判断当前组件是否需要显示骨架,如果需要,则渲染对应的骨架组件SkeletonHome。 在SkeletonHome组件中,可以自定义骨架的样式和内容,例如: ```vue <template> <div class="skeleton-home"> <div class="skeleton-header"></div> <div class="skeleton-content"> <div class="skeleton-item"></div> <div class="skeleton-item"></div> <div class="skeleton-item"></div> </div> </div> </template> <style scoped> .skeleton-home { background-color: #f2f2f2; border-radius: 5px; padding: 20px; } .skeleton-header { height: 50px; width: 100%; background-color: #ddd; border-radius: 5px; margin-bottom: 20px; } .skeleton-content { display: flex; flex-direction: column; } .skeleton-item { height: 20px; width: 100%; background-color: #ddd; border-radius: 5px; margin-bottom: 10px; } </style> ``` 这里的骨架和之前的示例很类似,只是把HTML和CSS放到了组件中。在实际使用中,可以根据不同的需求和布局进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值