vue自定义指令之v-loading（附源码，可CV）

最新推荐文章于 2025-03-26 01:54:48 发布

萤火之森-Thezero

最新推荐文章于 2025-03-26 01:54:48 发布

阅读量572

点赞数 2

分类专栏：前端文章标签： vue js

本文链接：https://blog.youkuaiyun.com/qq_42241862/article/details/115422804

版权

本文介绍如何在Vue中创建一个自定义指令v-loading，包括效果展示、指令结构解析，以及服务和指令两种不同的开启模式。配合提供的源码和TigerUi组件库，帮助开发者更好地理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com

组件API：TigerUi：http://tigerui.xkongkeji.com

效果图

结构

<template>
    <div :class="['ti-loading', 'ti-' + type]">
        <div class="loader-inner">
            <div class="loader-line-wrap">
                <div class="loader-line"></div>
            </div>
            <div class="loader-line-wrap">
                <div class="loader-line"></div>
            </div>
            <div class="loader-line-wrap">
                <div class="loader-line"></div>
            </div>
            <div class="loader-line-wrap">
                <div class="loader-line"></div>
            </div>
            <div class="loader-line-wrap">
                <div class="loader-line"></div>
            </div>
            <span v-if="text" class="loading-text">{
  { text }}</span>
        </div>
    </div>