fix default img can't change width and height

[chilingling]

English | 简体中文

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)
• Built its own designer, fully self-validated

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

Background and solution

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

[lizhijie429]

不应该直接删除行内样式的数据去处理这个bug。#190

[chilingling]

不应该直接删除行内样式的数据去处理这个bug。#190

现在样式面板快捷编辑样式不会写入到行内样式，而是写入到全局样式的 class 类名中，这更符合我们日常编码的习惯。（后续我们更新到文档中）

写入行内样式生成的代码：

<template>
  <div
    style="display: flex; align-items: center;"
  >
  </div>
</template>

写入到全局样式类名中生成的代码

<template>
  <div class="div-test">
  </div>
</template>

<style scoped>
  .div-test {
    display: flex;
    align-items: center;
  }
</style>

如果需要手动更新行内样式，需要手动点击编辑行内样式按钮弹出代码编辑器手动编辑代码。

当前的问题是，内置 img 组件默认写入了行内样式，用户在样式面板，直接输入宽度，会自动生成类名和样式，写入到全局样式中，但是行内样式优先级较高，所以给用户造成了 bug 的假象。
@lizhijie429

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Should not directly delete inline style data to handle this bug. #190

Now the style panel shortcut editing style will not be written to the inline style, but will be written to the class name of the global style, which is more in line with our daily coding habits. (We will update the document later)

Write the code generated by inline styles:

<template>
  <div
    style="display: flex; align-items: center;"
  >
  </div>
</template>

Write the generated code into the global style class name

<template>
  <div class="div-test">
  </div>
</template>

<style scoped>
  .div-test {
    display: flex;
    align-items: center;
  }
</style>

If you need to manually update the inline style, you need to manually click the Edit Inline Style button to pop up the code editor and edit the code manually.

The current problem is that the built-in img component has inline styles written by default. If the user directly enters the width in the style panel, the class name and style will be automatically generated and written into the global style. However, the inline style has a higher priority, so it causes problems for the user. The illusion of a bug.
@lizhijie429

[lizhijie429]

这一块建议还是兼容处理。毕竟系统是支持行内样式的，也支持默认带行内样式。

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

It is recommended that this issue be handled in a compatible manner.

[chilingling]

这一块建议还是兼容处理。毕竟系统是支持行内样式的，也支持默认带行内样式。

我们支持行内样式，只是变成了需要手动编码的形式支持

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

It is recommended to handle this issue with compatibility. After all, the system supports inline styles and also supports inline styles by default.

We support inline styles, it just becomes a formal support that requires manual coding

[lizhijie429]

我们支持行内样式，只是变成了需要手动编码的形式支持

理解你的意思，如果我既写了行内样式，可能下次编辑的时候又去用属性面板设置，对于用户来说，我这次设置的属性没有生效依旧会认为是bug。本身在代码层面就可以避免这个问题的，为什么不去做呢，对吧。

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

We support inline styles, but it just becomes a form of support that requires manual coding

I understand what you mean. If I write an inline style, I may use the property panel to set it the next time I edit. For users, if the properties I set this time do not take effect, it will still be considered a bug. This problem can be avoided at the code level itself, so why not do it, right?

[chilingling]

我们支持行内样式，只是变成了需要手动编码的形式支持

理解你的意思，如果我既写了行内样式，可能下次编辑的时候又去用属性面板设置，对于用户来说，我这次设置的属性没有生效依旧会认为是bug。本身在代码层面就可以避免这个问题的，为什么不去做呢，对吧。

同时写入 class 样式和 行内样式会造成歧义，以及代码的冗余。
比如，用户在样式面板编辑了 display 和背景色，会生成一下代码：

<template>
  <div style="display: flex; background-color: red;" class="div-test">
  </div>
</template>

<style scoped>
.div-test {
  display: flex;
  background-color: red;
}
</style>

以上的代码其实不符合我们日常的编码习惯。

第二个就是，如果用户手动编辑了行内样式，下一次就应该在行内样式去手动编辑。不会找不到样式。对于一些对 css 不怎么熟悉的小白来说，直接在样式面板编辑样式后，下一次还是会在样式面板编辑。

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

We support inline styles, but it just becomes a form of support that requires manual coding.

I understand what you mean. If I write inline styles, I may use the property panel to set them the next time I edit. For users, if the properties I set this time do not take effect, it will still be considered a bug. This problem can be avoided at the code level itself, so why not do it, right?

Writing class styles and inline styles at the same time will cause ambiguity and redundant code.
For example, if the user edits the display and background color in the style panel, the following code will be generated:

<template>
  <div style="display: flex; background-color: red;" class="div-test">
  </div>
</template>

<style scoped>
.div-test {
  display: flex;
  background-color: red;
}
</style>

The above code actually does not conform to our daily coding habits.

The second is that if the user manually edits the inline style, he should manually edit the inline style next time. The style will not be found. For some novices who are not very familiar with CSS, after editing the style directly in the style panel, they will still edit it in the style panel next time.

[wenmine]

LGTM