fix(stylePanel): fix setting border-radius could not work on first time

opentiny · May 14, 2024 · 3bea516 · 3bea516
1 parent 899d616
commit 3bea516
Showing 1 changed file with 12 additions and 12 deletions.
diff --git a/packages/settings/styles/src/components/border/BorderGroup.vue b/packages/settings/styles/src/components/border/BorderGroup.vue
@@ -290,9 +290,7 @@ export default {
     const state = reactive({
       showModal: false,
       activedRadius: RADIUS_SETTING.Single,
-      activedBorder: BORDER_SETTING.All,
-      // 标记是否从 props 来的更新
-      isUpdateFromProps: false
+      activedBorder: BORDER_SETTING.All
     })
 
     const { setPosition } = useModal()
@@ -336,12 +334,13 @@ export default {
     watch(
       () => props.style,
       () => {
-        state.isUpdateFromProps = true
-        borderRadius.BorderRadius = parseInt(props.style.borderRadius || 0)
-        borderRadius.BorderTopLeftRadius = parseInt(props.style.borderTopLeftRadius || 0)
-        borderRadius.BorderTopRightRadius = parseInt(props.style.borderTopRightRadius || 0)
-        borderRadius.BorderBottomLeftRadius = parseInt(props.style.borderBottomLeftRadius || 0)
-        borderRadius.BorderBottomRightRadius = parseInt(props.style.borderBottomRightRadius || 0)
+        borderRadius.BorderRadius = parseInt(props.style[BORDER_RADIUS_PROPERTY.BorderRadius] || 0)
+        borderRadius.BorderTopLeftRadius = parseInt(props.style[BORDER_RADIUS_PROPERTY.BorderTopLeftRadius] || 0)
+        borderRadius.BorderTopRightRadius = parseInt(props.style[BORDER_RADIUS_PROPERTY.BorderTopRightRadius] || 0)
+        borderRadius.BorderBottomLeftRadius = parseInt(props.style[BORDER_RADIUS_PROPERTY.BorderBottomLeftRadius] || 0)
+        borderRadius.BorderBottomRightRadius = parseInt(
+          props.style[BORDER_RADIUS_PROPERTY.BorderBottomRightRadius] || 0
+        )
       },
       { immediate: true }
     )
@@ -386,12 +385,13 @@ export default {
        * 1. 用户在 monacoEditor 更新了样式 border-radius: 9px 然后保存，该组件接收并同步改值
        * 2. 用户在 monacoEditor 删除了 border-radius: 9px 的样式，然后 watch 函数（props.style），重新计算得到值 0
        * 3. 0 更新后，会再触发改函数更新，导致自动加上了 border-radius: 0px 的样式
-       * 所以从 props 来的更新不需要再调用一遍 updateStyle（更新 props 数据）
+       * 所以从如果当前值为 0 且  props.style[BORDER_RADIUS_PROPERTY.BorderRadius] 不存在值，不需要触发更新
        */
-      if (state.isUpdateFromProps) {
-        state.isUpdateFromProps = false
+
+      if (!value && !props.style[BORDER_RADIUS_PROPERTY.BorderRadius]) {
         return
       }
+
       borderRadius.BorderRadius = value
 
       updateStyle({