配置组件

• 2020 年 5 月 29 日
• 筆記

配置日期选择器组件，添加disabledDate功能：

1、通过组件名v2-from-datepicker找到组件的入口，index.vue文件。
2、通过编辑package.json文件，在右侧编辑区添加一个类型为string_select（type：用于定义用户填写配置项的输入形式）的配置项，通过name，desp配置配置项对应的英文和中文名，其中英文名在组件渲染的时候起到关键作用
3、通常string_select类型的需要做级联

      {
        "name": "disabledDateType","desp": "禁用日期方式","defaultValue": "","type": "string_select","doc": "#","valueArray": ["","list","listVar","method"], "despArray": [ "无", "数组","数组变量", "方法"]
      },
      {"require":{ "disabledDateType":"list"},"name": "disabledDateList","desp": "绑定数组", "defaultValue": [],"type": "array",
        "attrInEachElement": [{ "name": "start","desp": "开始时间","defaultValue": "","type": "string_input"},{"name": "end","desp": "结束时间","defaultValue": "","type": "string_input"} ]
      },
      { "require":{"disabledDateType":"listVar"}, "name": "disabledDateListVar","desp": "绑定数组变量","defaultValue": "","type": "string_input"},
      {
        "require":{
         "disabledDateType":"method"
        },
        "name": "disabledDateMethod",
        "desp": "绑定方法",
        "details":"请勿勾选使用变量",
        "defaultValue": "",
        "type": "string_input"
      }
    ],

3、组件的所有渲染所需的配置数据需要从model中取，要拿到禁用日期method方式下的disabledDateMethod中用户填写的方法名（引用），就需要this.model.disabledDateMethod。
4、参数项的配置：
配置项需要动态绑定变量的，都需要改为string_input类型
绑定方法中绑定变量和绑定常量的差别：在组件对应的index.vue文件里面，通过 this.model.disabledDateMethod（这里disabledDateMethod就是配置项的name），通过这个可以拿到在包含组件的页面中，配置项输入框中绑定的数据篮子中的方法。
若你绑定的方法名是method1，在文件中如果是动态绑定变量则拿到的方法名是 ${method1} 形式的，如果是绑定常量 ，则拿到的方法名是 method1 形式的。所以为了防止误操作报错，需要做replace容错处理,如下

let fangFa= that.model.disabledDateMethod;
 if (fangFa.startsWith("${")) {
          methodName= fangFa.replace("${", "").replace("}", "");
        }

用一个变量methodName接收。然后这里用that.$store.state.root，相当于在编辑的页面的this，通过that.$store.state.root[methodName]（time）就可以运行这个方法，参数为time。为了防止报错，可以用hasOwnProperty（methodName）查询下当前页面是否定义了这个方法。
5、时间戳的处理，组件给的日期项准时是当天的00点，设置的禁用区间是当天的8点，所以同日期下，传参time日期小于newDate（区间.start），导致等于item.start的该日期未被禁用。可以均用parseInt处理，以比较参数time与item.start的关系。
杂：attrInEachElement：每一个元素中的属性；
package.json文件中不可以添加注释。

webide自定义组件，使用循环自定义组件。