0

我正在使用名为“ui-hello-vue”的存储库中的 adobe 官方 vue 插件示例。

它开箱即用，但我发现很难将 vue 代码放入面板中。

奇怪的是，它甚至似乎不再让我做 console.log 了。

即使只是在启动应用程序时直接登录到控制台也行不通。

当我单击面板显示它时，只有一个空白面板。

有任何想法吗？

main.js

// main.js

console.log('FROM HERE');

const styles = require("./styles.css");
const Vue = require("vue").default;
const hello = require("./hello.vue").default

const { Text, Color } = require("scenegraph");

let dialog;
function getDialog() {
    if (dialog == null) {
        document.body.innerHTML = `<dialog><div id="container"></div></dialog>`
        dialog = document.querySelector("dialog");
        var app4 = new Vue({
            el: "#container",
            components: { hello },
            render(h) {
                return h(hello, { props: { dialog } })
            }
        })
    }
    return dialog
}

let panel;

function create() {
  // [1]
  const html = `
<style>
    .break {
        flex-wrap: wrap;
    }
    label.row > span {
        color: #8E8E8E;
        width: 20px;
        text-align: right;
        font-size: 9px;
    }
    label.row input {
        flex: 1 1 auto;
    }
    form {
        width:90%;
        margin: -20px;
        padding: 0px;
    }
    .show {
        display: block;
    }
    .hide {
        display: none;
    }
</style>

<form method="dialog" id="main">
    <div class="row break">
        <label class="row">
            <span>↕︎</span>
            <input type="number" uxp-quiet="true" id="txtV" value="10" placeholder="Height" />
        </label>
        <label class="row">
            <span>↔︎</span>
            <input type="number" uxp-quiet="true" id="txtH" value="10" placeholder="Width" />
        </label>
    </div>
    <footer><button id="ok" type="submit" uxp-variant="cta">Apply</button></footer>
</form>

<p id="warning">This plugin requires you to select a rectangle in the document. Please select a rectangle.</p>
`;

  function increaseRectangleSize() { // [2]
    const { editDocument } = require("application"); // [3]
    const height = Number(document.querySelector("#txtV").value); // [4]
    const width = Number(document.querySelector("#txtH").value); // [5]

    // [6]
    editDocument({ editLabel: "Increase rectangle size" }, function(selection) {
      const selectedRectangle = selection.items[0]; // [7]
      selectedRectangle.width += width; // [8]
      selectedRectangle.height += height;
    });
  }

  panel = document.createElement("div"); // [9]
  panel.innerHTML = html; // [10]
  panel.querySelector("form").addEventListener("submit", increaseRectangleSize); // [11]

  return panel; // [12]
}

function show(event) { // [1]
  if (!panel) event.node.appendChild(create()); // [2]
}

function update(selection) { // [1]
  const { Rectangle } = require("scenegraph"); // [2]

  const form = document.querySelector("form"); // [3]
  const warning = document.querySelector("#warning"); // [4]

  if (!selection || !(selection.items[0] instanceof Rectangle)) { // [5]
    form.className = "hide";
    warning.className = "show";
  } else {
    form.className = "show";
    warning.className = "hide";
  }
}

module.exports = {
    commands: {
        menuCommand: function () {
            getDialog().showModal();
        }
    },
    
    panels: 
    {
        enlargeRectangle: {
            show,
            update
        }
    }
};

mainfest.json

 // mainfest.json

{
    "id": "UI_HELLO_VUE",
    "name": "(UI) Hello Vue",
    "version": "1.0.0",
    "host": {
        "app": "XD",
        "minVersion": "13.0"
    },
    "icons": [
        {
            "width": 24,
            "height": 24,
            "path": "images/icon@1x.png"
        },
        {
            "width": 48,
            "height": 48,
            "path": "images/icon@2x.png"
        }
    ],
    "uiEntryPoints": [
        {
            "type": "menu",
            "label": "UI Hello Vue",
            "commandId": "menuCommand"
        },
        {
            "type": "panel",
            "label": "Enlarge a Rectangle",
            "panelId": "enlargeRectangle"
        }
    ]
}
4

1 回答 1

0

您在 7、14、20 和 24 上缺少分号。这可以解释没有错误。

于 2021-02-08T21:21:13.037 回答