iview 如何在非组件js文件中使用组件,例如Spin

iview 如何在非组件j文件中使用组件,例如Spin

---

例子:
先看一下在main.js中,路由钩子中使用Spin

Iview 官方文档给的是:使用内置的 $Spin 方法可以全局加载。 在组件中可以使用 : this.$Spin.show()方法来触发组件
mian.js是入口文件,router是第三方的组件不属于ivew对象中

解决办法:

1. 查看iView对象

import iView from 'iview';
console.log(iView)

可知iView是对象,包含所有的组件
所以,我们可以查看Spin对象

console.log(iView.Spin)

看到了吧,有show函数
调用show方法

iView.Spin.show({
        render: (h) => {
            return h('div', [
                h('Icon', {
                    'class': 'demo-spin-icon-load',
                    props: {
                        type: 'load-c',
                        size: 30
                    }
                }),
                h('div', 'Loading')
            ])
        }
    });

就可以成功使用了

当然也可以直接使用Spin对象

import iView ,{Spin}from 'iview';
console.log(Spin)
console.log(iView.Spin)

其它的组件,如Message大家可以试一下