element-ui switch开关组件二次封装,添加loading效果,点击时调用接口后改变状态

先看效果:

element-ui中的switch开关无loading属性(在element-plus时加入了),而且点击时开关状态就会切换,这使得在需要调用接口后再改变开关状态变得比较麻烦。

思路:switch开关外包一层div,给div添加click事件,emit给父组件,在父组件里进行开关状态的切换。

开关组件源码:

<template>
  <div class="custom-switch" @click="switchClick">
    <div style="width: fit-content;height: fit-content;" v-loading="loading">
      <el-switch style="position: relative;" v-bind="$attrs"></el-switch>
    </div>
  </div>
</template>

<script>
/**
 * el-switch开关组件二次封装
 * 
 * description:
 * 移除了el-switch的change事件
 * 添加了loading效果
 * 开关的value值交给父组件处理
 */
export default {
  name: 'CustomSwitch',
  props: {
    loading: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {
    switchClick() {
      // 如果禁用和loading状态,不emit给父组件
      if (this.$attrs.disabled || this.loading) {
        return
      }
      this.$emit('switch-click', this.$attrs.value)
    }
  }
}
</script>
<style lang="scss" scoped>
.custom-switch {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  ::v-deep .el-loading-mask {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    top: 2px;
    .el-loading-spinner {
      position: relative;
      width: 100%;
      height: 100%;
      top: unset;
      margin-top: unset;
      display: flex;
      align-items: center;
      justify-content: center;
      svg {
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>

父组件:

<template>
    <custom-switch
        v-model="switchValue"
        :loading="switchLoading"
        :active-value="1"
        :inactive-value="0"
        :disabled="switchDisabled"
        @switch-click="switchClick"
    />
</template>
<script>
import CustomSwitch from './custom-switch.vue'

export default {
    components: { CustomSwitch },
    data() {
        return {
            switchValue: 1,
            switchLoading: false,
            switchDisabled: false
        }
    },
    methods: {
        switchClick() {
            this.switchLoading = true
            // 这里就可以调用接口,接口成功后修改值和loading状态
            setTimeout(() => {
                this.switchValue = !this.switchValue ? 1 : 0
                this.switchLoading = false
            }, 2000)
        }
    }
}
</script>

文章来源地址:https://www.uudwc.com/A/EvRYD/

原文地址:https://blog.csdn.net/u011295864/article/details/132766860

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇2023年09月12日 03:31
数据分析4--相关分析
下一篇 2023年09月12日 03:33