Some pitfalls in front-end development

1. After setting css style + scoped attribute in vue3, css becomes invalid.

• Specific problem: Adding the scoped attribute to the style tag causes the css style to fail.

<style lang="scss" scoped>
// 添加::v-deep即可解决
::v-deep.el-card {
    
    
}
</style>

2. Set the style to center

1. Set the center of the page: how much of the screen it occupies (adaptive according to the screen)
2. Set layout: specific calculations are needed (it is best if there is a UI diagram, if not, you can calculate it yourself based on the screen)

3. element-plus custom button color

<template>
  <el-button type="primary" size="large" @click="priceQuery">查询</el-button>
</template>

<script lang="ts">
  import {
    
    
    computed,
    defineComponent,
    onMounted,
    reactive,
    ref,
    toRefs,
    watch,
    onUpdated,
  } from "vue";


  export default defineComponent({
    
    
    name: "",
    setup() {
    
    
      return {
    
    };
    },
  });
</script>

<style lang="scss" scoped>
  /* 自定义按钮默认颜色：通过type="primary" 进行颜色的改变 */
  .el-button--primary {
    
    
    background-color: #ff6501;
    border-color: #ff6501;
    /* 自定义鼠标悬浮时的颜色 */
    &:hover,
    &:focus {
    
    
      background-color: #ff8434;
      border-color: #ff8434;
    }
  }
</style>

• The renderings are as follows:
  

4. When using the mouse to scroll, the css background is not fixed and scrolls with the content.

• Floating height collapse problem in css:

.all {
    
    
  width: 100%;
  height: 100%;
  background-image: red;
  overflow: auto;
 }

Overflow has 5 attributes:

1. overflow: auto; The content will be trimmed, and a scroll bar will appear after it exceeds the set width and height.
2. overflow: scroll; The content will be trimmed, and a scroll bar will appear regardless of whether the content exceeds the limit.
3. overflow: visible; Default attribute, the content will not be trimmed, the content will appear outside the element box
4. overflow: hidden; content will be trimmed and excess content will be hidden
5. overflow: inherit; will inherit the overflow value of the parent element

• Summary: Or you can use monitoring scroll height and add background color when it exceeds a certain height.

5. Modify the style of the button in the Message Box message pop-up box in the element-UI framework

<template>

</template>

<script lang="ts">
import {
    
    
  onMounted,
  defineComponent,
} from 'vue';
import {
    
     ElMessageBox } from 'element-plus';

export default defineComponent({
    
    
  name: '',
  setup() {
    
    
  

    onMounted(() => {
    
    
      ElMessageBox.alert(
        'text内容',
        {
    
    
          type: 'warning', // 这个是icon图标的类型
          
        }
      );
    });
    return {
    
    };
  },

});
</script>
<style lang="scss" scoped>
// 在这里可以写你想写scoped的样式
</style>
// 注意这里不要加scoped，否则不会生效（注意：这样修改后会影响全局使用了MessageBox的样式，所以每个使用的地方记得将之前的样式修改回去）
<style lang="scss" >
.el-button--primary {
    
    
  background-color: red !important;
  border-color: red !important;
}
.el-button--primary:active {
    
    
  background-color: red;
  border-color: red;
}
.el-message-box__status,
.el-icon-warning {
    
    
  font-size: 33px !important;
}
</style>

• Results as shown below:
  

If you need to modify other content, please refer to the MessageBox configuration items given by the element-UI framework.

6. The self-encapsulated dialog in the element-UI framework cannot pop up (in the Vue project)

• Permission issues: Check whether the encapsulated dialog component has permission restrictions (whether it is encapsulated in components under src, and whether it is globally registered when used globally, and the correct reference of the component)
• Whether to place it in table or table-column: dialog cannot be placed in table
• Whether v-model is used: you can use:visible form instead

7. When using i18n to translate Chinese and English, you need to ensure that the fields on the front and back ends are consistent (in the Vue project)

• enum.ts under src - constants: This is the entrance to i18n. If it does not correspond to the back-end field, it will not be translated in either Chinese or English (consider the syntax when defining the field, such as whether big-big can be written on the front-end. But the backend can be used, so the frontend and backend need to negotiate when defining fields)

// 这里定义的时候尽量与后端保持一致，避免出错
export enum SL{
    
    
  // big  值='值' x = 'x' 这里传的值是x即big（后端是这种传递方式，前端需与之对应）
  big = 'big ',
  // xx = 'x' 这里实际上传的值是xx即Big
  // Big = 'big',
  // small 值='值' x = 'x' 这里传的值是x即big（后端是这种传递方式，前端需与之对应）
  small = 'small',
  // xx = 'x' 这里实际上传的值是xx即Small
  // Small = 'small',
}

• src - en.ts under locales: This is the English name that needs to be displayed on the front-end page

export default {
    
    
  Sl:{
    
    
    // 这里传递的是big = 'big'
    big: 'big',
    // 这里传递的是small = 'small'
    small: 'small',
    // 这里传递的是Big = 'Big'
    // Big: 'Big',
    // 这里传递的是Small = 'Small'
    // Small: 'Small'
  },
}

• src - zh.ts under locales: This is the Chinese name that needs to be displayed on the front-end page

export default {
    
    
  Sl:{
    
    
    // 这里传递的是big = '大的'
    big: '大的',
    // 这里传递的是small = '小的'
    small: '小的'
    // 这里传递的是Big = '大的'
    // Big: '大的',
    // 这里传递的是Small = '小的'
    // Small: '小的'
  },
}

8. Precautions for front-end and back-end interaction

Summarize:

1. When the front end calls the back end interface, its interface must be consistent with the back end's capitalization.
2. When the front end defines an interface class and calls it on the page, it must be ensured that the order of parameters in the interface class is consistent with the order of parameters in the page.
3. If there is any inconsistency, the interface will report an error.
4. When the front-end calls the back-end interface, try to use the interface testing tool to test whether the interface can be passed first
   If it cannot be passed, consider whether the parameters or environment are correct. If both are correct, , then feedback to the backend

9. Use element-variables.scss in Element-UI

• Requirements analysis: Color-differentiate certain rows after meeting certain conditions

<template>
  <table :row-class-name="rowClassName"></table>
</template>

<script lang="ts">
import {
    
     defineComponent, reactive, toRefs } from 'vue';
import {
    
     ListVO } from '@/services/List';

export default defineComponent({
    
    
  name: 'List',
  setup() {
    
    
    const state = reactive<ViewState>({
    
    });

    return {
    
    
      ...toRefs(state),
    };
  },
  methods: {
    
    
    rowClassName({
     
      row }: {
     
      row: ListVO }) {
    
    
      // 这里写具体的业务逻辑
      // 这里是排除为undefined的情况
      if (row.changeValue === undefined) {
    
    
        return '';
      }
      // 符合不为空且总数值在100~499期间的使用low的样式（嵌套多个if不生效时可考虑使用&&）
      if (
        row.changeValue !== null &&
        row.totalNumber > 100 &&
        row.totalNumber < 500
      ) {
    
    
        return 'low';
      }
      // 符合不为空且总数值在 > 500期间的使用high的样式
      else if (row.changeValue !== null && row.totalNumber > 500) {
    
    
        return 'high';
      }
      // 都不匹配的则不使用样式 若还有其他的样式则继续嵌套使用 if - else 即可
      return '';
    },
  },
});
</script>

<style scoped lang="scss">
.middle {
    
    
  display: block;
}
</style>

<style lang="scss">
// 注意：在使用 @import '~@/element-variables.scss';时不要在style中加scoped，若加上了则以下的样式不生效
@import '~@/element-variables.scss';
.high {
    
    
  background-color: rgb(189, 85, 85) !important;
}
.low {
    
    
  background-color: rgb(127, 175, 194) !important;
}
</style>

Note: Do not add the scoped attribute in style, otherwise the style will not take effect