vue中用directive来简化css样式

当一个页面样式几乎都一样时,只有margin-top,margin-left的值有区别时可以创建一个自定义指令来给dom节点添加margin

实际操作如下

//margin-top directive
Vue.directive('marginTop', {
  bind: function (el, data) {
    el.style.marginTop = data.value + 'px'
  }
})
Vue.directive('marginLeft', {
  bind: function (el, data) {
    el.style.marginLeft = data.value + 'px'
  }
})

在全局定义自定义指令

在页面中使用

<div class="compile_title" v-marginTop="24">操作成功</div>
    <div class="compile_lable" v-marginTop="8">预计两小时内到账</div>
    <div v-marginTop="50">
      <a-button type="primary">
        继续发布
      </a-button>
      <a-button v-marginLeft="6">返回</a-button>

可以看到样式已经添加进去了