修改相对定位元素bug

ymm-tech · Dec 4, 2019 · 1084bb9 · 1084bb9
1 parent c4356bd
commit 1084bb9
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 28 deletions.
diff --git a/src/components/Selecter.vue b/src/components/Selecter.vue
@@ -120,7 +120,7 @@
     border: 1px solid #59c7f9;
     border-radius: 12px;
     display: block;
-    opacity: 0.2;
+    opacity: 0.5;
 
     &:hover {
       opacity: 1;
@@ -573,12 +573,13 @@
         }
         // 记录位置的6个属性，有那些属性是设置过值的。
 
-        if (!isUnset(top)) style.top = top + 'px'
-        if (!isUnset(left)) style.left = left + 'px'
-        if (!isUnset(bottom)) style.bottom = bottom + 'px'
-        if (!isUnset(right)) style.right = right + 'px'
-        if (!isUnset(width)) style.width = width + 'px'
-        if (!isUnset(height)) style.height = height + 'px'
+        if (!isUnset(top)) this.$set(style, 'top', top + 'px')
+        if (!isUnset(left)) this.$set(style, 'left', left + 'px')
+        if (!isUnset(bottom)) this.$set(style, 'bottom', bottom + 'px')
+        if (!isUnset(right)) this.$set(style, 'right', right + 'px')
+        if (!isUnset(width)) this.$set(style, 'width', width + 'px')
+        if (!isUnset(height)) this.$set(style, 'height', height + 'px')
+
 
 
         function ratioWH (w, h, r) {
@@ -589,6 +590,9 @@
       },
       setRectInfo (directions, isUnSetArray) {
         var style = this.$parent.nodeInfo.style
+        if (style.position == 'relative') {
+          return
+        }
         let selfRect = getNoRotateBoundingClientRect(window.$vue.$el)
         let parentRect = null
         if (style.position == 'fixed') {

diff --git a/src/components/style/Base.vue b/src/components/style/Base.vue
@@ -9,7 +9,7 @@
           <el-form-item label="高">
             <num :styleAttr.sync="info.height"></num>
           </el-form-item>
-          <editor-position v-show="!isRootNode" :info="info"></editor-position>
+            <editor-position v-if="isShowPosiition" :info="info"></editor-position>
           <el-form-item label="透明度">
             <div class="sliderWarp">
             <el-slider class="slider" size="mini" :min="0" :max="1" v-model.number="info.opacity" :step="0.1"></el-slider>
@@ -85,7 +85,7 @@
             <el-input class="input" type='number' :min="0" :max="25" :step='1' size="mini" v-model.number="style.padding" placeholder="0-25"></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="外边距" v-if="hasShowMargin">
+          <el-form-item label="外边距" v-if="!fixedOrAbsolute">
             <div class="sliderWarp">
             <el-slider class="slider" size="mini" :min="0" :max="25" v-model.number="style.margin" :step="1"></el-slider>
             <el-input class="input" type='number' :min="0" :max="25" :step='1' size="mini" v-model.number="style.margin" placeholder="0-25"></el-input>
@@ -143,7 +143,7 @@
     },
     data: function () {
       return {
-        isRootNode: true,
+        isShowPosiition: false,
         activeNames: ['size', 'border', 'align', 'background', 'border', 'boxShadow', 'margin', 'text'],
         style: {
           borderStyle: 'none',
@@ -161,11 +161,11 @@
       }
     },
     computed: {
-      hasShowMargin () {
+      fixedOrAbsolute () {
         if (this.info.position && (this.info.position == 'fixed' || this.info.position == 'absolute')) {
-          return false
-        } else {
           return true
+        } else {
+          return false
         }
       }
     },
@@ -229,14 +229,14 @@
         deep: true,
         handler: function (newVal, oldVal) {
           if (newVal.opacity === '') newVal.opacity = 0
-          this.isRootNode = window.$vue && window.$vue.isRootNode
+          this.isShowPosiition = window.$vue && !window.$vue.isRootNode && this.fixedOrAbsolute
           this.makeCssCode()
         },
         immediate: true
       },
     },
     mounted: function () {
-      this.isRootNode = window.$vue && window.$vue.isRootNode
+      this.isShowPosiition = window.$vue && !window.$vue.isRootNode && this.fixedOrAbsolute
       this.style = {
         borderWidth: this.info['border-width'] ? parseFloat(this.info['border-width']) : 0,
         borderRadius: this.info['border-radius'] ? parseFloat(this.info['border-radius']) : 0,

diff --git a/src/components/style/Position.vue b/src/components/style/Position.vue
@@ -14,7 +14,7 @@
             class="input top-input small"
             size="mini"
             tabindex="-1"
-            :value="info.top"
+            v-model="info.top"
             v-show="notEmpty(info.top)"
             title="本节点顶边和父节点顶边的距离，可输入负值，默认单位为像素（px），也可以输入百分比，根据父节点 height 和百分比数值计算出距离"
           ></el-input>
@@ -31,7 +31,7 @@
             >左</el-checkbox>
             <el-input
               v-show="notEmpty(info.left)"
-              :value="info.left"
+              v-model="info.left"
               class="input bottom-input small"
               tabindex="-1"
               size="mini"
@@ -83,7 +83,7 @@
               tabindex="-1"
               size="mini"
               v-show="notEmpty(info.right)"
-              :value="info.right"
+              v-model="info.right"
               title="本节点右边和父节点右边的距离，可输入负值，默认单位为像素（px），也可以输入百分比，根据父节点 width 和百分比数值计算出距离"
               style=""
             ></el-input>
@@ -103,7 +103,7 @@
             size="mini"
             tabindex="-1"
             v-show="notEmpty(info.bottom)"
-            :value="info.bottom"
+            v-model="info.bottom"
             title="本节点底边和父节点底边的距离，可输入负值，默认单位为像素（px），也可以输入百分比，根据父节点 height 和百分比数值计算出距离"
           ></el-input>
         </div>

diff --git a/src/config/local.js b/src/config/local.js
@@ -1,16 +1,16 @@
 /*
-* 在本地开发调试时，三个web项目和一个node项目都是在独立运行的
-* 因此需要配置每个服务的本地访问地址，以使能互相调用/请求
-* admin、editor、view、api 四个服务的默认端口号分别为
-* 8567、8565、8566、7051，因此默认配置如下
-* 如果还希望像先前只启动本项目（demo 模式）进行体验，将 API_PATH
-* 设置为 ‘https://godspen.ymm56.com/api/' 即可
-*/
+ * 在本地开发调试时，三个web项目和一个node项目都是在独立运行的
+ * 因此需要配置每个服务的本地访问地址，以使能互相调用/请求
+ * admin、editor、view、api 四个服务的默认端口号分别为
+ * 8567、8565、8566、7051，因此默认配置如下
+ * 如果还希望像先前只启动本项目（demo 模式）进行体验，将 API_PATH
+ * 设置为 ‘https://godspen.ymm56.com/api/' 即可
+ */
 
 module.exports = {
   EDITOR_PATH: 'http://127.0.0.1:8565/', // 编辑器访问地址
   VIEW_PATH: 'http://127.0.0.1:8566/', // 页面客户端访问地址
   ADMIN_PATH: 'http://127.0.0.1:8567/', // 管理后台访问地址
-  API_PATH: 'http://127.0.0.1:7051/api', // api 服务端访问地址
-  // API_PATH: 'https://godspen.ymm56.com/api/', // 启动demo模式，使用官方 api 服务
+  // API_PATH: 'http://127.0.0.1:7051/api', // api 服务端访问地址
+  API_PATH: 'https://godspen.ymm56.com/api/', // 启动demo模式，使用官方 api 服务
 }