RotateSquare2 background property not working

[arthabus]

Can't change color of RotateSquare2. Source code exposes prop "background" but it seem to be ignored.

[nguyenvanduocit]

I think it's better to copy the code and paste to your project. Sorry about that.

[rbayley]

Hi @nguyenvanduocit

You can, using CSS variables (more precisely called CSS custom properties).

export default {
  props: {
    size: {
      default: '40px'
    },
    background: {
      default: '#41b883'
    }
  },
  computed: {
    styles () {
      return {
        width: this.size,
        height: this.size,
        '--my-var-color':  this.background
      }
    }
  }
}

Then on your style tag you simply reference you the --var you have set with your computed property. (for simplicity sake I am only pasting code relevant to the answer). and voilà!! :)

<style lang="scss" scoped>

    &:after {
      background: var(--my-var-color);
    }
  }
</style>

I hope this helps you keep this great component active again!

regards

[zhanghaifei1997]

Is there any development document? I want to use it in my own project, but I find it doesn't work. I want to add this loading effect when the pop-up window appears.

[zhanghaifei1997]

Is there any development document? I want to use it in my own project, but I find it doesn't work. I want to add this loading effect when the pop-up window appears.