自定义标准页面组件操作步骤

{
  "name": "imgButton",
  "private": true,
  "version": "1.0.2",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "node ./build/build.mjs",
    "format": "prettier --write src/",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.4.2",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.6.2",
    "jszip": "^3.10.1",
    "kolorist": "^1.8.0",
    "sass": "^1.69.5",
    "unplugin-element-plus": "^0.8.0",
    "unplugin-vue-components": "^0.25.1",
    "vite": "^4.4.5",
    "vue-style-loader": "^4.1.3"
  }
}

{
  "name": "imgButton",
  "version": "1.0.10",
  "type": "uiPackage",
  "package": {
    "components": [
      "components/imgButton/imgButton.json"
    ]
  },
  "images": {
    "default": "./static/package-default.png",
    "previews": [
      "./static/package-preview1.png",
      "./static/package-preview2.png"
    ]
  },
  "publisher": "l84182839",
  "license": "MIT",
  "keywords": [
    "UI Component"
  ],
  "categories": [
    "ui:components"
  ],
  "bugs:url": "",
  "repository:url": "",
  "dependencies": []
}

替换“src\components\imgButton\static”路径下的“default.png”和“hover.png”图标，“default.png”为默认状态的图标，“hover.png”为鼠标经过时高亮效果的图标。

• 修改组件定义文件的基本属性。

  将“imgButton.json”文件中的“name”、“title”和“description”修改成“imgButton”，并将“properties”节点改为只包括“height”、“width”和“text”属性，具体代码如下：

  {
    "name": "imgButton",
    "title": "imgButton",
    "description": "imgButton",
    "category": "add-on",
    "icon": {
      "default": "./static/default.png",
      "hover": "./static/hover.png"
    },
    "definition": {
       "props": {
        "type": "object",
        "properties": {
          "height": {
            "category": "common", //属性所属的标签，包括common（公共）、general（基础）和style（style）样式等
            "type": "integer", //该属性的数值类型，integer（数字输入框）、date（时间选择框）、string（输入框）、select（下拉框）和switch（开关）
            "title": "图片高度",//属性的标题
            "description": "设置图片高度", //属性的描述，悬浮在标题上显示
            "default":16 //属性的默认值
          },
          "width": {
            "category": "common",
            "type": "integer",
            "title": "图片宽度",
            "description": "设置图片宽度",
            "default":16
          },
          "text": {
            "category": "common",
            "type": "string",
            "title": "framework.label.text",
            "description": "按钮文本",
            "default":"Button"
          }
        }
      },
    "main": "./index.js",
    "mainDesignTime": "./design-time/index.js",
    "dnd": {
      "cname": "workCards",
      "dname": "workCards-design",
      "ctype": "Control",
      "displayName": "workCards",
      "selectable": true,
      "targetable": true,
      "draggable": true,
      "deletable": true,
      "wholeRow": true
    }
  }

  修改上述配置后，在华为云Astro轻应用标准页面中，显示的组件属性配置如图7所示。

  图7 组件属性显示效果
  

• 修改组件定义文件的事件，将事件名修改为“click”。

  "on": {
        "type": "object",
        "properties": {
          "click": { // 代码中触发的事件名，在组件中用emit触发
            "title": "点击", //事件名称
            "description": "点击时执行的动作", //事件描述
            "type": "object"
          }
        }
      },

• 修改组件定义文件的拖拽行为，将“cname”、“displayName”和“dname”修改成“imgButton”和“imgButtonDesign”。

  "dnd": {
      "cname": "imgButton",
      "dname": "imgButtonDesign",
      "ctype": "Control",
      "displayName": "imgButton",
      "selectable": true,
      "targetable": true,
      "draggable": true,
      "deletable": true,
      "wholeRow": true
    }

  其中，“cname”为组件在应用引擎中显示的名称，“dname”为组件在应用开发工具中显示的名称，“displayName”为组件在页面构建器中显示的文本。

执行上述操作后，完整的“imgButton.json”文件配置示例如下：

{
  "name": "imgButton",
  "title": "imgButton",
  "description": "imgButton",
  "category": "add-on",
  "icon": {
    "default": "./static/default.png",
    "hover": "./static/hover.png"
  },
  "definition": {
     "props": {
      "type": "object",
      "properties": {
        "height": {
          "category": "common",
          "type": "integer",
          "title": "图片高度",
          "description": "设置图片高度",
          "default":16
        },
        "width": {
          "category": "common",
          "type": "integer",
          "title": "图片宽度",
          "description": "设置图片宽度",
          "default":16
        },
        "text": {
          "category": "common",
          "type": "string",
          "title": "framework.label.text",
          "description": "按钮文本",
          "default":"Button"
        }
      }
    },
    "on": {
      "type": "object",
      "properties": {
        "click": {
          "title": "点击",
          "description": "点击时执行的动作",
          "type": "object"
        }
      }
    },
    "methods": {
    }
  },
  "main": "./index.js",
  "mainDesignTime": "./design-time/index.js",
  "dnd": {
    "cname": "imgButton",
    "dname": "imgButton",
    "ctype": "Control",
    "displayName": "imgButton",
    "selectable": true,
    "targetable": true,
    "draggable": true,
    "deletable": true,
    "wholeRow": true
  }
}

• 修改视图文件的布局结构。

  在布局（div标记对）中添加一个“img”和一个“span”，并按示例配置，代码示例如下：

  <img
    src="./static/hover.png"
    :height="comHeight"
    :width="comWidth"
    :class="classes + '-img'">
  <span :class="classes+ '-title'">
    {{ currentText }}
  </span>

  其中，“img”为imgButton按钮中的图片，“span”为imgButton按钮中的文本。

• 修改视图文件“imgButton.vue”的属性定义，修改“cssprefix”为“imgButton”，并添加“height”、“width”和“text”属性。

  <script>
  const cssprefix = "imgButton";
  
  import { defineComponent } from "vue";
  
  export default defineComponent({
    name: "imgButton",
    data() {
      return {
        currentText: this.text,
      };
    },
    props: {
      /*图片高度 */
      height: {
        type: [String, Number],
        default: "",
      },
      /*图片宽度 */
      width: {
        type: [String, Number],
        default: "",
      },
      /*标签文本内容 */
      text: {
        type: String,
        default: "Button1",
      },
    },

• 修改视图文件“imgButton.vue”中的“computed”、“watch”和“methods”。

    computed: {
      classes() {
        return cssprefix;
      },
      comHeight() {
        return this.height || "16";
      },
      comWidth() {
        return this.width || "16";
      },
    },
    watch: {
      text(newVal) {
        this.currentText = newVal;
      },
    },
    methods: {
      onclick(e) {
        this.$emit("click", e);
      },
      setButtonText(newText) {
        console.log("setButtonText params:", newText);
        if (newText) {
          this.currentText = newText;
        }
      },
    },

  表5 “computed”、“watch”和“methods”参数说明

  参数	说明
  cssprefix	此变量用于构造样式类名，增加灵活性。
  currentText	用于显示按钮文本。
  comHeight	用于获取图片的高度。
  comWidth	用于获取图片的宽度。
  classes	用于返回样式类名，也可以直接用字符串替换，这样写只是为了增加灵活性。
  onclick	在图片按钮被单击时，去触发其单击事件的业务逻辑。
  setButtonText	对外显露的方法，用于修改按钮中的文本。所有定义在method中的方法，都可在事件中直接调用，调用的方式如图8所示。

  图8 在事件中调用method中的方法
  
• 修改视图文件“imgButton.vue”中的“style”，定义图片按钮的样式类，包括图片按钮外框、图片和文本三个样式类。

  .imgButton {
    display: inline-block;
    background-color: #8cdcdb;
    border: blue1pxsolid;
    cursor: pointer;
  }
  .imgButton-img {
    margin-top: 5px;
    margin-left: 5px;
  }
  .imgButton-title {
    padding-bottom: 10px;
    padding-right: 10px;
    font-size: 16px;
    cursor: pointer;
  }

import imgButton from './imgButton.vue'

export default imgButton

1. 在本地的PC机上，快捷键Windows+R，输入cmd进入命令提示符系统。
2. 进入imgButton所在的文件夹，执行如下命令，生成自定义组件包“dist\imgButton-***.zip”。
   执行yarn命令时，如果提示找不到，请先执行“npm install -g yarn”命令安装。

   yarn install
   yarn run build

   图9 生成自定义组件包
   

   至此，您已顺利完成组件包的自定义与打包。本实践为您提供了imgButton.zip自定义组件样例包，供您与上述生成的自定义组件包进行参考对比。

上传成功后，自动返回标准页面自定义组件页面，在组件列表中可查看到已上传的自定义组件imgButton。

图13 查看已上传的自定义组件

1. 在华为云Astro轻应用服务控制台的“主页”中，单击“进入首页”，进入应用开发页面。
2. 在“应用”中，单击“新建低代码应用”或单击，进入新建低代码应用页面。
3. 在新建低代码应用页面，应用类型选择“标准应用”，单击“确定”。
4. 输入应用的标签和名称，单击“新建”，即可进入应用设计器。
   图14 创建一个空白应用
   

   表6 新建空白应用参数说明

   参数	说明	示例
   标签	新建应用的标签，长度不能超过80个字符。标签是应用在系统中的唯一标识，创建后不支持修改。	我的第一个应用
   名称	新建应用的名称，输入标签值后单击该参数的输入框，系统会自动生成应用的名称，同时自动在名称前，添加命名空间__。命名要求如下： 长度不能超过31个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不允许以下划线结尾。	A

单击标准页面上方的保存设置，保存成功后单击，进入预览页面。在预览页面单击“隐藏”，输入框组件会隐藏，单击“显示”，输入框组件会再次显示。

图24 预览效果

组件更新后，在标准页面自定义组件列表中，可查看到组件的版本已更新为“1.0.6”。进入使用自定义组件的标准页面，会发现组件内容已随之更新。

图29 组件版本为1.0.6