vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件,支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
1 lines • 2.91 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_utils=require("../../tools/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=(0,_vue.defineComponent)({name:"vxeTag",props:{content:[String,Number],color:{type:String,default:"default"},size:{type:String,default:"medium"},closable:{type:Boolean,default:!1},editable:{type:Boolean,default:!1},round:Boolean,tagStyle:{type:String,default:"default"},icon:String,iconSet:{type:String,default:""},align:{type:String,default:"middle"}},emits:["close","update:content","icon-click","edit"],setup:function(t,e){function n(){return new Promise(function(n){t.editable&&!c.editing?(c.editing=!0,(0,_vue.nextTick)(function(){d.value.focus();var e=document.createRange(),t=(e.selectNodeContents(d.value),window.getSelection());null!=t&&t.removeAllRanges(),null!=t&&t.addRange(e),n(!0)})):n(!0)})}function l(){t.editable&&(c.editing&&(o("update:content",d.value.innerText),o("edit",d.value.innerText)),c.editing=!1)}var i=e.slots,o=e.emit,a=_xeUtils.default.uniqueId(),u=["default","outline","flag","dashed","mark","arrow"],c=(0,_vue.reactive)({inited:!1,editing:!1}),r=(0,_vue.ref)(),d=(0,_vue.ref)(),s={refElem:r},f=function(){o("icon-click",{$event:{tag:g}})},g={xID:a,props:t,context:e,reactData:c,getRefMaps:function(){return s}},v={dispatchEvent:function(e,t,n){o(e,Object.assign({$tag:g,$event:n},t))},close:function(e){return new Promise(function(){e.stopPropagation(),o("close",{$event:{tag:g}})})},startEditing:n};Object.assign(g,v);return g.renderVN=function(){var e=["default","info","primary","success","warning","danger","error","perfect"];return(0,_vue.h)("span",{ref:r,class:["vxe-tag",t.editable&&c.editing?"is--editing":"",t.closable?"vxe-tag--closable":"","size--".concat(t.size),"vxe-tag-type--".concat(u.includes(t.tagStyle)?t.tagStyle:"default"),t.round?"is--round":"","vxe-tag-align--".concat(t.align),t.color?e.includes(t.color)?"vxe-tag-color--".concat(t.color):"":"vxe-tag-color--default",{closable:t.closable}],style:e.includes(t.color)?null:{"--tag-color":t.color}},[t.closable?(0,_vue.h)("div",{class:"vxe-tag-close-icon",onClick:function(e){v.dispatchEvent("close",{},e)}},["x"]):null,null!=(e=null==(e=null==i?void 0:i.avatar)?void 0:e.call(i))?e:null,(0,_vue.h)("span",{class:["vxe-tag-content",{"tag-select-none":t.editable}],ref:d,contentEditable:t.editable&&c.editing,onClick:n,onBlur:l,onKeydown:function(e){"Enter"!==e.key&&"Escape"!==e.key&&"Tab"!==e.key||l()}},null!=(e=null==(e=null==i?void 0:i.default)?void 0:e.call(i))?e:(0,_utils.getFuncText)(t.content)),null!=(e=null==(e=null==i?void 0:i.icon)?void 0:e.call(i))?e:t.icon?(0,_vue.h)("i",{class:["vxe-tag--icon",t.iconSet,t.icon],onClick:f}):null])},g},render:function(){return this.renderVN()}});exports.default=_default;