vue中按钮悬停和选中和更新后自动恢复之前的状态

<template>
//原本的样式
//点击保存后的样式
<Button class="dict-hold" :class="{dict_hold_active:isActive}"  @click="saveDict">保存</Button>
</template>
<script>
     export default {
         data() {
           return{
                isActive:false
            }
        },
            methods: {
               saveDict() {
                  var thiz = this;
                  thiz.isActive=true;
                  console.log('保存', this.selectDict);
                if (!this.selectDict || this.selectDict.unid === '0') {
                    thiz.$Message.error('更新失败,请重试');
                    return false;
                }
                if (!this.selectDict.dictName) {
                    thiz.$Message.error('请输入字典名称');
                    return false;
                }
                if (this.selectDict.dictSortid == null) {
                    thiz.$Message.error('请输入排序号');
                    return false;
                }
                if (!this.currIsType && !this.selectDict.dictValue) {
                    thiz.$Message.error('请输入字典值');
                    return false;
                }
                this.$store.dispatch('axios_re', {
                    type: 'post',
                    url: '/address/updateDict',
                    data: {
                        unid: this.selectDict.unid,
                        dictName: this.selectDict.dictName,
                    },
                    success: function (res) {
                        thiz.$Message.success('更新成功');
                        thiz.selectDict.title = thiz.selectDict.dictName;
                        thiz.isActive=false;
                    },
                    fail: function (err) {
                        thiz.$Message.error('更新失败');
                        thiz.isActive=false;
                    }
                });
               }
            }
     }
</script>
<style lang="scss" scoped>
                .dict-hold {
                    margin-left: 35px;
                    width: 90px;
                    height: 32px;
                    background:rgba(57, 97, 244, 1);
                    &:hover{
                        background-color: #7295FF;
                    }
                }
                .dict_hold_active{
                    margin-left: 35px;
                    width: 90px;
                    height: 32px;
                    background-color: #7295FF;
                }
</style>
发布了143 篇原创文章 · 获赞 92 · 访问量 8866

猜你喜欢

转载自blog.csdn.net/weixin_42995083/article/details/103306544