• 配置组件


    配置日期选择器组件,添加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自定义组件,使用循环自定义组件。

    一日之计在于晨
  • 相关阅读:
    Wicket框架使用小结
    【YII是个什么鬼】YII入门——URL Manager配置
    【碎碎念】你要做重要的工作
    【科普】五分钟分清网页钟各种长度单位px、em、rem
    【CSS】最简单的css3实现的水平导航栏的手风琴效果
    PYTHON__关于Socket中的Select使用理解
    PIG__Failed to create DataStorage解决方案
    MYSQL__Mysql免安装版的使用(Windows7)
    PYTHON__生成器和普通函数的区别
    vim status 颜色配置
  • 原文地址:https://www.cnblogs.com/1998Archer/p/12973805.html
Copyright © 2020-2023  润新知