ken-form-design
Version:
基于vue、ant-design-vue的表单设计器,可视化开发表单
1 lines • 3.87 kB
JavaScript
(("undefined"!==typeof self?self:this)["webpackJsonpken_form_design"]=("undefined"!==typeof self?self:this)["webpackJsonpken_form_design"]||[]).push([[27],{"71c6":function(t,o,e){"use strict";e.r(o);e("7f7f");var n=function(){var t=this,o=t._self._c;return o("div",[o("div",{staticClass:"k-combobox"},[o("div",{staticClass:"select-input",class:{"select-input-color":t.iconUnfoldClass["icon-unfold-transform"],disabled:t.record.options.disabled}},[o("input",{directives:[{name:"model",rawName:"v-model",value:t.resultLabel,expression:"resultLabel"}],staticClass:"inputDom cursor",attrs:{placeholder:t.record.options.placeholder,autocomplete:"off",disabled:t.record.options.disabled},domProps:{value:t.resultLabel},on:{blur:t.handleInputBlur,input:function(o){o.target.composing||(t.resultLabel=o.target.value)}}}),o("div",{staticClass:"select-arrow cursor",on:{click:t.handleIcon,keypress:t.handleIcon}},[o("i",{staticClass:"iconfont icon-unfold",class:t.iconUnfoldClass})])]),o("div",{staticClass:"select-dropdown",style:{display:t.iconUnfoldClass["icon-unfold-transform"]?"block":"none"}},[o("ul",{staticClass:"select-not-found",style:{display:t.isExistedSelectData?"none":"block"}},[o("li",[t._v("无匹配数据")])]),o("ul",{staticClass:"select-dropdown-list",style:{display:t.isExistedSelectData?"block":"none"}},t._l(t.record.options.options,(function(e,n){return o("li",{key:n,staticClass:"select-item",on:{click:function(o){return t.selectChange(e.label)},keypress:function(o){return t.selectChange(e.label)}}},[t._v(" "+t._s(e.label)+" ")])})),0)])])])},s=[],l={name:"KComboBox",props:["record","value"],data:function(){return{iconUnfoldClass:{"icon-unfold-transform":!1},ev:null,resultLabel:""}},methods:{setValue:function(t){var o=this.record.options.options.filter((function(o){return o.label===t}));o.length>0?this.resultLabel=o[0].label:this.resultLabel=t},handleInputBlur:function(){this.$emit("change",this.resultLabel)},selectChange:function(t){this.resultLabel=t,this.$emit("change",this.resultLabel),this.iconUnfoldClass["icon-unfold-transform"]=!1},handleIcon:function(t){this.record.options.disabled||(this.ev=t,this.showOrHideDropDown())},showOrHideDropDown:function(){this.iconUnfoldClass["icon-unfold-transform"]?this.iconUnfoldClass["icon-unfold-transform"]=!1:(this.handleDropDown(),this.iconUnfoldClass["icon-unfold-transform"]=!0)},handleDropDown:function(){var t=document.documentElement.clientHeight,o=this.getHeight(this.dropDownDom),e=this.parentDom.getBoundingClientRect();this.dropDownDom.style.left="".concat(e.left,"px"),this.dropDownDom.style.width="".concat(e.width,"px");var n=t-e.bottom;n>=o?(this.dropDownDom.style.bottom="auto",this.dropDownDom.style.top="".concat(e.bottom,"px")):(this.dropDownDom.style.top="auto",this.dropDownDom.style.bottom="".concat(n+e.height,"px"),e.top<o&&(this.dropDownDom.style.height="".concat(e.top,"px"),this.dropDownDom.style["overflow-y"]="scroll"))},getHeight:function(t){t.style.cssText="visibility:hidden";var o=t.clientHeight;return t.style.cssText="display:none",o},clickOther:function(t){this.ev!==t&&this.iconUnfoldClass["icon-unfold-transform"]&&(this.iconUnfoldClass["icon-unfold-transform"]=!1)}},computed:{isExistedSelectData:function(){return this.record.options.options.length>0},dropDownDom:function(){return this.$el.getElementsByClassName("select-dropdown")[0]},parentDom:function(){return this.$el.getElementsByClassName("k-combobox")[0]}},mounted:function(){window.addEventListener("click",this.clickOther)},watch:{value:{immediate:!0,handler:function(t){this.setValue(t)}}},destroyed:function(){window.removeEventListener("click",this.clickOther)}},i=l,c=(e("725f"),e("2877")),a=Object(c["a"])(i,n,s,!1,null,"cd7b8a5a",null),r=a.exports;r.install=function(t){t.component(r.name,r)};o["default"]=r},"725f":function(t,o,e){"use strict";e("d657")},d657:function(t,o,e){}}]);