Eldropdown.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {};
  2. MWF.xDesktop.requireApp("process.FormDesigner", "Module.$ElElement", null, false);
  3. MWF.xApplication.process.FormDesigner.Module.Eldropdown = MWF.FCEldropdown = new Class({
  4. Extends: MWF.FC$ElElement,
  5. Implements: [Options, Events],
  6. options: {
  7. "style": "default",
  8. "propertyPath": "../x_component_process_FormDesigner/Module/Eldropdown/eldropdown.html"
  9. },
  10. _initModuleType: function(){
  11. this.className = "Eldropdown";
  12. this.moduleType = "element";
  13. this.moduleName = "eldropdown";
  14. },
  15. _createElementHtml: function(){
  16. var html = "<el-dropdown";
  17. html += " :size=\"size\"";
  18. html += " :placement=\"placement\"";
  19. // html += " :disabled=\"disabled\"";
  20. html += " :trigger=\"trigger\"";
  21. html += " :hide-on-click=\"hideOnClick\"";
  22. if( this.json.showButton && this.json.splitButton ){
  23. html += " :split-button=\"splitButton\"";
  24. html += " :type=\"buttonType\"";
  25. }
  26. if (this.json.elProperties){
  27. Object.keys(this.json.elProperties).forEach(function(k){
  28. if (this.json.elProperties[k]) html += " "+k+"=\""+this.json.elProperties[k]+"\"";
  29. }, this);
  30. }
  31. html += " :style=\"tmpElStyles\">";
  32. if (this.json.vueSlot){
  33. html += this.json.vueSlot;
  34. }else{
  35. html += this.getButtonHtml();
  36. }
  37. html += "<el-dropdown-menu slot=\"dropdown\">";
  38. html += " <el-dropdown-item></el-dropdown-item>";
  39. html += "</el-dropdown-menu>";
  40. html += "</el-dropdown>";
  41. return html;
  42. },
  43. _createCopyNode: function(){
  44. this.copyNode = new Element("div", {
  45. "styles": this.css.moduleNodeShow
  46. });
  47. this.copyNode.addEvent("selectstart", function(){
  48. return false;
  49. });
  50. },
  51. _getCopyNode: function(){
  52. if (!this.copyNode) this._createCopyNode();
  53. this.copyNode.setStyle("display", "inline-block");
  54. return this.copyNode;
  55. },
  56. getButtonHtml: function(){
  57. if( this.json.showButton ){
  58. if( this.json.splitButton ) {
  59. return this.json.text || this.json.id;
  60. }else{
  61. return "<el-button type=\""+this.json.buttonType+"\" size=\""+this.json.size+"\">"+ ( this.json.text || this.json.id ) +
  62. "<i class=\"el-icon-arrow-down el-icon--right\"></i>"+
  63. "</el-button>";
  64. }
  65. }else{
  66. return " <span class=\"el-dropdown-link\">"+ ( this.json.text || this.json.id ) +
  67. "<i class=\"el-icon-arrow-down el-icon--right\"></i>"+
  68. "</span>";
  69. }
  70. },
  71. _setEditStyle_custom: function(name){
  72. switch (name){
  73. case "name": this.setPropertyName(); break;
  74. case "id":
  75. case "text":
  76. case "size":
  77. case "buttonType":
  78. case "showButton":
  79. case "splitButton":
  80. case "vueSlot":
  81. if (this.isPropertyLoaded && !this.reseting) {
  82. if (this.vm) this.resetElement();
  83. }
  84. break;
  85. default: break;
  86. }
  87. },
  88. setPropertyName: function(){
  89. // if (this.json.name){
  90. // var input = this.node.getElement("input");
  91. // if (input) input.set("value", this.json.name);
  92. // }
  93. },
  94. setPropertyId: function(){
  95. // if (!this.json.name){
  96. // var input = this.node.getElement("input");
  97. // if (input) input.set("value", this.json.id);
  98. // }
  99. }
  100. });