vue 远程js 组件加载_Vue.js组件用于全屏加载指示器

vue 远程js 组件加载

Vue加载叠加组件 (Vue Loading Overlay Component)

Vue.js component for full screen loading indicator

Vue.js组件用于全屏加载指示器

:point_right: Version 2 documentation is available on v2.x branch.

：point_right： v2.x分支上提供了版本2文档。

演示或JSFiddle (Demo or JSFiddle)

安装 (Installation)

# Yarn
yarn add vue-loading-overlay

# npm
npm install vue-loading-overlay

用法 (Usage)

作为组件 (As component)

<template>
    <div class="vld-parent">
        <loading :active.sync="isLoading" 
        :can-cancel="true" 
        :on-cancel="onCancel"
        :is-full-page="fullPage"></loading>
        
        <label><input type="checkbox" v-model="fullPage">Full page?</label>
        <button @click.prevent="doAjax">fetch Data</button>
    </div>
</template>

<script>
    // Import component
    import Loading from 'vue-loading-overlay';
    // Import stylesheet
    import 'vue-loading-overlay/dist/vue-loading.css';
    
    export default {
        data() {
            return {
                isLoading: false,
                fullPage: true
            }
        },
        components: {
            Loading
        },
        methods: {
            doAjax() {
                this.isLoading = true;
                // simulate AJAX
                setTimeout(() => {
                  this.isLoading = false
                },5000)
            },
            onCancel() {
              console.log('User cancelled the loader.')
            }
        }
    }
</script>

作为插件 (As plugin)

<template>
    <form @submit.prevent="submit" class="vld-parent" ref="formContainer">
        <!-- your form inputs goes here-->
        <label><input type="checkbox" v-model="fullPage">Full page?</label>
        <button type="submit">Login</button>
    </form>
</template>

<script>
    import Vue from 'vue';
    // Import component
    import Loading from 'vue-loading-overlay';
    // Import stylesheet
    import 'vue-loading-overlay/dist/vue-loading.css';
    // Init plugin
    Vue.use(Loading);

    export default {
        data() {
            return {
                fullPage: false
            }
        },
        methods: {
            submit() {
                let loader = this.$loading.show({
                  // Optional parameters
                  container: this.fullPage ? null : this.$refs.formContainer,
                  canCancel: true,
                  onCancel: this.onCancel,
                });
                // simulate AJAX
                setTimeout(() => {
                  loader.hide()
                },5000)                 
            },
            onCancel() {
              console.log('User cancelled the loader.')
            }                      
        }
    }
</script>

可用道具 (Available props)

The component accepts these props:

该组件接受以下道具：

Attribute	Type	Default	Description
active	Boolean	false	Show loading by default when true, use the .sync modifier to make it two-way binding
can-cancel	Boolean	false	Allow user to cancel by pressing ESC or clicking outside
on-cancel	Function	()=>{}	Do something upon cancel, works in conjunction with can-cancel
is-full-page	Boolean	true	When false; limit loader to its container^
transition	String	fade	Transition name
color	String	#000	Customize the color of loading icon
height	Number	*	Customize the height of loading icon
width	Number	*	Customize the width of loading icon
loader	String	spinner	Name of icon shape you want use as loader, spinner or dots or bars
background-color	String	#fff	Customize the overlay background color
opacity	Number	0.5	Customize the overlay background opacity
z-index	Number	999	Customize the overlay z-index

属性	类型	默认	描述
活性	布尔型	false	默认为true时显示加载，使用.sync修饰符进行双向绑定
取消	布尔型	false	允许用户通过按ESC或单击外部来取消
取消	功能	()=>{}	在做一些抵消，协同工作与can-cancel
全页	布尔型	true	当false ; 将装载机限制在其容器中^
过渡	串	fade	过渡名称
颜色	串	#000	自定义加载图标的颜色
高度	数	*	自定义加载图标的高度
宽度	数	*	自定义加载图标的宽度
装载机	串	spinner	要用作加载程序， spinner或dots或bars的图标形状的名称
背景颜色	串	#fff	自定义叠加背景色
不透明	数	0.5	自定义覆盖背景的不透明度
索引	数	999	自定义叠加层的z-index

• ^When is-full-page is set to false, the container element should be positioned as position: relative.

  ^当is-full-page设置为false ，容器元素应定位为position: relative 。

  
  You can use CSS helper class
  您可以使用CSS助手类

  vld-parent.

  vld-parent 。

• *The default height and width values may be vary based on the loader prop value

  *默认的height和width值可能会因loader道具值而异

可用插槽 (Available slots)

The component accepts these slots:

该组件接受以下插槽：

• default : Replace the animated icon with yours

  default ：用您的图标替换动画图标

• before : Place anything before animated icon, you may need to style this.

  before ：在动画图标before放置任何内容，可能需要设置样式。

• after : Place anything after animated icon, you may need to style this.

  after ：在动画图标after放置任何内容，可能需要设置样式。

API方法 (API methods)

Vue.$loading.show(?propsData,?slots) (Vue.$loading.show(?propsData,?slots))

let loader = Vue.$loading.show({
  // Pass props by their camelCased names
  container: this.$refs.loadingContainer,
  canCancel: true, // default false
  onCancel: this.yourMethodName,
  color: '#000000',
  loader: 'spinner',
  width: 64,
  height: 64,
  backgroundColor: '#ffffff',
  opacity: 0.5,
  zIndex: 999,
},{
  // Pass slots by their names
  default: this.$createElement('your-custom-loader-component-name'),
});
// hide loader whenever you want
loader.hide();

全局配置 (Global configs)

You can set props and slots for all future instances when using as plugin

用作插件时，您可以为所有将来的实例设置道具和插槽

Vue.use(Loading, {
  // props
  color: 'red'
},{
  // slots
})

Further you can override any prop or slot when creating new instances

此外，在创建新实例时，您可以覆盖任何道具或插槽

let loader = Vue.$loading.show({
 color: 'blue'
},{
  // slots
});

在非模块环境中安装(没有webpack) (Install in non-module environments (without webpack))

<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-loading.css" rel="stylesheet">
<!-- Init the plugin and component-->
<script>
Vue.use(VueLoading);
Vue.component('loading', VueLoading)
</script>

浏览器支持 (Browser support)

• Modern browsers only

  仅现代浏览器

在本地主机上运行示例 (Run examples on your localhost)

• Clone this repo

  克隆此仓库

• Make sure you have node-js >=8.9 and yarn >=1.x pre-installed

  确保您已预安装node-js >=8.9和yarn >=1.x

• Install dependencies - yarn install

  安装依赖项yarn install

• Run webpack dev server - yarn start

  运行Webpack开发服务器-yarn yarn start

• This should open the demo page at http://localhost:9000 in your default web browser

  这应该在默认的Web浏览器中打开位于http://localhost:9000的演示页面。

测试中 (Testing)

• This package is using Jest and vue-test-utils for testing.

  该软件包使用Jest和vue-test-utils进行测试。

• Tests can be found in __test__ folder.

  可以在__test__文件夹中找到测试。

• Execute tests with this command yarn test

  使用此命令执行yarn test

翻译自: https://vuejsexamples.com/vue-js-component-for-full-screen-loading-indicator/

vue 远程js 组件加载