说明

该组件库由编写的小型 mvvm+tsx 架构组成，挂载到 jq，可用到任何框架中

基础使用

使用前需要引入 jq

<script src="xxxx/jquery.js"></script>
<script src="xxx/bundle.js"></script>
<link href="xxx/bundle.css" rel="stylesheet" />

Angular 示例

angular.json 引入 js 以及 css 文件

{
  ....
  "build": {
    "styles": [
      "node_modules/hon-component-mvvm/dist/bundle.css"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/hon-component-mvvm/dist/bundle.js"
    ]
  }
}

Vue 示例

main.js/main.ts 引入 js 以及 css 文件

import "jquery";
import "hon-component-mvvm/dist/bundle.js";
import "hon-component-mvvm/dist/bundle.css";

示例 cascader 组件

链式使用方法

<input id="cascader" name="xxx" />

$("#category1").honCascader({
  placeholder: "类目1",
  valueField: "categoryIdStr",
  labelField: "categoryName",
  childrenField: "subCategoriesList",
  cacheName: "categoryCascader",
});

$.ajax("xxxx", {
  success: function (res) {
    if (res && res.success) {
      $("#category1").honCascader("options", res.result);
    }
  },
  type: "POST",
  contentType: "application/json",
  data: JSON.stringify({}),
});

指令用法

<div
  hon-cascader
  placeholder="类目1"
  value-field="categoryIdStr"
  label-field="categoryName"
  children-field="subCategoriesList"
  cache-name="categoryCascader"
></div>

requirejs 用法

为了避免define冲突，推荐以下用法

    const date = new Date().getDate(); // 访问静态服务器若具有cdn缓存，访问时需要带上参数消除缓存
    requirejs(
      [
        "xxx/component-mvvm/bundle.js?date=" +
          date,
      ],
      () => {
        $("#category1").honCascader({
          placeholder: "类目1",
          valueField: "categoryIdStr",
          labelField: "categoryName",
          childrenField: "subCategoriesList",
          cacheName: "categoryCascader",
        });
      }
    );

开发

yarn run dev

http-server // 开启服务器

打包

yarn run build

发布静态服务器

访问地址

npm 包内网发布

npm 包使用

npm i hon-component-mvvm