Vue加载微调器更改为laravel vuejs中的条/点答案

【问题标题】：Vue loading spinner change to bars/dots in laravel vuejsVue加载微调器更改为laravel vuejs中的条/点
【发布时间】：2021-04-15 06:37:51
【问题描述】：

我一直在关注下面的参考，并且已经在我的项目中实现了这一点，但问题是我想将加载从 spinner 更改为 dots 或 bars。目前我有这个输出，它是默认的微调器。如果有人能弄清楚，那就太好了，在此先感谢您！

参考文档Vueloadingoverlay

根据文档，只需在<loading> 标签下添加:loader="bars"，但这对我不起作用，这是我的代码。

Import.blade.php:<Loading>标签区

<div class="vld-parent">
    <loading 
        :loader="bars"
        :active.sync="isLoading" 
        :can-cancel="false" 
        :is-full-page="fullPage">
    </loading>
    <div class="kt-portlet__body">
        <div class="alert alert-secondary" role="alert">
            Download example import format!. <strong><a href="">import.xlsx</a></strong>
        </div>
        <div class="row">            
            <div class="col-md-6 col-sm-12 col-xs-12">                
                <div class="form-group">
                    <label>{{ __('staff/forms.stocks_upload') }} </label>                
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="file" name="file" accept=""/>                
                        <label class="custom-file-label" for="file">Choose file</label>                
                    </div>
                    {!! $errors->first('file', '<div class="invalid-feedback">:message</div>') !!}
                </div> 
            </div>        
        </div>
    </div>
    <div class="kt-portlet__foot">
        <div class="kt-form__actions">        
            <button type="submit" class="btn btn-primary" @click="loadingEvent()" style="margin-top: 40px;">{{ __('staff/buttons.import') }}</button>
        </div>
    </div>
</div>

import.js

 module.exports = function(data) {
    var _data = {
        config: null, 
        isLoading: false,
        fullPage: true   
    };
    return {
        data: (() => Object.assign({}, JSON.parse(data), _data)),
        mounted() {
            this.init();
        },
        methods: {
            init() {
                var vm = this;
                $(document).ready(function() {
                    vm.$toaster.init();                   
                });
            },
            loadingEvent(){
                this.isLoading= true;        //thi will show the spinner loader
            },
            onCancel() {
                this.loading= false;
              }
        },
        
    }
};

我只是把组件分离出来，把import放到app.js

import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

Vue.component('loading', Loading);

【问题讨论】：

编译和硬重载可能是
@Kamlesh Paul 是的，我已经尝试了很多次，但没有成功

标签： php laravel vue.js

【解决方案1】：

以下内容已从组件的文档中截取。

确保将 'bars' 属性作为 string 传递。

Attribute	Type	Default	Description
loader	String	spinner	Name of icon shape you want use as loader, spinner or dots or bars

在您的代码中应该如下所示：

选项 1（注意排除的冒号和单引号）：

<loading 
    loader="bars"
    :active.sync="isLoading" 
    :can-cancel="false" 
    :is-full-page="fullPage">
</loading>

选项 2（使用动态道具 - 在您的情况下不是必需的）：

<loading 
    :loader="'bars'"
    :active.sync="isLoading" 
    :can-cancel="false" 
    :is-full-page="fullPage">
</loading>

查看更多关于动态道具的信息： https://vuejs.org/v2/guide/components-props.html#Passing-Static-or-Dynamic-Props

【讨论】：