web前端之web前端清单

---

在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}}</option>
</select>

☺☺☺

引入文件有：
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./index.js"></script>

---

JavaScript部分

new Vue({
    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];
        }
    },
});

---

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

<div style="overflow: hidden;">
	<div style="margin-top: 10px;">div1</div>
	<div>div2</div>
	<div>div3</div>
</div>

☺☺☺

直接在父元素上添加overflow: hidden;属性即可。

---

::before设置图标与边框距离

::before {
	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;
}

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属性，否则不起作用。

---

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="() => {}"
			>
			</el-checkbox>
		</template>
	</el-table-column>
	<el-table-column prop="name" label="姓名"> </el-table-column>
	<el-table-column prop="date" label="日期"> </el-table-column>
	<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>

☺☺☺

阻止冒泡的关键函数：@click.stop.native="() => {}

---

JavaScript

export default {
	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);
		},
	},
};

---

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

html

<div class="rgba_box">
	<el-input
		class="inputs"
		v-model="inputRgba"
		placeholder="请输入"
	></el-input>
</div>

---

css

.rgba_box {
	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;
	}
}

---

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

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

---

解决报错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
	});
},

---

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

在发送请求时需要配置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);
});

---

axios的baseURL后自动加斜杠

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

---

原生实现选项卡思路

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

---

web前端之vue+elementUi条件渲染切换表格时单元格内容显示异常的问题及解决方法

在同一个页面切换展示多个table，然而table在切换的时候会出现内容消失和无故出现的现象。vue会尽可能的高效地渲染元素，通常复用已有元素而不是从头开始渲染。这么做除了使vue变得非常快之外，还有其它一些好处。例如，允许用户在不同的登录方式之间切换。

<template v-if="loginType === 'username'">
	<label>Username</label>
	<input placeholder="Enter your username">
</template>
<template v-else>
	<label>Email</label>
	<input placeholder="Enter your email address">
</template>

代码中切换loginType将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉，仅仅是替换了它的 placeholder。这样也不总是符合实际需求，所以vue提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的key attribute即可。
vue高效的背后也是因为它对已有元素的复用，所以当进行表格之间的切换操作时，vue会复用已有元素，所以导致表格内容出现差异。

<!-- 之前方式 -->
<el-table-column prop="handlerResult" label="处理结果"></el-table-column>
 
<!-- 更改 -->
<el-table-column prop="handlerResult" label="处理结果">
	<template slot-scope="scope">
		<span>{{scope.row.handlerResult}}</span>
	</template>
</el-table-column>