更新记录

1.0.1（2021-03-11）

修复某些情况下，提交失败后按钮状态没重置的问题。

1.0.0（2021-02-04）

发布1.0.0版

平台兼容性

动效状态按钮(ls-state-button)

带有提交动画效果的按钮，支持 H5 vue app

说明

通常用于表单提交的提交按钮，它带有提交中以及提交成功的状态动画，既可以给用户一个友好的提交等待提示，又可以防止用户重复点击。

用法示例

<ls-state-button ref="button" @submit="handleSubmit" />

import lsStateButton from '@/components/ls-state-button/ls-state-button.vue';
export default {
    components: {
        lsStateButton
    },
    methods: {
        handleSubmit() {
            // 模拟接口请求
            setTimeout(() => {
                // 如果接口调用成功
                this.$refs.button.success(() => {
                    // 这里写提交成功后的代码逻辑
                    console.log('提交成功');
                });

                // 如果接口调用失败
                // this.$refs.button.fail('提交失败');
            }, 1600);
        }
    }
}

组件参数

组件方法

success方法参数说明

success方法接收一个回调方法，回调方法中执行你提交成功后的代码逻辑（写在这里的原因是可以保证按钮的成功动画可以充分执行完毕）。 例如如下场景：表单提交后页面跳转到列表页，

错误的使用方法： Bad !

handleSubmit() {
        // 模拟接口请求
        setTimeout(() => {
            this.$refs.button.success();
            // 成功后跳转页面
            // 执行效果： 提交成功动画没有执行完毕，页面就已经跳走了
            uni.navigateTo({
                url: 'list'
            })
        }, 1600);
    }

正确的使用方法：Good !

handleSubmit() {
        // 模拟接口请求
        setTimeout(() => {
            this.$refs.button.success(() => {
                // 成功后跳转页面
                // 执行效果：提交成功动画执行完毕，页面跳转
                uni.navigateTo({
                    url: 'list'
                })
            });
        }, 1600);
    }

鸣谢

组件示例项目中，按钮的4种颜色出自高颜值css组件库ColorUI，感谢ColorUI！

谢谢