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>
  import { ac as __θac } from './atomic-class.js';

  const __ac0Trigger = function (ev) {
    __θac({ "default": ["bg-gray"], "active": ["bg-blue"], "hover": ["bg-red"] }, function (vm, s) {
      vm.data.set('__θac0', s);
    })(this, ev);
  };

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

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

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