前端开发一些小坑1
一、vue3中设置css样式+scoped属性后css失效
- 具体问题：style标签中添加scoped属性css样式失效
<style lang="scss" scoped>
// 添加::v-deep即可解决
::v-deep.el-card {
}
</style>
二、设置样式居中
- 设置版心：占屏幕多少（根据屏幕自适应）
- 设置布局：具体的需根据计算（有UI图是最好的，若没有则自己根据屏幕去计算）
三、element-plus自定义按钮颜色
<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>
- 效果图如下：
四、使用鼠标滚动时，css背景不固定且跟随内容进行滚动
- css中浮动高度塌陷问题：
.all {
width: 100%;
height: 100%;
background-image: red;
overflow: auto;
}
overflow共有5个属性：
- overflow: auto; 内容会被修剪，超出设置的宽高后会出现滚动条
- overflow: scroll; 内容会被修剪，无论内容是否超出都会出现滚动条
- overflow: visible; 默认属性，内容不会被修剪，内容会出现在元素框外面
- overflow: hidden; 内容会被修剪，多余的内容会被隐藏
- overflow: inherit; 会继承父元素的overflow值
- 总结：或者可以使用监听滚动高度，当超过一定高度时添加背景颜色
五、修改element-UI框架中Message Box消息弹出框中按钮的样式
<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>
- 效果如下图所示：
若还需修改其他内容可参考element-UI框架给出的MessageBox 配置项
六、element-UI框架中自封装的dialog无法弹出问题（Vue项目中）
- 权限问题：看封装的dialog组件是否有权限限制（是否封装在src下的components中，以及在全局使用时是否全局注册了，组件的正确引用）
- 是否放在table或table-column中：dialog是不能放在table中的
- 是否使用了v-model：可改用:visible形式
七、使用i18n翻译中英文，需确保前后端的字段一致（Vue项目中）
- src - constants下的enum.ts：这里是i18n的入口，若与后端字段对应不上则无论中英文都翻译不出来（定义字段时考虑语法，例如前端是否能出现big-big这种写法，但后端能用，所以定义字段时需要前后端商议）
// 这里定义的时候尽量与后端保持一致，避免出错
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 - locales下的en.ts：这里才是前端页面所需要展示的英文名
export default {
Sl:{
// 这里传递的是big = 'big'
big: 'big',
// 这里传递的是small = 'small'
small: 'small',
// 这里传递的是Big = 'Big'
// Big: 'Big',
// 这里传递的是Small = 'Small'
// Small: 'Small'
},
}
- src - locales下的zh.ts：这里才是前端页面所需要展示的中文名
export default {
Sl:{
// 这里传递的是big = '大的'
big: '大的',
// 这里传递的是small = '小的'
small: '小的'
// 这里传递的是Big = '大的'
// Big: '大的',
// 这里传递的是Small = '小的'
// Small: '小的'
},
}
八、前后端交互注意事项
总结：
- 前端调用后端接口时其接口要与后端大小写保持一致
- 前端定义了一个接口类，并在页面中进行调用时，此时要保证接口类的参数顺序要与页面中参数顺序保持一致
- 若有一不符合则接口将会报错
- 前端调用后端接口时，尽量先使用接口测试工具先测试接口是否能通
若不能通，则考虑参数或环境是否是对的，若都对了，则反馈给后端
九、使用Element-UI中的element-variables.scss
- 需求分析：符合某些条件后对某些行进行颜色区分
<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>
注意：不要在style中添加scoped属性，否则样式不会生效