21.vue data中某一对象或数组添加响应式属性
let changeArr = []
v.list.forEach(val=>{
val=Object.assign({},val,{
birthday:val.birthday=="未知" ?"" : val.birthday
})
changeArr.push(val)
})
v.list = changeArr;
22.一组input 判断每一个input 是否有内容
let noEmpty = true;
item.list.forEach(v=>{
if(v.email.length == 0){
noEmpty = false;
}
})
if(!noEmpty){
this.$toast('邮箱或生日不能为空',2)
return;
}
23.生命周期 activated
//在这个生命周期下调数据 在发放失败页面 重新发放后 再重新进入这个页面会重新调取后台接口
activated(){
this.getGiftList()
}
24.a 标签下载文件
<a class="download small-hand" :href=linkConf download="template_1544007466.xlsx">下载模板</a>
linkConf:linkConfig.getHost()+"/example/bn_card_grant.xlsx"
25.伪dom 自定义事件
inputClick(){
//伪DOM自定义事件 自定义事件的注册和触发
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
document.getElementById("uploadFile").dispatchEvent(evt) // uploadFile 是input type = file 的 id
}
26.table 表格中 checkbox 全选 、反选、单选
//全选
handleAllClick(){ //@click.prevent="handleAllClick" :checked="selectAllChecked"
if(this.selectAllChecked){
//全选->全不选
for (let i = 0, length = this.currentPageList.length; i < length; i++) {
if (this.currentPageList[i].isChecked && (this.currentPageList[i].isDisabled == false)) {
this.currentPageList[i].isChecked = false;
}
}
this.resetSelectedEditCountList(); //重置选择列表
}else{
// 不全选->全选
let uTempArr = [];
for (let i = 0, length = this.currentPageList.length; i < length; i++) {
if ((!this.currentPageList[i].isChecked) && (this.currentPageList[i].isDisabled == false)) {
this.currentPageList[i].isChecked = true;
uTempArr.push(this.currentPageList[i]);
}
}
this.resetSelectedEditCountList("insert", uTempArr);
}
this.selectedListCheckedAllStateChanged();
},
// 重置已选列表中可编辑数量列表 只支持删除单个对象,多个对象时直接重置
resetSelectedEditCountList(action = "reset", arr) {
if (action === "reset") {
this.selectedEditCountList = [];
this.tableList.forEach(function (item) {
if (item.checked) {
this.selectedEditCountList.push(item);
}
}, this)
} else if (action === "remove") { // employeeId 后台返回 todo
for (let i = 0;i < this.selectedEditCountList.length; i++) {
if (typeof arr === "object" && arr.id === this.selectedEditCountList[i].id) {
this.selectedEditCountList.splice(i, 1);
return;
}
}
} else {
this.selectedEditCountList = this.selectedEditCountList.concat(arr);
}
},
// 已选列表全选复选框状态变更
selectedListCheckedAllStateChanged: function () {
let isAllChecked = true;
this.currentPageList.forEach(function (item) {
if(item.hasOwnProperty('isChecked')){ //判断一个对象是否有某个属性
if (item.isChecked !== true) {
isAllChecked = false;
}
}
});
this.selectAllChecked = isAllChecked;
}
//前面每个checkbox 点击
itemHandleClick(item,index){
if(!item.isChecked){
this.currentPageList[index].isChecked = true;
this.resetSelectedEditCountList("insert", item);
}else{
this.currentPageList[index].isChecked = false;
this.resetSelectedEditCountList("remove", item);
}
this.selectedListCheckedAllStateChanged();
},
27. 地址栏中 参数是 布尔 true 或false 刷新后 就变成字符串 true 或false了
let isErr = false;
if(query.isError == 'false' || query.isError == false){
isErr = false
}else{
isErr = true
}
28. 有条件限制的+ - 操作
//福利数量 +
addWelfareNum(){
if(!this.selectedEditCountList.length){
this.$toast('请先勾选员工',2);
return;
}
let total = 0;
this.tableList.forEach(v=>{
if(v.isDisabled == false){
total+= v.num;
}
})
//1.导入名单 >= 福利总数量 return
if(total >= this.getWlfareTotal){
this.$toast('福利数量不足',2);
return;
}
this.selectedEditCountList.forEach(v=>{
if(v.isChecked && total < this.getWlfareTotal){
v.num ++;
total ++;
}
})
},
//福利数量 -
reduceWelfareNum(){
if(!this.selectedEditCountList.length){
this.$toast('请先勾选员工',2);
return;
}
this.selectedEditCountList.forEach(v=>{
if(v.isChecked && (v.num > 1)){
v.num --;
}
})
},
29.文件上传
布局：
<a href="#" class="update_logo small-hand">编辑logo</a>
<input
type="file"
name="upload_logo_img"
class="upload_img small-hand"
ref="inputer"
@change="changepic($event)"
accept="image/png,image/jpeg,image/gif,image/jpg"
id="logo-input"
>
.upload_logo>.upload_img {
width: 138px;
height: 30px;
position: relative;
bottom: 20px;
z-index: 100;
opacity: 0;
}
//上传logo
changepic(){
let inputDOM = this.$refs.inputer;// 通过DOM取文件数据
let fileObj = inputDOM.files[0];//获取文件信息
let size = '',format = '',index;
if(fileObj){
index = fileObj.name.lastIndexOf(".");
format = fileObj.name.substring(index+1);
size = (fileObj.size / (1024 * 1024)).toFixed(2);
}
if(format != 'jpg' && format != 'png'){
this.$toast('格式不正确，请重新上传',this.toastType)
return;
}
if(size > 1){
this.$toast('请选择不大于1M的图片',this.toastType)
document.getElementById('logo-input').value = ""
return;
}
var reader = new FileReader();
reader.readAsDataURL(fileObj); // 读出 base64
let that = this;
reader.onloadend = function () {
//图片的 base64 格式, 可以直接当成 img 的 src 属性值
that.uplpadImg = reader.result;
}
let fileInfo = {
imageFile:fileObj,
xxx:xxx
}
this.$uploadFile('xxxxx',fileInfo,this).then((response)=>{
})
},
30. 日期处理
timingTransmissionFormat(date){
if(!date){
return ""
}
console.log('date',date) //date 1548345600000
let finalFormatY = new Date(date).getFullYear();
let finalFormatM = new Date(date).getMonth() + 1 < 10 ? '0' + (new Date(date).getMonth() + 1) : new Date(date).getMonth() + 1;
let finalFormatD = new Date(date).getDate() < 10 ? '0' + (new Date(date).getDate()) : new Date(date).getDate();
let finalFormatH = new Date(date).getHours() <10 ? '0' + (new Date(date).getHours()):new Date(date).getHours();
let finalFormatMi = new Date(date).getMinutes()<10 ? '0' + (new Date(date).getMinutes()):new Date(date).getMinutes();
return finalFormatY + '-' + finalFormatM + '-' + finalFormatD + ' ' + finalFormatH + ':' + finalFormatMi
}
31.监听窗口变化
mounted(){
//监听窗口改变
this.maskHeight = `${document.documentElement.clientHeight}px`;
this.maskWidth = `${document.documentElement.clientWidth}px`;
const that = this
window.onresize = function temp() {
that.maskHeight = `${document.documentElement.clientHeight}px`;
that.maskWidth = `${document.documentElement.clientWidth}px`;
};
}
32.modal 组件 、toast 组件
modal：
watch:{
value:function(val){
this.isShow = val
},
isShow:function(val){
this.$emit('input',val)
}
},
v-model="isShowModel">
toast
methods:{
closeToast(){
this.showToast = false;
}
}
import ToastComponent from './Toast.vue'// 引入先前写好的vue
const Toast = {};
// 注册Toast
Toast.install = function (Vue) {
// 生成一个Vue的子类
const ToastConstructor = Vue.extend(ToastComponent)
// 生成一个该子类的实例
const instance = new ToastConstructor();
// 将这个实例挂载在我创建的div上
// 并将此div加入全局挂载点内部
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
// 通过Vue的原型注册一个方法
// 让所有实例共享这个方法
Vue.prototype.$toast = (msg,toastType) => {
instance.msg = msg;
instance.toastType=toastType;
instance.showToast = true;
setTimeout(() => {
instance.showToast = false;
}, 3000);
}
}
export default Toast
33.监听页面滚动及刷新
mounted(){
window.addEventListener('scroll',this.handleScroll);
window.addEventListener('beforeunload',this.handleUnload);
}
34.将html解析成网页
v-html="shoppingDetail.productDes">
35.页面传参数：
router
index.js
{
path:'/purchase/detail/:productId', //这样即使刷新页面参数也不会丢失
name:'purchaseDetailLink',
component:purchaseDetailHome,
meta: {
keepAlive: false,
requiresAuth: true
}
},
let paramsObj = {
productId:productId
}
this.$router.push({name:'purchaseDetailLink',params:paramsObj});
36.js 截取指定字符串
getCaption(obj,str){
var index=obj.lastIndexOf(str);
obj=obj.substring(index+1,obj.length);
return obj;
},
37.下载文件
chrome、火狐、360都可以
downloadIamge(imgsrc, name) {//下载图片地址和图片名
var image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
var a = document.createElement("a"); // 生成一个a元素
var event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "photo"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgsrc;
},
//IE浏览器图片保存本地
SaveAs5(imgURL){
var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000");
for(; oPop.document.readyState != "complete"; )
{
if (oPop.document.readyState == "complete")break;
}
oPop.document.execCommand("SaveAs");
oPop.close();
},
38.获取浏览器类型、信息
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{
prop: window.opera,
identity: "Opera"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
};
BrowserDetect.init();
39..gitignore 文件
可以把一些不需要git 上传的文件放到这里面
40.浏览器css 兼容问题
1.解决 safari浏览器input 光标过长问题
input[type='text']{
line-height: 15px !important;
padding-bottom: 1px !important;
-ms-line-height:40px;
}
/* 解决火狐上按钮出现虚线边框 */
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {
border:none;
}
网友评论