San

编译前:

<template>
  <button
    class="bg-orange {{ $style.base }}"
    on-click="btnClickHandler"
    on-mouseenter="btnEnterHandler"
    on-mouseleave="btnLeaveHandler"
    ac-default="bg-gray"
    ac-active="bg-blue"
    ac-hover="bg-red"
  >Button</button>
</template>

<script>
  import { stateHandler } from "./atomic-class.js";

  export default {
    btnClickHandler: stateHandler("active"),
    btnEnterHandler: stateHandler("hover"),
    btnLeaveHandler: stateHandler("default"),

    initData() {
      return {
        $style: {
          base: "base"
        }
      }
    },
  };
</script>

编译后:

<template>
  <button
    on-actrigger="__ac0Trigger" class="bg-orange {{ $style.base }} {{ __θac0 }}"
    on-click="btnClickHandler"
    on-mouseenter="btnEnterHandler"
    on-mouseleave="btnLeaveHandler"
    
    
    
  >Button</button>
</template>

<script>
const __θac0Registry={"default":"bg-gray","active":"bg-blue","hover":"bg-red"};
  import { stateHandler } from "./atomic-class.js";

  export default {

        __ac0Trigger({ detail }) {
          const { states } = detail;
          this.data.set('__θac0', states.map(i => __θac0Registry[i]).join(' '));
        },
          btnClickHandler: stateHandler("active"),
    btnEnterHandler: stateHandler("hover"),
    btnLeaveHandler: stateHandler("default"),

    initData() {
      return Object.assign({
        $style: {
          base: "base"
        }
      }, { __θac0: '' });
    },
  };
</script>