ndelvalle / v-blur Goto Github PK

I'd suggest adding some way to specify duration and easing as "options", maybe you can accept "options" object in v-blur something like v-blur="{durationg: 0.5, easing: 'ease-in-out', blurred: true}"?

Using the following syntax, as stated in README, doesn't override defaults:

Vue.use(vBlur, {
  opacity: 0.8,
  filter: 'blur(6px)',
  transition: 'all .3s linear',
})

I can get this to work just fine if I only use isBlurred

but if I used the blurConfig, I can't seem to activate it

<img id="logo" v-blur="blurConfig" />

      blurConfig: {
        isBlurred: false,
        opacity: 0,
        filter: 'blur(1.2px)',
        transition: 'all .3s linear',
      },

Then if I call this.blurConfig.isBlurred = true;

Nothing happens

but if I use

<img id="logo" v-blur="isBlurred" />

then when I do this.isBlurred = true

Then the blur is activated

Also another problem I noticed is, attaching isBlurred to an element automatically applies an opacity to it.. even if isBlurred is currently set to false. This causes conflicts in my application since I want to attach isBlurred on items which are initially hidden by having their opacity set to 0

Is there a way to attach the v-blur directive dynamically to get around this?

Something like this would be very useful:

Vue.use(vBlur, {
  isBlurred: true,
  opacity: 1,
  filter: "blur(5px)",
  transition: "all .3s linear"
});

Is there a way to prevent interaction with elements which are under the blur zone ?

I did not make the codeship migration so the CI is not working at the momet