更新记录

1.0.0（2024-11-18） 下载此版本

初始组件

平台兼容性

wsx-loading 全局设定 Js调用 自定义加载动画 loading页 Gif 全端通用

组件名：wsx-loading 关联组件：loading、wsx

wsx-loading，全局设定，Js调用，自定义加载动画，美观的loading组件，可定制loading组件，支持微信小程序，H5，app等多端组件。

自定义描述：

遮罩颜色：修改 .wsx-loading-mask class 中的 background-color 属性 自定义动画：1.当动画为图片时，修改.wsx-loading-animate 中background 属性图片 animation为旋转属性 2.当动画为Gif时，修改.wsx-loading-animate 中background 属性gif图 注掉animation旋转属性 .wsx-loading-animate 中 width height 修改图片宽高

使用方式：

在 script 中引用组件

<script>
export default {
    data() {
        return {}
    },
    onLoad() {
        this.open()
    },
    methods: {
        open() {
            this.$loading.show()
        },
        close() {
            this.$loading.hide()
        }
    }
}
</script>

在 loading.js 中

import LoadingComponent from '@/uni_modules/wsx-loading/wsx-loading.vue'
const loading = {
    install: function(Vue) {
        // 创建一个Vue的“子类”组件
        const LoadingConstructor = Vue.extend(LoadingComponent)

        // 创建一个该子类的实例,并挂载到一个元素上
        const instance = new LoadingConstructor()

        // 将这个实例挂载到动态创建的元素上,并将元素添加到全局结构中
        instance.$mount(document.createElement('div'))

        document.body(instance.$el)

        // 在Vue的原型链上注册方法，控制组件
        Vue.prototype.$loading = {
            show: () => {
                instance.show = true
            },
            hide: () => {
                instance.show = false
            },
        }
        // 用于window中可以直接使用
        window.$loading = Vue.prototype.$loading
    },
}
export default loading

在 main.js 中使用组件

import Loading from '@/uni_modules/wsx-loading/loading.js'
Vue.use(Loading)