{"remainingRequest":"D:\\jenkins\\workspace\\artfess-module\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\artfess-module\\src\\demo\\Input.vue?vue&type=template&id=e0e6aefe&scoped=true&","dependencies":[{"path":"D:\\jenkins\\workspace\\artfess-module\\src\\demo\\Input.vue","mtime":1675232038699},{"path":"D:\\jenkins\\workspace\\artfess-module\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\artfess-module\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\artfess-module\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\artfess-module\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["\n<el-row :gutter=\"20\">\n  <el-col :span=\"20\">\n    <MdView>\n      <template>\n        # 输入框\n        常见的输入框，Element-UI已经有较为完整的组件库及相应的开发手册了，但是在通过这些组件来构建页面时，对于组件的显示、隐藏，常规或者特殊的校验，\n        组件之间的联动、级联、计算等等，都需要自行实现，所以Hotent-UI就是在Element-UI的基础上增强了组件这方面能力。\n      </template>\n    </MdView>\n\n    <CodeBox name=\"单行文本\" alias=\"singleText\" :code=\"code.singleText\" desc=\"单行文本。\">\n      <ht-input v-model=\"data.name\" permission=\"b\" placeholder=\"姓名\" :clearable=\"false\" />\n    </CodeBox>\n\n    <CodeBox name=\"数字输入框\" alias=\"numberText\" :code=\"code.numberText\" desc=\"数字输入框。\">\n      <ht-input type=\"number\" v-model=\"data.age\" placeholder=\"年龄\" :step=\"2\" :min=\"12\" :max=\"99\" />\n    </CodeBox>\n\n    <CodeBox name=\"多行文本\" alias=\"multipleText\" :code=\"code.multipleText\" desc=\"多行文本。\">\n      <ht-input\n        type=\"textarea\"\n        v-model=\"data.memo\"\n        :cols=\"80\"\n        :autosize=\"{ minRows: 2, maxRows: 4}\"\n        placeholder=\"备注\"\n      />\n    </CodeBox>\n\n    <CodeBox\n      name=\"数学计算\"\n      alias=\"mathCalculation\"\n      :code=\"code.math\"\n      desc=\"这个功能实现了输入框之间的数学计算。特别注意：如果在子表的多条数据中进行计算时，需要指定data-subname属性，并为每条数据指定data-index索引。\"\n    >\n      <div v-form>\n        <label class=\"item-label\">相加:</label>\n        <div class=\"flex\">\n          <ht-input class=\"m-r\" v-model=\"data.math1\" placeholder=\"数字1\" />\n          <span class=\"m-r\">+</span>\n          <ht-input class=\"m-r\" v-model=\"data.math2\" placeholder=\"数字2\" />\n          <span class=\"m-r\">=</span>\n          <ht-input\n            class=\"m-r\"\n            v-model=\"data.math3\"\n            disabled\n            placeholder=\"数字1 + 数字2\"\n            math-exp=\"{数字1(data.math1)} + {数字2(data.math2)}\"\n          />\n        </div>\n        <el-divider />\n        <div>\n          <label class=\"item-label\">子表每行分别计算，再对列求和:</label>\n          <br />\n          <ul class=\"math-ul\">\n            <li\n              v-for=\"(row, index) in data.sub\"\n              :key=\"index\"\n              :data-index=\"index\"\n              data-subname=\"data.sub\"\n            >\n              <div class=\"flex\">\n                <ht-input class=\"m-r\" v-model=\"row.dj\" placeholder=\"单价\" />\n                <ht-input class=\"m-r\" v-model=\"row.sl\" placeholder=\"数量\" />\n                <ht-input\n                  class=\"m-r\"\n                  v-model=\"row.xj\"\n                  placeholder=\"小计\"\n                  math-exp=\"{单价(row.dj)} * {数量(row.sl)}\"\n                />\n                <el-link type=\"danger\" class=\"m-r\" @click=\"data.sub.remove(row)\">删除</el-link>\n              </div>\n            </li>\n            <li>\n              <div class=\"flex\">\n                <el-button\n                  type=\"primary\"\n                  class=\"m-r\"\n                  size=\"small\"\n                  @click=\"data.sub.push({})\"\n                >添加一行数据</el-button>\n                <label class=\"item-label\">对子表小计求和:</label>\n                <ht-input\n                  class=\"m-r\"\n                  v-model=\"data.math4\"\n                  placeholder=\"对子表中的小计求和\"\n                  math-exp=\"FormMath.sum([{小计(data.sub.xj)}])\"\n                />\n              </div>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </CodeBox>\n\n    <CodeBox\n      name=\"联动\"\n      alias=\"linkage\"\n      :code=\"code.linkage\"\n      desc=\"当下拉框、复选框、单选按钮选择相应的选项时，可以按照配置的规则联动其他的控件，例如隐藏/显示，必填/非必填，置空，校验规则等联动效果。这种联动是遵循轨迹回弹的，即：如果选择A时显示该控件，则选非A时不显示该控件，无需再配置选B、C时隐藏该控件。\"\n    >\n      <template>\n        <div class=\"flex\">\n          <label class=\"item-label\">兴趣爱好(后面的输入框在显示和隐藏之间切换):</label>\n          <ht-select\n            v-model=\"data.ah\"\n            class=\"m-r\"\n            :options=\"[{ key: '1', value: '爬山' },{ key: '2', value: '游泳' },{ key: '3', value: '下棋' }]\"\n            :linkage=\"[{'value':'1','effect':[{'target':'permission.shan', 'type': '=','value':'w'}]},\n            {'value':'2','effect':[{'target': 'permission.yong', 'type': '=', 'value': 'b'},{target: 'validate.yong',type:'+',value:'is:仰泳'}]},{'value':'3','effect':[{'target': 'permission.qi', 'type': '=', 'value': 'w'}]}]\"\n          />\n          <ht-input :permission=\"permission.shan\" v-model=\"data.shan\" placeholder=\"喜欢爬哪座山\" />\n          <ht-input\n            :permission=\"permission.yong\"\n            v-model=\"data.yong\"\n            :validate=\"validate.yong\"\n            placeholder=\"喜欢哪种泳姿\"\n          />\n          <ht-input :permission=\"permission.qi\" v-model=\"data.qi\" placeholder=\"喜欢哪种棋\" />\n        </div>\n        <el-divider />\n        <div class=\"flex\">\n          <label class=\"item-label\">联系方式(后面的输入框会切换不同的校验规则):</label>\n          <ht-radio\n            v-model=\"data.lxfs\"\n            :options=\"[{ key: '1', value: 'Email' },{ key: '2', value: '手机' }]\"\n            :linkage=\"[{'value':'1','effect':[{'target':'validate.lxdz', 'type': '+','value':'email'}]},{'value':'2','effect':[{'target':'validate.lxdz', 'type': '+','value':'mobile'}]}]\"\n          />\n          <ht-input v-model=\"data.lxdz\" :validate=\"validate.lxdz\" />\n        </div>\n        <el-divider />\n        <div class=\"flex\">\n          <label class=\"item-label\">领款方式(后面的输入框的内容会置空):</label>\n          <ht-checkbox\n            v-model=\"data.lkfs\"\n            :options=\"[{ key: '1', value: '银行卡' },{ key: '2', value: '现金' }]\"\n            :linkage=\"[{'value':'2','effect':[{'target':'data.yhkh', 'type': '=','value':''}]}]\"\n          />\n          <ht-input v-model=\"data.yhkh\" />\n        </div>\n      </template>\n    </CodeBox>\n\n    <CodeBox\n      name=\"校验规则\"\n      alias=\"validation\"\n      :code=\"code.validation\"\n      desc=\"支持常见的检验规则、正则表达式、后台校验、js方法四种校验模式。\"\n    >\n      <template>\n        <div class=\"flex\">\n          <label class=\"item-label\">选择校验规则：</label>\n          <ht-select class=\"m-r\" :options=\"validate.dic\" v-model=\"validate.current\" />\n          <div class=\"m-r\" v-if=\"currentValidateArgsNumber > 0\">\n            <label class=\"item-label\">第一个参数：</label>\n            <ht-input v-model=\"validate.arg1\" placeholder=\"校验规则的第一个参数\" />\n          </div>\n          <div class=\"m-r\" v-if=\"currentValidateArgsNumber > 1\">\n            <label class=\"item-label\">第二个参数：</label>\n            <ht-input v-model=\"validate.arg2\" placeholder=\"校验规则的第二个参数\" />\n          </div>\n          <div class=\"m-r\" v-if=\"currentValidateHasTarget\">\n            <label class=\"item-label\">检验关联对象：</label>\n            <ht-select\n              :options=\"[{key: 'wb2', value: '输入框二'},{key: 'rq2', value: '结束时间'}]\"\n              v-model=\"validate.target\"\n            />\n          </div>\n          <div class=\"m-r\" v-if=\"validate.current=='method'\">\n            <label class=\"item-label\">自定义方法：</label>\n            <ht-input class=\"m-r\" type=\"textarea\" :rows=\"4\" v-model=\"validate.method\" />\n            <label class=\"item-label\">提示信息：</label>\n            <ht-input v-model=\"validate.message\" />\n          </div>\n        </div>\n        <el-divider />\n        <div style=\"margin-bottom: 15px\">\n          <el-tooltip class=\"m-r\" v-if=\"validateExp\" content=\"生成的校验规则\">\n            <i class=\"icon-tips\" style=\"font-size: 14px; font-weight: bold;\" />\n          </el-tooltip>\n          <span>{{validateExp}}</span>\n        </div>\n        <label class=\"item-label\">输入框一：</label>\n        <ht-input v-model=\"data.wb1\" :validate=\"validateExp\" />\n        <div v-if=\"currentValidateHasTarget && currentValidateHasTarget!='date'\">\n          <label class=\"item-label\">输入框二：</label>\n          <ht-input v-model=\"data.wb2\" name=\"wb2\" />\n        </div>\n        <el-divider />\n        <div v-if=\"currentValidateHasTarget=='date'\">\n          <label class=\"item-label\">开始时间：</label>\n          <ht-date class=\"m-r\" v-model=\"data.rq1\" :validate=\"validateExp\" />\n          <label class=\"item-label\">结束时间：</label>\n          <ht-date v-model=\"data.rq2\" name=\"rq2\" />\n        </div>\n      </template>\n    </CodeBox>\n\n    <CodeBox\n      name=\"权限控制\"\n      alias=\"permission\"\n      :code=\"code.permission\"\n      desc=\"这个单行文本实现了控件的只读、编辑、必填权限，而且权限在变更后对输入框的影响会立即生效。\"\n    >\n      <div>\n        <label class=\"item-label\">权限控制:</label>\n        <ht-radio\n          v-model=\"permission.xm\"\n          :options=\"[{key:'r',value:'只读'},{key:'w',value:'编辑'},{key:'b',value:'必填'}]\"\n        />\n        <el-divider />\n        <ht-input v-model=\"data.xm\" :permission=\"permission.xm\" placeholder=\"请输入您的姓名\" />\n      </div>\n    </CodeBox>\n\n    <CodeBox\n      name=\"下拉框权限控制\"\n      alias=\"selectPermission\"\n      :code=\"code.selectPermission\"\n      desc=\"对下拉框的权限控制。\"\n    >\n      <div>\n        <label class=\"item-label\">权限控制:</label>\n        <ht-radio\n          v-model=\"permission.xlk\"\n          :options=\"[{key:'r',value:'只读'},{key:'w',value:'编辑'},{key:'b',value:'必填'}]\"\n        />\n        <el-divider />\n        <ht-select v-model=\"data.xlk\" :permission=\"permission.xlk\" :options=\"options.xlk\" />\n\n        <el-button\n          size=\"small\"\n          style=\"margin-left:10px\"\n          type=\"danger\"\n          @click=\"options.xlk=[]\"\n        >清空下拉框选项</el-button>\n      </div>\n    </CodeBox>\n\n    <MdView id=\"api\">\n      <template>\n        # API\n        ## Options\n        | 参数 | 说明 | 类型 | 可选值 | 默认值 |\n        | :------ | :------ | :------ | :------ | :------ |\n        | validate | 校验规则 | string/object | 请参照[校验规则](validation)查看可选值 | - |\n        | name | 名称 | string | - | - |\n        | permission | 权限 | string | n/r/w/b，分别表示：无权限、只读、编辑、必填权限 | w |\n        | type | 类型 | string | number,textarea,text和其他[原生input的type值](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |\n        | clearable | 是否可清空 | boolean | - | true |\n        | show-password | 是否为密码 | boolean | - | false |\n        | math-exp | 数学计算表达式 | string | 请参照[数学计算](math)查看表达式语法 | - |\n        | date-calc-exp | 日期计算表达式 | string | 请参照[日期计算](http://www.baidu.com)查看表达式语法 | - |\n        | linkage | 联动表达式 | arrry/object | 请参照[联动](linkage)查看联动介绍，只有`ht-select,ht-radio,ht-checkbox`有该属性 | - |\n        | placeholder | 输入提示语 | string | - | 请输入内容 |\n        | readonly | 是否只读 | boolean | - | false |\n        | disabled | 是否不可用 | boolean | - | false |\n        | min | 数字最小值 | number | - | - |\n        | max | 数字最大值 | number | - | - |\n        | step | 数字的步长（type为number时才生效） | number | - | 1 |\n        | step-strictly | 是否只能输入 step 的倍数 （type为number时才生效）| boolean | - | false |\n        | precision | 数字精度（type为number时才生效）| number | - | - |\n        | cols | 文本列数（type为textarea时才生效） | number | - | 60 |\n        | rows | 文本的行数（type为textarea时才生效） | number | - | 2 |\n        | autosize | 自适应内容高度（type为textarea时才生效），可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean/object | - | false |\n        | prefix-icon | 输入框头部图标 | string | - | - |\n        | suffix-icon | 输入框尾部图标 | string | - | - |\n        | tabindex | 输入框的tabindex | string | - | - |\n        ## slots\n        | name | 说明 |\n        | :------ | :------ |\n        | prefix | 输入框头部内容，只对 type=\"text\" 有效 |\n        | suffix | 输入框尾部内容，只对 type=\"text\" 有效 |\n        | prepend | 输入框前置内容，只对 type=\"text\" 有效 |\n        | append | 输入框后置内容，只对 type=\"text\" 有效 |\n        ## input events\n        | 事件名称 | 说明 | 参数 |\n        | :------ | :------ | :------ |\n        |blur| 在 Input 失去焦点时触发| (event: Event) |\n        |focus| 在 Input 获得焦点时触发| (event: Event) |\n        |change| 仅在输入框失去焦点或用户按下回车时触发| (value: string | number) |\n        |input| 在 Input 值改变时触发| (value: string | number) |\n        |clear| 在点击由`clearable`属性生成的清空按钮时触发 | - |\n      </template>\n    </MdView>\n  </el-col>\n  <el-col :span=\"4\">\n    <AnchorWrapper :anchors=\"code.anchors\" />\n  </el-col>\n</el-row>\n",null]}