ken-form-design/lib/ken-form-design.common.27.js

基于vue、ant-design-vue的表单设计器,可视化开发表单

((typeof self !== 'undefined' ? self : this)["webpackJsonpken_form_design"] = (typeof self !== 'undefined' ? self : this)["webpackJsonpken_form_design"] || []).push([[27],{

/***/ "71c6":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.function.name.js
var es6_function_name = __webpack_require__("7f7f");

// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"703dcae2-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/KComboBox/KComboBox.vue?vue&type=template&id=cd7b8a5a&scoped=true&
var render = function render() {
  var _vm = this,
    _c = _vm._self._c;
  return _c('div', [_c('div', {
    staticClass: "k-combobox"
  }, [_c('div', {
    staticClass: "select-input",
    class: {
      'select-input-color': _vm.iconUnfoldClass['icon-unfold-transform'],
      disabled: _vm.record.options.disabled
    }
  }, [_c('input', {
    directives: [{
      name: "model",
      rawName: "v-model",
      value: _vm.resultLabel,
      expression: "resultLabel"
    }],
    staticClass: "inputDom cursor",
    attrs: {
      "placeholder": _vm.record.options.placeholder,
      "autocomplete": "off",
      "disabled": _vm.record.options.disabled
    },
    domProps: {
      "value": _vm.resultLabel
    },
    on: {
      "blur": _vm.handleInputBlur,
      "input": function input($event) {
        if ($event.target.composing) return;
        _vm.resultLabel = $event.target.value;
      }
    }
  }), _c('div', {
    staticClass: "select-arrow cursor",
    on: {
      "click": _vm.handleIcon,
      "keypress": _vm.handleIcon
    }
  }, [_c('i', {
    staticClass: "iconfont icon-unfold",
    class: _vm.iconUnfoldClass
  })])]), _c('div', {
    staticClass: "select-dropdown",
    style: {
      display: _vm.iconUnfoldClass['icon-unfold-transform'] ? 'block' : 'none'
    }
  }, [_c('ul', {
    staticClass: "select-not-found",
    style: {
      display: !_vm.isExistedSelectData ? 'block' : 'none'
    }
  }, [_c('li', [_vm._v("无匹配数据")])]), _c('ul', {
    staticClass: "select-dropdown-list",
    style: {
      display: _vm.isExistedSelectData ? 'block' : 'none'
    }
  }, _vm._l(_vm.record.options.options, function (item, index) {
    return _c('li', {
      key: index,
      staticClass: "select-item",
      on: {
        "click": function click($event) {
          return _vm.selectChange(item.label);
        },
        "keypress": function keypress($event) {
          return _vm.selectChange(item.label);
        }
      }
    }, [_vm._v(" " + _vm._s(item.label) + " ")]);
  }), 0)])])]);
};
var staticRenderFns = [];

// CONCATENATED MODULE: ./packages/components/KComboBox/KComboBox.vue?vue&type=template&id=cd7b8a5a&scoped=true&

// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/KComboBox/KComboBox.vue?vue&type=script&lang=js&
/* harmony default export */ var KComboBoxvue_type_script_lang_js_ = ({
  name: 'KComboBox',
  /**
   * 绑定
   */
  // model: {
  //     prop: 'value',
  //     event: 'change',
  // },

  props: ['record', 'value'],
  /**
   * 数据
   */
  data: function data() {
    return {
      /**
       * 图标样式
       */
      iconUnfoldClass: {
        'icon-unfold-transform': false
      },
      /**
       * 记录点击切换按钮时对应的事件
       */
      ev: null,
      /**
       * 当前显示值
       */
      resultLabel: ''
      // /**
      //  * 当前值
      //  */
      // resultVal: '',
    };
  },

  /**
   * 方法
   */
  methods: {
    /**
     * 筛选值
     * 通过传入value设置当前对应值
     */
    setValue: function setValue(newVal) {
      // 通过传入值，设置当前选中项目值
      var curOption = this.record.options.options.filter(function (item) {
        return item.label === newVal;
      });
      // 存在则进行相关设置
      if (curOption.length > 0) {
        // 显示值
        this.resultLabel = curOption[0].label;
        // // 实际值
        // this.resultVal = curOption[0].value;
      } else {
        // 下拉列表中不存在，则设置
        // 显示值
        this.resultLabel = newVal;
        // // 实际值
        // this.resultVal = newVal;
      }
    },
    /**
     *input丢失焦点时触发
     */
    handleInputBlur: function handleInputBlur() {
      // 传出值
      this.$emit('change', this.resultLabel);
    },
    /**
     * 选择内容发生改变时触发
     */
    selectChange: function selectChange(newVal) {
      // 设置当前值
      this.resultLabel = newVal;
      // 传出值
      this.$emit('change', this.resultLabel);
      // 隐藏下拉框
      this.iconUnfoldClass['icon-unfold-transform'] = false;
    },
    /**
     *点击下拉箭头
     * @param {*} e 当前事件对象
     */
    handleIcon: function handleIcon(e) {
      // 如果不可编辑禁用此事件
      if (this.record.options.disabled) return;
      // 点击切换图标按钮时，先保存当前点击的事件，在后面监听的click事件中，判断如果不是当前点击的事件，则收起下拉框
      this.ev = e;
      this.showOrHideDropDown();
    },
    // /**
    //  * 下拉组件不可编辑时调用此方法
    //  */
    // handleClick(e) {
    //   if (this.record.options.disabled) return;
    //   this.ev = e;
    //   this.showOrHideDropDown();
    // },
    /**
     * 显示/隐藏下拉列表
     */
    showOrHideDropDown: function showOrHideDropDown() {
      // 如果当前下拉框处于显示状态，则再次点击进行隐藏
      if (this.iconUnfoldClass['icon-unfold-transform']) {
        this.iconUnfoldClass['icon-unfold-transform'] = false;
      }
      // 当前处于隐藏状态
      else {
        // 处理下拉位置
        this.handleDropDown();
        // 显示下拉框
        this.iconUnfoldClass['icon-unfold-transform'] = true;
      }
    },
    /**
     * 处理下拉列表
     */
    handleDropDown: function handleDropDown() {
      // 组件监听页面resize只能用addEventListener，否则不会生效
      // 取消监听，重新打开下拉处理
      // window.addEventListener('resize', this.handleDropDown, false);
      // body 可视区域高度
      var bodyHeight = document.documentElement.clientHeight;
      // 匹配DOM的高度
      var dropDownHeight = this.getHeight(this.dropDownDom);
      // 取出匹配父级DOM的矩形对象
      var parentRect = this.parentDom.getBoundingClientRect();
      // 匹配DOM的left与父级一致
      this.dropDownDom.style.left = "".concat(parentRect.left, "px");
      // 宽度
      this.dropDownDom.style.width = "".concat(parentRect.width, "px");
      /**
       * 1、getBoundingClientRect.bottom为元素下边与页面上边的距离
       * 2、父级元素底部距离页面底部距离  =页面高度 - getBoundingClientRect.bottom
       */
      // 用于显示下拉框的高度
      var showDrowDownHeight = bodyHeight - parentRect.bottom;
      // 父级距离页面下边的高度大于等于匹配DOM的高度，则往下展示
      if (showDrowDownHeight >= dropDownHeight) {
        //
        this.dropDownDom.style.bottom = 'auto';
        // 匹配DOM的top = 父级矩形对象top + 父级的高度
        this.dropDownDom.style.top = "".concat(parentRect.bottom, "px");
      } else {
        //
        this.dropDownDom.style.top = 'auto';
        // 从父元素顶部开始显示
        this.dropDownDom.style.bottom = "".concat(showDrowDownHeight + parentRect.height, "px");
        /**
         * 1、向上显示时，如果父元素顶部距离body顶部距离>下拉高度，则正常显示
         * 2、如果<下拉高度，则重新设置下拉框高度，并添加滚动条
         */

        if (parentRect.top < dropDownHeight) {
          // 设置高度
          this.dropDownDom.style.height = "".concat(parentRect.top, "px");
          this.dropDownDom.style['overflow-y'] = 'scroll';
        }
      }
    },
    /**
     *获取元素高度
     *@param {Object} el 需要获取高度的元素
     */
    getHeight: function getHeight(el) {
      /*
             添加行内样式
             让隐藏元素变成有物理尺寸存在，但不可见
            */
      el.style.cssText = 'visibility:hidden';
      // 获取高度
      var height = el.clientHeight;
      // 隐藏
      el.style.cssText = 'display:none';
      // 返回高度
      return height;
    },
    /**
     * 点击切换图标按钮以外的其他地方触发，关闭下拉框
     * @param {*} e 点击事件的对象
     */
    clickOther: function clickOther(e) {
      // 判断如果不是当前点击的事件，则收起下拉框
      if (this.ev === e) return;
      // 如果下拉框显示则隐藏
      if (this.iconUnfoldClass['icon-unfold-transform']) {
        this.iconUnfoldClass['icon-unfold-transform'] = false;
      }
    }
  },
  computed: {
    /**
     * 是否存在下拉值
     */
    isExistedSelectData: function isExistedSelectData() {
      return this.record.options.options.length > 0;
    },
    /**
     * 下拉框dom元素
     */
    dropDownDom: function dropDownDom() {
      // 匹配框，需要相对于body
      return this.$el.getElementsByClassName('select-dropdown')[0];
    },
    /**
     * 组件顶级元素
     */
    parentDom: function parentDom() {
      // 匹配框父级
      return this.$el.getElementsByClassName('k-combobox')[0];
    }
  },
  // 初始化加载
  mounted: function mounted() {
    // 添加点击事件的监听
    window.addEventListener('click', this.clickOther);
  },
  watch: {
    // 父传子
    value: {
      immediate: true,
      // 首次加载触发
      handler: function handler(newVal) {
        this.setValue(newVal);
      }
    }
  },
  // 销毁之前
  destroyed: function destroyed() {
    // 移除监听
    window.removeEventListener('click', this.clickOther);
  }
});
// CONCATENATED MODULE: ./packages/components/KComboBox/KComboBox.vue?vue&type=script&lang=js&
 /* harmony default export */ var KComboBox_KComboBoxvue_type_script_lang_js_ = (KComboBoxvue_type_script_lang_js_); 
// EXTERNAL MODULE: ./packages/components/KComboBox/KComboBox.vue?vue&type=style&index=0&id=cd7b8a5a&prod&lang=less&scoped=true&
var KComboBoxvue_type_style_index_0_id_cd7b8a5a_prod_lang_less_scoped_true_ = __webpack_require__("725f");

// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__("2877");

// CONCATENATED MODULE: ./packages/components/KComboBox/KComboBox.vue






/* normalize component */

var component = Object(componentNormalizer["a" /* default */])(
  KComboBox_KComboBoxvue_type_script_lang_js_,
  render,
  staticRenderFns,
  false,
  null,
  "cd7b8a5a",
  null
  
)

/* harmony default export */ var KComboBox = (component.exports);
// CONCATENATED MODULE: ./packages/components/KComboBox/index.js


KComboBox.install = function (Vue) {
  Vue.component(KComboBox.name, KComboBox);
};
/* harmony default export */ var components_KComboBox = __webpack_exports__["default"] = (KComboBox);

/***/ }),

/***/ "725f":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_11_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_11_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_11_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_11_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_KComboBox_vue_vue_type_style_index_0_id_cd7b8a5a_prod_lang_less_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("d657");
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_11_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_11_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_11_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_11_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_KComboBox_vue_vue_type_style_index_0_id_cd7b8a5a_prod_lang_less_scoped_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_11_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_11_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_11_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_11_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_KComboBox_vue_vue_type_style_index_0_id_cd7b8a5a_prod_lang_less_scoped_true___WEBPACK_IMPORTED_MODULE_0__);
/* unused harmony reexport * */


/***/ }),

/***/ "d657":
/***/ (function(module, exports, __webpack_require__) {

// extracted by mini-css-extract-plugin

/***/ })

}]);