开发问题 · vue.js

1. /deep/ 无法使用换成::v-deep 注意/deep/后面跟空格(记得scoped) 2. 在iview中使用input组件时官方提供的是< /Input>但是报错,改成< i-input/> 3. 组件命名用AxxBxx这种，路由路径用小写，名字用AxxBxx，类名用小写加中划线 4. 循环对象，删除为空的属性 ~~~ // 删除对象中的空字段 Object.keys(tempData).forEach(function(key) { tempData[key] ? "": delete tempData[key]; }); ~~~ 5 使用rem设置表格高度超出高度出现滚动条 ~~~ .tableStyle { /deep/ .ivu-table-body { height: 22.3rem; width: 100%; } } ~~~ 滚动条样式调整 ~~~ /* 滚动条 */ /deep/ .ivu-table-overflowX::-webkit-scrollbar, /deep/ .ivu-table-overflowY::-webkit-scrollbar { height: 0.5rem; } 　 1、.test::-webkit-scrollbar 定义了滚动条整体的样式； 2、.test::-webkit-scrollbar-thumb 滑块部分；　 3、.test::-webkit-scrollbar-thumb 轨道部分； ~~~ 6 .时间戳转日期，null也会被转 7.将ui库中的组件适配，给class将px转rem覆盖 ### 8.表格数据转map在转obj 获取dom节点取元素使用对象的遍历方式 ~~~ // 新建项目信息填写保存和取消 async saveBtn() { // 获取表单数据（此处是获取不到的，在服务器上才能获取到。跨域问题） const iframeData = { attrs: {}, name: "" }; const iframeDom1 = document.getElementsByName("iframeName"); // console.log("iframeDom1", iframeDom1); const fromElements = document .getElementsByName("iframeName")[0] .contentWindow.document.getElementsByName("dfmReport")[0]; // console.log("fromElements", fromElements); const maps = new Map(); for (let i = 0; i < fromElements.length; i++) { const e = fromElements[i]; if (e.type === "hidden" && e.name) { // console.log( e.name, e.value); if (e.name === "name") { iframeData.name = e.value; } else { // 数据转map e.value && maps.set(e.name, e.value); } } } maps.set("gcbh", this.gcbh); // map 转对象 const attrs = {}; for (const [k, v] of maps) { attrs[k] = v; } iframeData.attrs = attrs; console.log("iframeData is", iframeData); try { if (this.xmbh) { await modifySubject(this.type, this.xmbh, iframeData); } else { await addSubject(this.type, iframeData); } this.$Message.success({ content: "保存项目成功！", duration: 3 }); this.$emit("onok"); } catch (error) { console.log(error); } // this.$Message.info("Clicked ok"); }, ~~~ 多个空格实现方式 a.toFixed(2) a为数字保留两位小数 **改用@click.native=""绑定事件。**（弹出框回车事件饿了么的，iview的下拉选框选项点击无效） ### 表格宽度设置为rem ~~~ /deep/ .ivu-table-body, /deep/ .ivu-table-header { colgroup col { &:nth-child(1) { width: 2.5rem !important; } }} ~~~ ### iview中自定义表格 ~~~ 1. 表头数据是个数组 2. 每一项的数据对象格式为 3. 有children相当于拆分单元格 { title: "项目信息列表", align: "center", children: [ { title: "序号", key: "number", align: "center" },} ~~~ 布局时灵活使用百分比和rem（尽量避免百分百和rem混用），多使用sass语法，（定义颜色常量，和代码块，使用include语法引入）不滥用 /deep/ （深度选择器，在存在父子组件的情况下使用，在使用的里面无需在使用/deep/会默认继承，但在火狐浏览器失效）灵活&的使用（在sass中是代替重复的选择器） ### css3 计算属性 calc() 注意事项： * 使用“+”、“-”、“\*” 和 “/”四则运算； * 可以使用百分比、px、em、rem等单位； * 可以混合使用各种单位进行计算； * 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的； * 表达式中有“\*”和“/”时，其前后可以没有空格，但建议留有空格。 ### 选择父元素下的第一个子元素 ~~~ ul>:first-child ~~~ ### 布局： ~~~ 布局是情况下，上下布局也可以使用flex布局，向上下盒子高度自适应的情况，flex-grow: 1; ~~~