在写网页中遇见的问题

December 22, 2020 2989

1、当text-align：center不能让文本居中时，如果时flex布局可以考虑用 align-items: center让文本垂直居中

2、opacity生成图层导致文本被遮挡

3、vue组件中传入图片的正确方式：

图片路径需要用require是因为当使用webpack打包，不加会导致路径无法识别。

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <div class="" v-for="(icon,index) in icons" :key="index" class="icon">
    <img :src="icon.imgPath" alt="">
    {{icon.name}}
</div>
//js
  props:{
  icons:{
      type:Array,
      required:true,
      define:[{
        "name":"TOP10入口页面",
        "imgPath":"require("../../../assets/icon/icon-inter.png")",
        }
      ]
  }

父组件

1
2
3
4
5
  data() {
    return {
		icons:[{name:'TOP10入口页面',imgPath:require("../../../assets/icon/icon-inter.png")}]
	}
}

4、element需求

动态传入表格数据，包括表头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//子组件
			<el-table :data="this.tableData" >
                <el-table-column v-for="(item,index) in tableLabel" :key="index"
                :label="item.label"  :prop="item.prop" 
                />
            </el-table>
  //js部分，接收参数
             props:{
                 tableData: { // 父组件传递过来的表格数据
                        type: Array,
                        default: []
                    },
                  tableLabel: { // 父组件传递过来的表头数据
                        type: Array,
                        default: () => {
                        return []
                        }
                    },
               }
//父组件
			//在子组件中直接传数据
			<m-statistics-icon :tableData="tableData" :tableLabel="tableLabel"/>
	//js部分，设置数据
			data(){
			return 
			}
                tableData: [{ name: "首页",    data: "3332" },
                { name: "个人中心",    data: "1222" },
                { name: "个人中心",    data: "1222" },
                { name: "首页",    data: "3332" }],
                tableLabel: [{ label: '入口页面', prop: 'name' },
                    { label: '', prop: 'url' },
                    { label: '浏览量', prop: 'data' }],

设置某列的背景色，如下我改变的是第一列的

1
2
3
4
5
6
7
8
9
10
   <el-table :data="this.tableData" height="250" 
   :cell-style="columnStyle">
   //js
     methods:{
       columnStyle({ row, column, rowIndex, columnIndex }) {
                  if (columnIndex ==0) {   //列数的下标
                 return 'background:#F7F8FA'
                   }
               },
}

5、宽度变小导致flex项目布局变化

需要做成一个田字格的表单展示组件，直接使用flex布局会导致当侧边栏展开时，div盒子失去田字布局变成了一行的。这时候只需要设置一个适当的padding值＋flex：1，将盒子内部撑起来并实现自适应布局

6、请求成果后想打印数据，正确的格式：

1
console.log('platform list', res)
查看评论