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

我一直在遵循下面的参考，我已经在我的项目中实现了这一点，但问题是我想将加载从

微调器

更改为

点

或

条

。目前我有这个输出，它是默认微调器。如果有人能弄明白，那就太好了，提前多谢了

参考文献

根据文档，只需在

标记下添加

：loader=“bar”

，但这对我不起作用，这是我的代码

Import.blade.php:

标记区域

我只需分离组件并将导入放入

app.js

---

以下内容已从组件的文档中删除

确保您以字符串的形式传递“bars”道具

属性 类型 违约 描述 装载机 一串 纺纱机 要用作加载器、微调器或点或条的图标形状的名称

---

可能需要编译和硬重新加载be@Kamlesh保罗：是的，我已经试过很多次了，但都没用

<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>

 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 Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

Vue.component('loading', Loading);