web问题清单与经验

01、在vue中使用原生select和option标签，无法通过点语法实现数据双向绑定

html部分

<select v-model="selectOptionVal.id" @change="selectOptionChange"> <option v-for="(item,i) in selectOptionList" :value="item.id" :key="i">{{item.name}} el: '#app', data() { return { selectOptionList: [], selectOptionVal: {}, } }, created() { // 生成源数据 this.initPage() }, methods: { // 选中触发 selectOptionChange({ target: { value: id } }) { let selectItem = {}; this.selectOptionList.forEach(item => { if (item.id == id) selectItem = item; }); // 无法实现数据双向绑定 // this.selectOptionVal = selectItem; // this.$set(this, 'selectOptionVal', selectItem); // 解决办法 this.$set(this.selectOptionVal, 'id', selectItem.id); this.$set(this.selectOptionVal, 'name', selectItem.name); }, // 源数据 initPage() { for (let i = 0; i < 24; i++) this.selectOptionList.push({ id: `id${i + 1}`, name: '张三' + (i + 1) }); this.selectOptionVal = this.selectOptionList[0]; } }, }); 

02、给第一个div添加margin-top属性无效

<div style="overflow: hidden;"> <div style="margin-top: 10px;">div1 content: ""; background: url(../../assets/icons.png) center center no-repeat; position: absolute; width: 16px; height: 16px; top: 50%; left: 50%; transform: translate(-50%, -50%); // 关键属性及值 display: inline-block; padding: 10px; border: 1px dashed #34363b; } 

4、vue+element-ui+table实现去除表格鼠标悬停效果、hover、transparent、important、background、color、scoped

.el-table--enable-row-hover .el-table__body tr:hover > td { background-color: transparent !important; } 

注意：style标签不能加scoped属性，否则不起作用。

5、vue+elementUi+table+checkbox实现鼠标经过显示多选框、阻止冒泡、鼠标进入与移出

html

<el-table style="width: 100%" :data="tableData" border @cell-click="cellClick" @cell-mouse-enter="cellMouseEnter" @cell-mouse-leave="cellMouseLeave" > <el-table-column label="复选框"> <template slot-scope="scope"> <el-checkbox v-show="selectData.includes(scope.row.id) || scope.row.id === rowId" @change="(e) => changes(e, scope.row)" @click.stop.native="() => {}" >  data() { return { selectData: [], rowId: null, tableData: [ { id: 1, date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { id: 2, date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄", }, { id: 3, date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", }, { id: 4, date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", }, ], }; }, methods: { // 当单元格 hover 退出时会触发该事件 cellMouseLeave() { this.rowId = null; }, // 当单元格 hover 进入时会触发该事件 cellMouseEnter(e) { this.rowId = e.id; }, // 当绑定值变化时触发的事件 changes(e, row) { if (e) { this.selectData.push(row.id); } else { this.selectData.splice(this.selectData.indexOf(row.id), 1); } }, // 当某个单元格被点击时会触发该事件 cellClick(row) { console.log("当某个单元格被点击时会触发该事件:", row); }, }, }; 

6、vue+elementUi+input嵌套背景设置透明度问题

html

<div class="rgba_box"> <el-input class="inputs" v-model="inputRgba" placeholder="请输入" > background-color: rgba(200, 170, 207, 0.3); margin-top: 24px; padding: 12px; ::v-deep .el-input__inner { // 此处一定把透明度设置为0
		// 值越大透明度越小 background-color: rgba(7, 17, 207, 0); color: #333; font-size: 20px; border: none; } } 

7、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

a,
button,
input,
textarea { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 

8、解决报错SyntaxError：Unexpected end of JSON input（原生微信小程序）

原因

若参数有地址类型值，地址中包括?或&等这些特殊符号时，参数先要通过JSON.stringify转化为字符串再通过encodeURIComponent编码；接收时，先通过decodeURIComponent解码再通过JSON.parse转换为JSON格式的数据。

跳转页面

// 点击轮播图跳转 detailsBanner({ currentTarget: { dataset: { item } } }) { item = JSON.stringify(item); // 关键函数encodeURIComponent // 微信小程序自带 // 注意函数与JSON不要弄反 item = encodeURIComponent(item); wx.navigateTo({ url: `/pages/functionPages/bannerDetails/bannerDetails?data=${item}` }); }, 

接收页面

/**
* 生命周期函数--监听页面加载
*/ onLoad({ data }) { // 关键函数decodeURIComponent， // 微信小程自带 // 注意函数与JSON不要弄反 data = decodeURIComponent(data); data = JSON.parse(data); let link = data.link.map(item => { item.isClick = false; return item; }); data.link = link; this.setData({ bannerData: data }); }, 

9、解决后端返回数据流转成图片

在发送请求时需要配置responseType: 'blob'才能转换成功。使用浏览器自带的window.URL.createObjectURL()方法即可实现数据转换。

☺☺☺

axios({ method: "get", url, params: {}, responseType: "blob", }).then((res) => { self.verificationCode = window.URL.createObjectURL(res.data); }).catch(function (error) { console.log("获取数据失败: ", error); }); 

10、axios的baseURL后自动加斜杠

axios自动加斜杠是规范，但是项目中正好不需要加斜杠。在node_module中找到axios的位置，找到图中的位置，把斜杠删掉即可，需要重启项目。

11、原生实现选项卡思路

每一个选项卡设置一个相同的类名，点击时清除所有选项卡高亮类名，存在便清除，否则自动跳过。点击时传递当前点击的元素，再给当前元素加上高亮类名即可。两者的逻辑顺序不能颠倒，必须是先清除所有选项卡的高亮类名，再给当前点击的选项卡元素加上高亮类名。