form-item.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449
  1. module.exports =
  2. /******/ (function(modules) { // webpackBootstrap
  3. /******/ // The module cache
  4. /******/ var installedModules = {};
  5. /******/ // The require function
  6. /******/ function __webpack_require__(moduleId) {
  7. /******/ // Check if module is in cache
  8. /******/ if(installedModules[moduleId])
  9. /******/ return installedModules[moduleId].exports;
  10. /******/ // Create a new module (and put it into the cache)
  11. /******/ var module = installedModules[moduleId] = {
  12. /******/ exports: {},
  13. /******/ id: moduleId,
  14. /******/ loaded: false
  15. /******/ };
  16. /******/ // Execute the module function
  17. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  18. /******/ // Flag the module as loaded
  19. /******/ module.loaded = true;
  20. /******/ // Return the exports of the module
  21. /******/ return module.exports;
  22. /******/ }
  23. /******/ // expose the modules object (__webpack_modules__)
  24. /******/ __webpack_require__.m = modules;
  25. /******/ // expose the module cache
  26. /******/ __webpack_require__.c = installedModules;
  27. /******/ // __webpack_public_path__
  28. /******/ __webpack_require__.p = "/dist/";
  29. /******/ // Load entry module and return exports
  30. /******/ return __webpack_require__(0);
  31. /******/ })
  32. /************************************************************************/
  33. /******/ ({
  34. /***/ 0:
  35. /***/ function(module, exports, __webpack_require__) {
  36. module.exports = __webpack_require__(151);
  37. /***/ },
  38. /***/ 3:
  39. /***/ function(module, exports) {
  40. module.exports = function normalizeComponent (
  41. rawScriptExports,
  42. compiledTemplate,
  43. scopeId,
  44. cssModules
  45. ) {
  46. var esModule
  47. var scriptExports = rawScriptExports = rawScriptExports || {}
  48. // ES6 modules interop
  49. var type = typeof rawScriptExports.default
  50. if (type === 'object' || type === 'function') {
  51. esModule = rawScriptExports
  52. scriptExports = rawScriptExports.default
  53. }
  54. // Vue.extend constructor export interop
  55. var options = typeof scriptExports === 'function'
  56. ? scriptExports.options
  57. : scriptExports
  58. // render functions
  59. if (compiledTemplate) {
  60. options.render = compiledTemplate.render
  61. options.staticRenderFns = compiledTemplate.staticRenderFns
  62. }
  63. // scopedId
  64. if (scopeId) {
  65. options._scopeId = scopeId
  66. }
  67. // inject cssModules
  68. if (cssModules) {
  69. var computed = options.computed || (options.computed = {})
  70. Object.keys(cssModules).forEach(function (key) {
  71. var module = cssModules[key]
  72. computed[key] = function () { return module }
  73. })
  74. }
  75. return {
  76. esModule: esModule,
  77. exports: scriptExports,
  78. options: options
  79. }
  80. }
  81. /***/ },
  82. /***/ 14:
  83. /***/ function(module, exports) {
  84. module.exports = require("element-ui/lib/mixins/emitter");
  85. /***/ },
  86. /***/ 151:
  87. /***/ function(module, exports, __webpack_require__) {
  88. 'use strict';
  89. exports.__esModule = true;
  90. var _formItem = __webpack_require__(152);
  91. var _formItem2 = _interopRequireDefault(_formItem);
  92. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  93. /* istanbul ignore next */
  94. _formItem2.default.install = function (Vue) {
  95. Vue.component(_formItem2.default.name, _formItem2.default);
  96. };
  97. exports.default = _formItem2.default;
  98. /***/ },
  99. /***/ 152:
  100. /***/ function(module, exports, __webpack_require__) {
  101. var Component = __webpack_require__(3)(
  102. /* script */
  103. __webpack_require__(153),
  104. /* template */
  105. __webpack_require__(155),
  106. /* scopeId */
  107. null,
  108. /* cssModules */
  109. null
  110. )
  111. module.exports = Component.exports
  112. /***/ },
  113. /***/ 153:
  114. /***/ function(module, exports, __webpack_require__) {
  115. 'use strict';
  116. exports.__esModule = true;
  117. var _asyncValidator = __webpack_require__(154);
  118. var _asyncValidator2 = _interopRequireDefault(_asyncValidator);
  119. var _emitter = __webpack_require__(14);
  120. var _emitter2 = _interopRequireDefault(_emitter);
  121. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  122. //
  123. //
  124. //
  125. //
  126. //
  127. //
  128. //
  129. //
  130. //
  131. //
  132. //
  133. //
  134. //
  135. //
  136. //
  137. //
  138. //
  139. function noop() {}
  140. function getPropByPath(obj, path) {
  141. var tempObj = obj;
  142. path = path.replace(/\[(\w+)\]/g, '.$1');
  143. path = path.replace(/^\./, '');
  144. var keyArr = path.split('.');
  145. var i = 0;
  146. for (var len = keyArr.length; i < len - 1; ++i) {
  147. var key = keyArr[i];
  148. if (key in tempObj) {
  149. tempObj = tempObj[key];
  150. } else {
  151. throw new Error('please transfer a valid prop path to form item!');
  152. }
  153. }
  154. return {
  155. o: tempObj,
  156. k: keyArr[i],
  157. v: tempObj[keyArr[i]]
  158. };
  159. }
  160. exports.default = {
  161. name: 'ElFormItem',
  162. componentName: 'ElFormItem',
  163. mixins: [_emitter2.default],
  164. props: {
  165. label: String,
  166. labelWidth: String,
  167. prop: String,
  168. required: Boolean,
  169. rules: [Object, Array],
  170. error: String,
  171. validateStatus: String,
  172. showMessage: {
  173. type: Boolean,
  174. default: true
  175. }
  176. },
  177. watch: {
  178. error: function error(value) {
  179. this.validateMessage = value;
  180. this.validateState = value ? 'error' : '';
  181. },
  182. validateStatus: function validateStatus(value) {
  183. this.validateState = value;
  184. }
  185. },
  186. computed: {
  187. labelStyle: function labelStyle() {
  188. var ret = {};
  189. if (this.form.labelPosition === 'top') return ret;
  190. var labelWidth = this.labelWidth || this.form.labelWidth;
  191. if (labelWidth) {
  192. ret.width = labelWidth;
  193. }
  194. return ret;
  195. },
  196. contentStyle: function contentStyle() {
  197. var ret = {};
  198. if (this.form.labelPosition === 'top' || this.form.inline) return ret;
  199. var labelWidth = this.labelWidth || this.form.labelWidth;
  200. if (labelWidth) {
  201. ret.marginLeft = labelWidth;
  202. }
  203. return ret;
  204. },
  205. form: function form() {
  206. var parent = this.$parent;
  207. while (parent.$options.componentName !== 'ElForm') {
  208. parent = parent.$parent;
  209. }
  210. return parent;
  211. },
  212. fieldValue: {
  213. cache: false,
  214. get: function get() {
  215. var model = this.form.model;
  216. if (!model || !this.prop) {
  217. return;
  218. }
  219. var path = this.prop;
  220. if (path.indexOf(':') !== -1) {
  221. path = path.replace(/:/, '.');
  222. }
  223. return getPropByPath(model, path).v;
  224. }
  225. }
  226. },
  227. data: function data() {
  228. return {
  229. validateState: '',
  230. validateMessage: '',
  231. validateDisabled: false,
  232. validator: {},
  233. isRequired: false
  234. };
  235. },
  236. methods: {
  237. validate: function validate(trigger) {
  238. var _this = this;
  239. var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
  240. var rules = this.getFilteredRule(trigger);
  241. if (!rules || rules.length === 0) {
  242. callback();
  243. return true;
  244. }
  245. this.validateState = 'validating';
  246. var descriptor = {};
  247. descriptor[this.prop] = rules;
  248. var validator = new _asyncValidator2.default(descriptor);
  249. var model = {};
  250. model[this.prop] = this.fieldValue;
  251. validator.validate(model, { firstFields: true }, function (errors, fields) {
  252. _this.validateState = !errors ? 'success' : 'error';
  253. _this.validateMessage = errors ? errors[0].message : '';
  254. callback(_this.validateMessage);
  255. });
  256. },
  257. resetField: function resetField() {
  258. this.validateState = '';
  259. this.validateMessage = '';
  260. var model = this.form.model;
  261. var value = this.fieldValue;
  262. var path = this.prop;
  263. if (path.indexOf(':') !== -1) {
  264. path = path.replace(/:/, '.');
  265. }
  266. var prop = getPropByPath(model, path);
  267. if (Array.isArray(value)) {
  268. this.validateDisabled = true;
  269. prop.o[prop.k] = [].concat(this.initialValue);
  270. } else {
  271. this.validateDisabled = true;
  272. prop.o[prop.k] = this.initialValue;
  273. }
  274. },
  275. getRules: function getRules() {
  276. var formRules = this.form.rules;
  277. var selfRuels = this.rules;
  278. formRules = formRules ? formRules[this.prop] : [];
  279. return [].concat(selfRuels || formRules || []);
  280. },
  281. getFilteredRule: function getFilteredRule(trigger) {
  282. var rules = this.getRules();
  283. return rules.filter(function (rule) {
  284. return !rule.trigger || rule.trigger.indexOf(trigger) !== -1;
  285. });
  286. },
  287. onFieldBlur: function onFieldBlur() {
  288. this.validate('blur');
  289. },
  290. onFieldChange: function onFieldChange() {
  291. if (this.validateDisabled) {
  292. this.validateDisabled = false;
  293. return;
  294. }
  295. this.validate('change');
  296. }
  297. },
  298. mounted: function mounted() {
  299. var _this2 = this;
  300. if (this.prop) {
  301. this.dispatch('ElForm', 'el.form.addField', [this]);
  302. var initialValue = this.fieldValue;
  303. if (Array.isArray(initialValue)) {
  304. initialValue = [].concat(initialValue);
  305. }
  306. Object.defineProperty(this, 'initialValue', {
  307. value: initialValue
  308. });
  309. var rules = this.getRules();
  310. if (rules.length) {
  311. rules.every(function (rule) {
  312. if (rule.required) {
  313. _this2.isRequired = true;
  314. return false;
  315. }
  316. });
  317. this.$on('el.form.blur', this.onFieldBlur);
  318. this.$on('el.form.change', this.onFieldChange);
  319. }
  320. }
  321. },
  322. beforeDestroy: function beforeDestroy() {
  323. this.dispatch('ElForm', 'el.form.removeField', [this]);
  324. }
  325. };
  326. /***/ },
  327. /***/ 154:
  328. /***/ function(module, exports) {
  329. module.exports = require("async-validator");
  330. /***/ },
  331. /***/ 155:
  332. /***/ function(module, exports) {
  333. module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
  334. return _c('div', {
  335. staticClass: "el-form-item",
  336. class: {
  337. 'is-error': _vm.validateState === 'error',
  338. 'is-validating': _vm.validateState === 'validating',
  339. 'is-required': _vm.isRequired || _vm.required
  340. }
  341. }, [(_vm.label) ? _c('label', {
  342. staticClass: "el-form-item__label",
  343. style: (_vm.labelStyle),
  344. attrs: {
  345. "for": _vm.prop
  346. }
  347. }, [_vm._v("\n " + _vm._s(_vm.label + _vm.form.labelSuffix) + "\n ")]) : _vm._e(), _c('div', {
  348. staticClass: "el-form-item__content",
  349. style: (_vm.contentStyle)
  350. }, [_vm._t("default"), _c('transition', {
  351. attrs: {
  352. "name": "el-zoom-in-top"
  353. }
  354. }, [(_vm.validateState === 'error' && _vm.showMessage && _vm.form.showMessage) ? _c('div', {
  355. staticClass: "el-form-item__error"
  356. }, [_vm._v(_vm._s(_vm.validateMessage))]) : _vm._e()])], 2)])
  357. },staticRenderFns: []}
  358. /***/ }
  359. /******/ });