Как добавить готоую форму amoCrm в Vue3?

Question

[Daniil]

Есть готовая форма AmoCrm:

<script>
!(function (a, m, o, c, r, m) {
    (a[o + c] = a[o + c] || {
        setMeta: function (p) {
            this.params = (this.params || []).concat([p]);
        },
    }),
        (a[o + r] =
            a[o + r] ||
            function (f) {
                a[o + r].f = (a[o + r].f || []).concat([f]);
            }),
        a[o + r]({
            id: "....",
            hash: "....",
            locale: "ru",
        }),
        (a[o + m] =
            a[o + m] ||
            function (f, k) {
                a[o + m].f = (a[o + m].f || []).concat([[f, k]]);
            });
})(window, 0, "amo_forms_", "params", "load", "loaded");
</script>
<script
id="amoforms_script_..."
async="async"
charset="utf-8"
src="https://forms.amocrm.ru/forms/assets/js/amoforms.js?..."
></script>

Как её вставить в отдельный компонент, для дальнейшего использования?

Answer 1

[Aetae]

Я хз что такое AmoCrm, но если надо тупо добавить не-vue скрипы как vue-компонент, то как-то так:

import { ref, h } from 'vue';

function loadScript(options, root = document.head) {
  return root.appendChild(Object.assign(document.createElement('script'), options));
}

const Comp = defineComponent(() => {
  const root = ref(null);

  onMounted(() => {
    loadScript(
      {
        innerHTML: `
      !(function (a, m, o, c, r, m) {
    (a[o + c] = a[o + c] || {
        setMeta: function (p) {
            this.params = (this.params || []).concat([p]);
        },
    }),
        (a[o + r] =
            a[o + r] ||
            function (f) {
                a[o + r].f = (a[o + r].f || []).concat([f]);
            }),
        a[o + r]({
            id: "....",
            hash: "....",
            locale: "ru",
        }),
        (a[o + m] =
            a[o + m] ||
            function (f, k) {
                a[o + m].f = (a[o + m].f || []).concat([[f, k]]);
            });
})(window, 0, "amo_forms_", "params", "load", "loaded");
      `
      },
      root.value
    );
    loadScript(
      {
        id: 'amoforms_script_...',
        async: 'async',
        charset: 'utf-8',
        src: 'https://forms.amocrm.ru/forms/assets/js/amoforms.js?...'
      },
      root.value
    );
  });

  return () => h('div', { ref: root });
});

Comments

[Daniil]

Это всё записывать в файл .js ? И как его добавить, также как обычный компонент ?

[Aetae]

Daniil, Comp - обычный vue компонент. Куда хочешь туда и записывай. Можешь даже в .vue файл без template(только смысла в этом не особо).

Если что defineComponent(() => { ... }) - это сокращённая запись для

defineComponent({
  setup() { ... }
})

[Daniil]

Aetae, Именно это меня и смутило. Подключил всё работает. Спасибо.