SOURCE

/*

指令与样式对应关系

v-ib-->display:inline-block

v-tl-->transform-origin:0 0;
v-tc-->transform-origin:50% 0;
v-tr-->transform-origin:100% 0;
v-cl-->transform-origin:0 50%;
v-cc-->transform-origin:50% 50%;
v-cr-->transform-origin:100% 50%;
v-bl-->transform-origin:0 100%;
v-bc-->transform-origin:50% 100%;
v-br-->transform-origin:100% 100%;

指令对应的元素缩放基准点示意
tl--tc--tr
|   |   |
cl--cc--cr
|   |   |
bl--bc--br



 */
Vue.directive('ib', {
  bind: function(el, binding) { 
      el.style.display = 'inline-block';
  },
  update: function(el, binding) { 
      el.style.display = 'inline-block'; 
  }
});

Vue.directive('tl', {
  bind: function(el, binding) { 
      el.style.transformOrigin = '0 0';
  },
  update: function(el, binding) { 
      el.style.transformOrigin = '0 0'; 
  }
});

Vue.directive('tc', {
  bind: function(el, binding) { 
      el.style.transformOrigin = '50% 0';
  },
  update: function(el, binding) { 
      el.style.transformOrigin = '50% 0'; 
  }
});

Vue.directive('tr', {
  bind: function(el, binding) { 
      el.style.transformOrigin = '100% 0';
  },
  update: function(el, binding) { 
      el.style.transformOrigin = '100% 0'; 
  }
});

Vue.directive('cl', {
  bind: function(el, binding) { 
      el.style.transformOrigin = '0 50%';
  },
  update: function(el, binding) { 
      el.style.transformOrigin = '0 50%';
  }
});

Vue.directive('cc', {
  bind: function(el, binding) { 
      el.style.transformOrigin = '50% 50%';
  },
  update: function(el, binding) { 
      el.style.transformOrigin = '50% 50%';
  }
});

Vue.directive('cr', {
  bind: function(el, binding) { 
      el.style.transformOrigin = '100% 50%';
  },
  update: function(el, binding) { 
      el.style.transformOrigin = '100% 50%';
  }
});


Vue.directive('bl', {
  bind: function(el, binding) { 
      el.style.transformOrigin = '0 100%';
  },
  update: function(el, binding) { 
      el.style.transformOrigin = '0 100%';
  }
});

Vue.directive('bc', {
  bind: function(el, binding) { 
      el.style.transformOrigin = '50% 100%';
  },
  update: function(el, binding) { 
      el.style.transformOrigin = '50% 100%';
  }
});


Vue.directive('br', {
  bind: function(el, binding) { 
      el.style.transformOrigin = '100% 100%';
  },
  update: function(el, binding) { 
      el.style.transformOrigin = '100% 100%';
  }
});








// main.js 或单独的文件中
Vue.directive('custom-style', {
  bind: function(el, binding) {
    // binding.value 可以接收多种类型的参数
    applyCustomStyles(el, binding.value);
  },
  update: function(el, binding) {
    // 当指令的参数更新时调用
    applyCustomStyles(el, binding.value);
  }
});





function applyCustomStyles(el, styles) {
  
   

  // 清除之前可能存在的样式
  el.style = '';
  
  // 处理不同类型的参数
  if (typeof styles === 'string') {
    // 字符串形式，如 "color: red; font-size: 16px"
    el.style.cssText = styles;
  } else if (typeof styles === 'object') {
    // 对象形式，如 { color: 'red', fontSize: '16px' }
    Object.keys(styles).forEach(prop => {
      el.style[prop] = styles[prop];
    });
  }
}




new Vue({
        //template:`<div v-custom-style="'color: red; font-weight: bold;'">fdfdsfdsfs</div>`,
        el: document.getElementById('view_area'),
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            
        },
        mounted() { 
           
        }
    })

<div id="view_area" v-custom-style="'color: red; font-weight: bold;'" 
v-ib 
v-tl
>dsdsd</div>