vue3 自定义指令修改dom样式 执行了 但一开始样式没有生效

可能是因为你在自定义指令中修改了 DOM 样式，但是没有触发 DOM 的重新渲染。可以尝试在自定义指令中手动调用 `el.offsetWidth` 或 `el.getBoundingClientRect()` 等方法来强制触发 DOM 重新渲染，例如：

Vue.directive('my-directive', {
  bind: function(el, binding) {
    // 修改 DOM 样式
    el.style.color = binding.value;

    // 强制触发 DOM 重新渲染
    el.offsetWidth;
  }
});

或者你也可以使用 Vue 提供的 `Vue.nextTick` 方法，在下一个 DOM 更新周期中再进行样式修改，例如：

Vue.directive('my-directive', {
  bind: function(el, binding) {
    Vue.nextTick(function() {
      // 修改 DOM 样式
      el.style.color = binding.value;
    });
  }
});

相关问题

vue3+ts 自定义指令修改dom样式 执行了 但初始化页面样式没有生效

在 Vue3 中，自定义指令的钩子函数与 Vue2 有所不同，其中 `bind` 钩子已经被废弃，取而代之的是 `beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeUnmount`、`unmounted` 等钩子函数，它们的执行时机也有所不同。

如果你在 `mounted` 钩子中修改 DOM 样式，那么样式修改会在组件挂载到页面后才生效。如果你希望样式修改能够在页面初始化时就生效，可以考虑在 `beforeMount` 钩子中执行修改操作。例如：

import { DirectiveBinding } from 'vue';

// 定义自定义指令
const myDirective = {
  beforeMount(el: HTMLElement, binding: DirectiveBinding) {
    // 修改 DOM 样式
    el.style.color = binding.value;
  }
};

// 在组件中使用自定义指令
<template>
  <div v-my-directive="color">Hello World</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      color: 'red'
    };
  },
  directives: {
    myDirective
  }
});
</script>

注意，在使用 TypeScript 时需要引入 `DirectiveBinding` 类型，并在自定义指令的参数中使用该类型，否则会报错。另外，如果你在自定义指令中使用了异步操作，例如发送网络请求等，建议在 `mounted` 钩子中执行，以确保 DOM 已经渲染完毕。

vue3 自定义指令beforeMount修改dom的padding 执行了 但padding一开始没有修改，第二次进入才修改

可能是因为在 `beforeMount` 钩子函数中修改 DOM 样式时，可能会因为 Vue 的异步更新机制导致样式不立即生效。这是因为在 `beforeMount` 钩子函数中，DOM 元素已经被创建，但是还没有被渲染到页面上，此时修改样式可能不会立即生效。

一种解决方法是在 `mounted` 钩子函数中修改样式，因为此时 DOM 已经被渲染到页面上，样式修改会立即生效。另一种方法是使用 `this.$nextTick()` 方法，将样式修改操作放到下一个 DOM 更新周期中执行，确保 DOM 已经被渲染。例如：

import { DirectiveBinding } from 'vue';

// 定义自定义指令
const myDirective = {
  beforeMount(el: HTMLElement, binding: DirectiveBinding) {
    // 在下一个 DOM 更新周期中执行样式修改操作
    this.$nextTick(() => {
      el.style.padding = binding.value;
    });
  }
};

// 在组件中使用自定义指令
<template>
  <div v-my-directive="padding">Hello World</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      padding: '10px'
    };
  },
  directives: {
    myDirective
  }
});
</script>

在这个例子中，我们使用 `this.$nextTick()` 方法将样式修改操作放到下一个 DOM 更新周期中执行，确保 DOM 已经被渲染。