@liuzengwei/element-ui 2.15.5-xn.51 → 2.15.5-xn.52

package/lib/drawer.js

@@ -218,7 +218,9 @@ var render = function() {
               expression: "visible"
             }
           ],
-          staticClass: "el-drawer__wrapper",
+          class: _vm.referenceMode
+            ? "el-drawer__wrapper-reference"
+            : "el-drawer__wrapper",
           attrs: { tabindex: "-1" }
         },
         [
@@ -226,7 +228,10 @@ var render = function() {
             "div",
             {
               staticClass: "el-drawer__container",
-              class: _vm.visible && "el-drawer__open",
+              class: [
+                _vm.visible && "el-drawer__open",
+                _vm.referenceMode && "el-drawer__reference-mode"
+              ],
               attrs: { role: "document", tabindex: "-1" },
               on: {
                 click: function($event) {
@@ -243,10 +248,12 @@ var render = function() {
                 {
                   ref: "drawer",
                   staticClass: "el-drawer",
-                  class: [_vm.direction, _vm.customClass],
-                  style: _vm.isHorizontal
-                    ? "width: " + _vm.drawerSize
-                    : "height: " + _vm.drawerSize,
+                  class: [
+                    _vm.effectiveDirection,
+                    _vm.customClass,
+                    _vm.referenceMode && "is-reference"
+                  ],
+                  style: _vm.drawerStyle,
                   attrs: {
                     "aria-modal": "true",
                     "aria-labelledby": "el-drawer__title",
@@ -327,6 +334,8 @@ var emitter_ = __webpack_require__(4);
 var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
 
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/drawer/src/main.vue?vue&type=script&lang=js&
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 //
 //
 //
@@ -439,6 +448,21 @@ var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
     withHeader: {
       type: Boolean,
       default: true
+    },
+    reference: {
+      type: [String, Object],
+      default: null
+    },
+    placement: {
+      type: String,
+      default: 'right',
+      validator: function validator(val) {
+        return ['top', 'bottom', 'left', 'right'].indexOf(val) !== -1;
+      }
+    },
+    offset: {
+      type: Number,
+      default: 0
     }
   },
   computed: {
@@ -447,12 +471,42 @@ var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
     },
     drawerSize: function drawerSize() {
       return typeof this.size === 'number' ? this.size + 'px' : this.size;
+    },
+    referenceMode: function referenceMode() {
+      return !!this.reference;
+    },
+    effectiveDirection: function effectiveDirection() {
+      // 在 reference 模式下，根据 placement 映射到对应的 direction
+      if (this.referenceMode) {
+        var placementToDirection = {
+          'top': 'btt',
+          'bottom': 'ttb',
+          'left': 'ltr',
+          'right': 'rtl'
+        };
+        return placementToDirection[this.placement] || 'rtl';
+      }
+      return this.direction;
+    },
+    drawerStyle: function drawerStyle() {
+      if (this.referenceMode) {
+        var style = _extends({}, this.position);
+        if (this.placement === 'left' || this.placement === 'right') {
+          style.width = this.drawerSize;
+        } else {
+          style.height = this.drawerSize;
+        }
+        return style;
+      } else {
+        return this.isHorizontal ? 'width: ' + this.drawerSize : 'height: ' + this.drawerSize;
+      }
     }
   },
   data: function data() {
     return {
       closed: false,
-      prevActiveElement: null
+      prevActiveElement: null,
+      position: {}
     };
   },
 
@@ -463,10 +517,20 @@ var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
       if (val) {
         this.closed = false;
         this.$emit('open');
-        if (this.appendToBody) {
+        if (this.referenceMode) {
+          var referenceEl = this.getReferenceElement();
+          if (referenceEl) {
+            referenceEl.appendChild(this.$el);
+          }
+        } else if (this.appendToBody) {
           document.body.appendChild(this.$el);
         }
         this.prevActiveElement = document.activeElement;
+        if (this.referenceMode) {
+          this.$nextTick(function () {
+            _this.updatePosition();
+          });
+        }
       } else {
         if (!this.closed) {
           this.$emit('close');
@@ -516,22 +580,106 @@ var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
       // pressing `ESC` will call this method, and also close the drawer.
       // This method also calls `beforeClose` if there was one.
       this.closeDrawer();
+    },
+    getReferenceElement: function getReferenceElement() {
+      if (typeof this.reference === 'string') {
+        return document.querySelector(this.reference);
+      } else if (this.reference && this.reference.$el) {
+        return this.reference.$el;
+      } else {
+        return this.reference;
+      }
+    },
+    updatePosition: function updatePosition() {
+      if (!this.referenceMode) return;
+
+      var referenceEl = this.getReferenceElement();
+      if (!referenceEl) {
+        console.warn('[ElDrawer] Reference element not found');
+        return;
+      }
+
+      // 确保参考元素有 position 样式
+      var computedStyle = window.getComputedStyle(referenceEl);
+      if (computedStyle.position === 'static') {
+        referenceEl.style.position = 'relative';
+      }
+
+      var placement = this.placement,
+          offset = this.offset;
+
+      var position = {};
+
+      switch (placement) {
+        case 'top':
+          position.left = '0';
+          position.bottom = offset + 'px';
+          position.top = 'auto';
+          position.right = '0';
+          break;
+        case 'bottom':
+          position.left = '0';
+          position.top = offset + 'px';
+          position.bottom = 'auto';
+          position.right = '0';
+          break;
+        case 'left':
+          position.top = '0';
+          position.right = 'auto';
+          position.left = offset + 'px';
+          position.bottom = '0';
+          break;
+        case 'right':
+          position.top = '0';
+          position.left = 'auto';
+          position.right = offset + 'px';
+          position.bottom = '0';
+          break;
+      }
+
+      this.position = position;
+    },
+    handleScroll: function handleScroll() {
+      if (this.referenceMode && this.visible) {
+        this.updatePosition();
+      }
+    },
+    handleResize: function handleResize() {
+      if (this.referenceMode && this.visible) {
+        this.updatePosition();
+      }
     }
   },
   mounted: function mounted() {
     if (this.visible) {
       this.rendered = true;
       this.open();
-      if (this.appendToBody) {
+      if (this.referenceMode) {
+        var referenceEl = this.getReferenceElement();
+        if (referenceEl) {
+          referenceEl.appendChild(this.$el);
+        }
+      } else if (this.appendToBody) {
         document.body.appendChild(this.$el);
       }
     }
+    if (this.referenceMode) {
+      window.addEventListener('scroll', this.handleScroll, true);
+      window.addEventListener('resize', this.handleResize);
+    }
   },
   destroyed: function destroyed() {
     // if appendToBody is true, remove DOM node after destroy
     if (this.appendToBody && this.$el && this.$el.parentNode) {
       this.$el.parentNode.removeChild(this.$el);
     }
+    if (this.referenceMode && this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+    }
+    if (this.referenceMode) {
+      window.removeEventListener('scroll', this.handleScroll, true);
+      window.removeEventListener('resize', this.handleResize);
+    }
   }
 });
 // CONCATENATED MODULE: ./packages/drawer/src/main.vue?vue&type=script&lang=js&

package/lib/element-ui.common.js

@@ -41937,7 +41937,9 @@ var mainvue_type_template_id_a4885264_render = function() {
               expression: "visible"
             }
           ],
-          staticClass: "el-drawer__wrapper",
+          class: _vm.referenceMode
+            ? "el-drawer__wrapper-reference"
+            : "el-drawer__wrapper",
           attrs: { tabindex: "-1" }
         },
         [
@@ -41945,7 +41947,10 @@ var mainvue_type_template_id_a4885264_render = function() {
             "div",
             {
               staticClass: "el-drawer__container",
-              class: _vm.visible && "el-drawer__open",
+              class: [
+                _vm.visible && "el-drawer__open",
+                _vm.referenceMode && "el-drawer__reference-mode"
+              ],
               attrs: { role: "document", tabindex: "-1" },
               on: {
                 click: function($event) {
@@ -41962,10 +41967,12 @@ var mainvue_type_template_id_a4885264_render = function() {
                 {
                   ref: "drawer",
                   staticClass: "el-drawer",
-                  class: [_vm.direction, _vm.customClass],
-                  style: _vm.isHorizontal
-                    ? "width: " + _vm.drawerSize
-                    : "height: " + _vm.drawerSize,
+                  class: [
+                    _vm.effectiveDirection,
+                    _vm.customClass,
+                    _vm.referenceMode && "is-reference"
+                  ],
+                  style: _vm.drawerStyle,
                   attrs: {
                     "aria-modal": "true",
                     "aria-labelledby": "el-drawer__title",
@@ -42038,6 +42045,8 @@ mainvue_type_template_id_a4885264_render._withStripped = true
 // CONCATENATED MODULE: ./packages/drawer/src/main.vue?vue&type=template&id=a4885264&
 
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/drawer/src/main.vue?vue&type=script&lang=js&
+var mainvue_type_script_lang_js_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 //
 //
 //
@@ -42150,6 +42159,21 @@ mainvue_type_template_id_a4885264_render._withStripped = true
     withHeader: {
       type: Boolean,
       default: true
+    },
+    reference: {
+      type: [String, Object],
+      default: null
+    },
+    placement: {
+      type: String,
+      default: 'right',
+      validator: function validator(val) {
+        return ['top', 'bottom', 'left', 'right'].indexOf(val) !== -1;
+      }
+    },
+    offset: {
+      type: Number,
+      default: 0
     }
   },
   computed: {
@@ -42158,12 +42182,42 @@ mainvue_type_template_id_a4885264_render._withStripped = true
     },
     drawerSize: function drawerSize() {
       return typeof this.size === 'number' ? this.size + 'px' : this.size;
+    },
+    referenceMode: function referenceMode() {
+      return !!this.reference;
+    },
+    effectiveDirection: function effectiveDirection() {
+      // 在 reference 模式下，根据 placement 映射到对应的 direction
+      if (this.referenceMode) {
+        var placementToDirection = {
+          'top': 'btt',
+          'bottom': 'ttb',
+          'left': 'ltr',
+          'right': 'rtl'
+        };
+        return placementToDirection[this.placement] || 'rtl';
+      }
+      return this.direction;
+    },
+    drawerStyle: function drawerStyle() {
+      if (this.referenceMode) {
+        var style = mainvue_type_script_lang_js_extends({}, this.position);
+        if (this.placement === 'left' || this.placement === 'right') {
+          style.width = this.drawerSize;
+        } else {
+          style.height = this.drawerSize;
+        }
+        return style;
+      } else {
+        return this.isHorizontal ? 'width: ' + this.drawerSize : 'height: ' + this.drawerSize;
+      }
     }
   },
   data: function data() {
     return {
       closed: false,
-      prevActiveElement: null
+      prevActiveElement: null,
+      position: {}
     };
   },
 
@@ -42174,10 +42228,20 @@ mainvue_type_template_id_a4885264_render._withStripped = true
       if (val) {
         this.closed = false;
         this.$emit('open');
-        if (this.appendToBody) {
+        if (this.referenceMode) {
+          var referenceEl = this.getReferenceElement();
+          if (referenceEl) {
+            referenceEl.appendChild(this.$el);
+          }
+        } else if (this.appendToBody) {
           document.body.appendChild(this.$el);
         }
         this.prevActiveElement = document.activeElement;
+        if (this.referenceMode) {
+          this.$nextTick(function () {
+            _this.updatePosition();
+          });
+        }
       } else {
         if (!this.closed) {
           this.$emit('close');
@@ -42227,22 +42291,106 @@ mainvue_type_template_id_a4885264_render._withStripped = true
       // pressing `ESC` will call this method, and also close the drawer.
       // This method also calls `beforeClose` if there was one.
       this.closeDrawer();
+    },
+    getReferenceElement: function getReferenceElement() {
+      if (typeof this.reference === 'string') {
+        return document.querySelector(this.reference);
+      } else if (this.reference && this.reference.$el) {
+        return this.reference.$el;
+      } else {
+        return this.reference;
+      }
+    },
+    updatePosition: function updatePosition() {
+      if (!this.referenceMode) return;
+
+      var referenceEl = this.getReferenceElement();
+      if (!referenceEl) {
+        console.warn('[ElDrawer] Reference element not found');
+        return;
+      }
+
+      // 确保参考元素有 position 样式
+      var computedStyle = window.getComputedStyle(referenceEl);
+      if (computedStyle.position === 'static') {
+        referenceEl.style.position = 'relative';
+      }
+
+      var placement = this.placement,
+          offset = this.offset;
+
+      var position = {};
+
+      switch (placement) {
+        case 'top':
+          position.left = '0';
+          position.bottom = offset + 'px';
+          position.top = 'auto';
+          position.right = '0';
+          break;
+        case 'bottom':
+          position.left = '0';
+          position.top = offset + 'px';
+          position.bottom = 'auto';
+          position.right = '0';
+          break;
+        case 'left':
+          position.top = '0';
+          position.right = 'auto';
+          position.left = offset + 'px';
+          position.bottom = '0';
+          break;
+        case 'right':
+          position.top = '0';
+          position.left = 'auto';
+          position.right = offset + 'px';
+          position.bottom = '0';
+          break;
+      }
+
+      this.position = position;
+    },
+    handleScroll: function handleScroll() {
+      if (this.referenceMode && this.visible) {
+        this.updatePosition();
+      }
+    },
+    handleResize: function handleResize() {
+      if (this.referenceMode && this.visible) {
+        this.updatePosition();
+      }
     }
   },
   mounted: function mounted() {
     if (this.visible) {
       this.rendered = true;
       this.open();
-      if (this.appendToBody) {
+      if (this.referenceMode) {
+        var referenceEl = this.getReferenceElement();
+        if (referenceEl) {
+          referenceEl.appendChild(this.$el);
+        }
+      } else if (this.appendToBody) {
         document.body.appendChild(this.$el);
       }
     }
+    if (this.referenceMode) {
+      window.addEventListener('scroll', this.handleScroll, true);
+      window.addEventListener('resize', this.handleResize);
+    }
   },
   destroyed: function destroyed() {
     // if appendToBody is true, remove DOM node after destroy
     if (this.appendToBody && this.$el && this.$el.parentNode) {
       this.$el.parentNode.removeChild(this.$el);
     }
+    if (this.referenceMode && this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+    }
+    if (this.referenceMode) {
+      window.removeEventListener('scroll', this.handleScroll, true);
+      window.removeEventListener('resize', this.handleResize);
+    }
   }
 });
 // CONCATENATED MODULE: ./packages/drawer/src/main.vue?vue&type=script&lang=js&
@@ -49380,7 +49528,7 @@ function useCascaderAreaData() {
   });
 }
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/area-picker/src/main.vue?vue&type=script&lang=js&
-var mainvue_type_script_lang_js_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var src_mainvue_type_script_lang_js_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 //
 //
@@ -49457,7 +49605,7 @@ var mainvue_type_script_lang_js_extends = Object.assign || function (target) { f
     cascaderProps: function cascaderProps() {
       // 获取外部传入的props配置
       var externalProps = this.props || {};
-      var res = mainvue_type_script_lang_js_extends({
+      var res = src_mainvue_type_script_lang_js_extends({
         // 从组件属性中获取checkStrictly和multiple
         emitPath: false,
         expandTrigger: 'hover',
@@ -49906,7 +50054,7 @@ mainvue_type_template_id_3cb4623f_render._withStripped = true
 // CONCATENATED MODULE: ./packages/trigger/src/main.vue?vue&type=template&id=3cb4623f&
 
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/trigger/src/main.vue?vue&type=script&lang=js&
-var src_mainvue_type_script_lang_js_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var trigger_src_mainvue_type_script_lang_js_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 //
 //
@@ -50154,7 +50302,7 @@ var stop = function stop(e) {
 
   computed: {
     popupStyleComputed: function popupStyleComputed() {
-      var style = src_mainvue_type_script_lang_js_extends({}, this.popupStyle);
+      var style = trigger_src_mainvue_type_script_lang_js_extends({}, this.popupStyle);
 
       if (this.autoFitPopupWidth && this.referenceElm) {
         style.width = this.referenceElm.offsetWidth + 'px';
@@ -51804,7 +51952,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 /* harmony default export */ var src_0 = __webpack_exports__["default"] = ({
-  version: '2.15.5-xn.51',
+  version: '2.15.5-xn.52',
   locale: lib_locale_default.a.use,
   i18n: lib_locale_default.a.i18n,
   install: src_install,