前端开发一些小坑1
-
- 一、vue3中设置css样式+scoped属性后css失效
- 二、设置样式居中
- 三、element-plus自定义按钮颜色
- 四、使用鼠标滚动时,css背景不固定且跟随内容进行滚动
- 五、修改element-UI框架中Message Box消息弹出框中按钮的样式
- 六、element-UI框架中自封装的dialog无法弹出问题(Vue项目中)
- 七、使用i18n翻译中英文,需确保前后端的字段一致(Vue项目中)
- 八、前后端交互注意事项
- 九、使用Element-UI中的element-variables.scss
- 十、使用el-table表格时,在模板渲染中之间使用tableData.length,而在js中使用tableData.value.length(vue3的使用数据需加.value)
一、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图标的类型
}
);
})