扩展 Inspector

    下面让我们进行一次简单的扩展，步骤如下：

    • 在 Component 中注明自定义 Inspector 的扩展文件
    • 创建自定义 Inspector 的扩展包
    • 在扩展包中编写自定义 Inspector 的扩展文件

    首先我们需要定义一份 Component 脚本，并且为这个脚本注明使用自定义 Inspector，方法如下：

    注意1: 这里我们定义了一个 字段，并在该字段中定义了 inspector 文件。编辑器会自动根据 inspector.js 文件内定义的 Vue 模板在 inspector 面板中生成对应框架。

    注意2: 在 inspector 中我们采用 packages:// 协议定义文件路径。Cocos Creator 会将 packages:// 协议后面的分路径名当做扩展包名字进行搜索，并根据搜索结果将整个协议替换成扩展包的路径并做后续搜索。

    注意，在创建完扩展包后，你需要重启一下 Cocos Creator 以便让他正确读入该扩展包。

    接下来我们就可以在 foobar 包中定义 inspector.js：

    1. Vue.component('foobar-inspector', {
    2.   // 修改组件在 inspector 的显示样式
    3.   template: `
    4.     <ui-prop v-prop="target.foo"></ui-prop>
    5.     <ui-prop v-prop="target.bar"></ui-prop>
    8.   props: {
    9.       twoWay: true,
    10.       type: Object,
    11.     },
    12.   },
    13. });

    Cocos Creator 的 Inspector 扩展使用了 Vue。这里我们通过定义一份 Vue 的组件，并在组件中定义 props，使得其包含 target 数据来完成整个 Inspector 的数据定义。

    该 target 就是我们的 Foobar Class 在 Inspector 中对应的实例。

    上一小节中提到的 target 实例是经过 Inspector 处理过的 target。其内部包含了对属性的加工处理。在使用的时候，我们不能简单的认为 target.foo 就代表 foo 的值。如果你去查看 target.foo 你会发现他是一个 Object 而不是我们在最开始定义的那样一个 'Foo' 的字符串。该份 Object 中包含了 attrs，，value 等信息。其中的 value 才是我们真正的值。

    这个时候在 Inspector 中的 target 里反应出的信息为 target.foo.value 为 'Foo'，target.foo.attrs.readonly 为 true。这些信息有助于帮助你创建多变的界面组合。

    由于这些信息非常繁琐，Cocos Creator 也对 Vue 的 directive 做了一定的扩展。目前我们扩展了 v-prop，v-value，v-readonly 和 v-disable。

    当你还是想利用 Cocos Creator 的默认方案显示数据段时，你可以使用 v-prop 配合 <ui-prop> 控件做绑定，如：

    1. <ui-prop v-prop="target.foo"></ui-prop>

    当你想使用 <ui-xxx> 的原生控件时，你可以使用 v-value 来做数据绑定，如：

    当你想对控件应用 readonly 或者 disable 行为时，请使用 v-readonly 和 v-disable。如：

    2. <ui-button v-disable="target.bar.value">Bar</ui-button>