前端常用代码记录

前端问题记录

微信小程序

1.自定义头部导航栏

业务需求:需要把头部导航做成背景图片,+文字

//1.在json文件中 如果是需要全局改变就设置到app.js中，或者需要哪个页面改变就设置在哪个页面的json中
{

  "navigationStyle":"custom",//设置成custom
  "navigationBarTitleText": "央联e家"
}
//2.在js中动态计算 状态栏和按钮的高度来达到适配
//当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
 onLaunch: function() {
    wx.getSystemInfo({
      success: e => {
        var statusBar = e.statusBarHeight; //状态栏高度
        let custom = wx.getMenuButtonBoundingClientRect();//菜单按钮
        this.setData({
          custom : custom,
          customBar: custom.bottom + custom.top - e.statusBarHeight
        })//计算得到定义的状态栏高度
      }
    })
  }
//3.wxml
  <view class="back_1">
    <view class='con_top' style="height:{{customBar}}px">
      <view class='con' style="height:{{customBar}}px;padding-top:{{customBar-30}}px;font-size: 34rpx;">

        <view class="title" >央联e家</view>
      </view>
    </view>
</view>
<view class="{{currentTab == 'a0'?'back_2':'back_2_'}}" style="top:{{customBar+95}}px"></view>
//4.css
.back_1 {
    position: fixed;
    z-index: 111;
    background: url(https://ylej-images-oss-server.oss-cn-beijing.aliyuncs.com/images/happyNewYear/index1.jpg) no-repeat;
    background-size: cover;
    width: 100%;
}
.back_2 {
    position: relative;
    background: url(https://ylej-images-oss-server.oss-cn-beijing.aliyuncs.com/images/happyNewYear/index_.jpg) no-repeat;
    background-size: 101%;
    background-color: rgb(245,245,245);
    padding-top: 15rpx;
}

这个+95/-30大家根据自己的情况而定

2.使用scroll-view的时候里面的文字不会换行

解决方法：加入 white-space: normal !important;

text{
    font-size: 24rpx;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 500;
    white-space: normal !important;
    line-height: 32rpx;
}

3.返回顶部按钮，超过一屏显示

<!-- 返回顶部按钮 -->
<view class="scrolltop" wx:if="{{floorstatus}}" bindtap="goTop">
  <image wx:if="{{ossImagesUrl}}" src="{{ossImagesUrl}}/happyNewYear/top.png"></image>
</view>
</view>

 // 获取滚动条当前位置
  onPageScroll: function (e) {
    if (e.scrollTop >= wx.getSystemInfoSync().windowHeight-150) {
      this.setData({
        floorstatus: true
      });
    } else {
      this.setData({
        floorstatus: false
      });
    }
  },
    //回到顶部
    goTop: function (e) {  // 一键回到顶部
      if (wx.pageScrollTo) {
        wx.pageScrollTo({
          scrollTop: 0
        })
      } else {
        wx.showModal({
          title: '提示',
          content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
        })
      }
    }

4.按钮循环放大缩小

<view class="bulletframe_btn"  animation="{{animationMiddleHeaderItem}}"  bindtap="bulletframe_btn"><image wx:if="{{requestUrl}}" src="{{ossImagesUrl}}/bulletframeGo.png"></image><view></view>
          </view>

 onLoad: function (options) {
        var circleCount = 0;  
    this.animationMiddleHeaderItem = wx.createAnimation({  
      duration:800,    // 以毫秒为单位  
      timingFunction: 'linear',  
      // delay: 100,  
      // transformOrigin: '50% 0',  
      success: function (res) {  
        
      }  
    });  
    setInterval(function() {  
      if (circleCount % 2 == 0) {  
        this.animationMiddleHeaderItem.scale(1.2).step();  
      } else {  
        this.animationMiddleHeaderItem.scale(1.0).step();  
      }  
        
      this.setData({  
        animationMiddleHeaderItem:this.animationMiddleHeaderItem.export()  //输出动画
      });  
        
      circleCount++;  
      if (circleCount == 1000) {  
        circleCount = 0;  
      }  
    }.bind(this), 800); 
  }

ps:如果想让首页弹框只在用户进入小程序的首页显示 在onShow中控制就行

onShow的作用是:页面显示或从后台跳回小程序时显示此页面时触发，从跳转页面返回时触发，不能传递参数

自定义小程序弹框 ：github上大佬的地址https://github.com/mydickk/wx-layer

5.用户滑到底部自动请求下一页接口

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getAllbuyData();
  }

6.微信小程序复制订单功能

 <view class="btn" data-content="{{returnInfo.return_code}}"  bindtap="copyNotice">复制</view>

/**
   * 复制按钮功能
   */
  copyNotice:function(e){
    console.log("所复制的通知内容：", e.currentTarget.dataset.content);
    wx.setClipboardData({
      data: e.currentTarget.dataset.content,
      success: function(res) {
        wx.getClipboardData({
          success: function() {
            wx.showToast({
              title: '复制成功',
            })
          }
        })
      }
    })
  }

7.微信小程序 批量上传文件

https://blog.songdonghong.com/2020/03/18/wxxcxplsc/

https://blog.songdonghong.com/archives/

 <view class="smallPicture">
    <view wx:for="{{chooseImage}}" class="{{index+1===swiperIndex?'item item_av':'item'}}"  wx:key="index">
      <image  wx:if="{{item}}" src="{{item}}" ></image>
    </view>
  </view>

  /**
   * 上传图片
   */
  chooseWxImage() {
    var that = this;

    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        that.uploadImg(res.tempFilePaths[0]) //上传图片
      }
    })

  },
  /**
   * 上传图片
   */
  uploadImg: function (img) {
    var that = this;
    if(this.data.typeName==='remember'){
        wx.uploadFile({
          url: util.requestUrl + '/pay-item/up-voucher',
          header: {
            "Content-Type": "multipart/form-data",
          },
          filePath: img,
          name: 'img',//对应后台img参数
          formData: {
            code: util.session_key()
          },
          success: function (res) {
            var data = JSON.parse(res.data)
            if (data.code == 100) {
              that.data.chooseImage.push(data.url) //图片服务器地址
              that.setData({
                chooseImage: that.data.chooseImage
              })
            } else {
              wx.showToast({
                title: data.message,
              })
              return
            }
          },
          fail: (res) => {
            wx.showToast({
              title: '上传失败',
            })
          }
        })
    }
    if(this.data.typeName==='pay'){
        wx.uploadFile({
          url: util.requestUrl + '/finance/upload-img',
          header: {
            "Content-Type": "multipart/form-data",
          },
          filePath: img,
          name: 'p_img',
          formData: {
            code: util.session_key()
          },
          success: function (res) {
            var data = JSON.parse(res.data)
            if (data.code == 100) {
              that.data.chooseImage.push(data.url) //图片服务器地址
              that.setData({
                chooseImage: that.data.chooseImage,
                imgRdata:data.data
              })
            } else {
              wx.showToast({
                title: data.message,
              })
              return
            }
          },
          fail: (res) => {
            wx.showToast({
              title: '上传失败',
            })
          }
        })
    }
  },

8.企业微信调用扫一扫

<div class="btn1" id="smbutton">
            <img src="/image/wecom/scanning.png">
            <span>扫码核销</span>
</div>

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
var config = JSON.parse('<?php echo $signPackage;?>');
    
        wx.config({
            beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: config.appId, // 必填，企业微信的corpID
            timestamp:config.timestamp , // 必填，生成签名的时间戳
            nonceStr: config.nonceStr, // 必填，生成签名的随机串
            signature:config.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
            jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
        });
        wx.error(function (res) {
            alert("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
        });
         
        wx.ready(function () {
            wx.checkJsApi({
                jsApiList: ['scanQRCode'],
                success: function (res) {}
            });
        });

$("#smbutton").click(function(){
        wx.scanQRCode({
            desc: 'scanQRCode desc',
            needResult: 0, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有
            success: function(res) {

                  
            },
            error: function(res) {
                if (res.errMsg.indexOf('function_not_exist') > 0) {
                    alert('版本过低请升级')
                }
            }
        });
})
$("#search").click(function(){
        window.location.href="/wecom/wecom/search";
})

9. 购物车小球动画

/**
   * 加入购物车
   */
  addCart: function(res){
     // 抛物线算法
     if (!this.data.hide_good_box) return;
     this.finger = {};
     var topPoint = {};
     this.finger['x'] = res.touches["0"].clientX;
     this.finger['y'] = res.touches["0"].clientY;
     if (this.finger['y'] < this.busPos['y']) {
     topPoint['y'] = this.finger['y'] - 150;
     } else {
     topPoint['y'] = this.busPos['y'] - 150;
     }
     topPoint['x'] = Math.abs(this.finger['x'] - this.busPos['x']) / 2;
     if (this.finger['x'] > this.busPos['x']) {
     topPoint['x'] = (this.finger['x'] - this.busPos['x']) / 2 + this.busPos['x'];
     } else {
     topPoint['x'] = (this.busPos['x'] - this.finger['x']) / 2 + this.finger['x'];
     }
     this.linePos = app.bezier([this.finger, topPoint, this.busPos], 30);
     this.startAnimation();
  }
/**
  * 抛物线算法
  */
 startAnimation: function () {
  var index = 0,
  that = this,
  bezier_points = that.linePos['bezier_points'],
  len = bezier_points.length - 1;
  this.setData({
  hide_good_box: false,
  bus_x: that.finger['x'],
  bus_y: that.finger['y']
  })
  this.timer = setInterval(function () {
  index++;
  that.setData({
  bus_x: bezier_points[index]['x'],
  bus_y: bezier_points[index]['y']
  })
  if (index >= len) {
  clearInterval(that.timer);
  that.setData({
  hide_good_box: true,
  })
  }
  }, 15);
}

10.调用导航

   navigation: function () {
    const latitude = parseFloat(this.data.storeInfo.lat)
    const longitude = parseFloat(this.data.storeInfo.lng)
    wx.openLocation({ //调用地图展示当前位置
      latitude,
      longitude,
      scale: 18
    })
  },

11.自定义地图

  <view class='map-tanbox' wx:if="{{mapTanbox}}" catchtap="map_cancel">
    <view class='tankuang'>
      <view class="tankuang_">
        <view class="map">
          <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="19" markers="{{markers}}"
            bindmarkertap="markertap" bindregionchange="regionchange" show-location
            style="width: 100%; height: 400rpx;">
          </map>
        </view>
        <view class="map-bottom">
          <view>确定预约门店</view>
          <view>{{storeInfo.sname}}</view>
          <view>{{storeInfo.address}}</view>
        </view>
        <view class="map-btn">
          <view bindtap="onOther" wx:if="{{sid_rc===0}}" class="onOther">其他门店</view>
          <view bindtap="determine_make"  data-sid="{{storeInfo.sid}}" class="determine_make">确定</view>
        </view>
      </view>
    </view>
  </view>
scale="19"缩放多少

 longitude:116.336159,
      latitude:39.897926,
      markers: [{
        iconPath: "https://ys-health-oss.oss-cn-beijing.aliyuncs.com/images/myRecordAgain_/map_index.png",
        longitude:116.336159,
        latitude:39.897926,
        id: 0,
        width: '48rpx',
        height: '54rpx',     
        callout:{
          content: "圣诞节哦大家所接受的",
				  color: "#333333",
				  fontSize: 13,
				  borderRadius: 4,
				  bgColor: "#ffffff",
				  textAlign: "center" ,
				  padding: 10,
				  display: 'ALWAYS'
      },
      }],

12. scroll-view 手动左右滑动

scroll-left="{{scrollLeft}}" scroll-with-animation scroll-x=“true”

​ scroll-into-view="{{toView}}"

 data: {
    bignameDataAll:[{price:'1',goods_id:'101',goods_img:'http../',goods_name:'商品商品商品'}],//大牌数据
 }

  <view class="plate">
    <!-- 左右滑动  scroll-view 开始-->

    <view class="scroll-list">
      <scroll-view class="scroll" scroll-x="true" scroll-left="0">
        <view class="scroll-list_">
          <view class="scroll-item" wx:for="{{bignameDataAll}}" wx:key="bignameDataAll" wx:for-index="preAIndex"
            wx:for-item="preAItem" data-goods_id='{{preAItem.goods_id}}' bindtap='toJump'>
            <view class="scorll-line"></view>
            <view class="scroll-btn">活动价: <text>{{preAItem.price}}元</text></view>

            <view class="scorll-line" ></view>
            <view class="scorll-img" style="{{preAIndex===bignameDataAll.length-1?'border:none':''}}">
              <image src="{{preAItem.goods_img}}"></image>
            </view>
            <view class="scroll-info">
              <view>
                {{preAItem.goods_name}}
              </view>
            </view>

          </view>
        </view>

      </scroll-view>

    </view>
    <!-- 左右滑动  scroll-view 结束-->
  </view>

.plate{
  height: 324rpx;
  border-radius: 50rpx;
  border: 3px solid #FFC579;
  border-radius: 50rpx;
  margin: 20rpx;
  margin-top: 30rpx;

}
.scroll-list .scroll{
  height: 324rpx;
  border-radius: 20rpx;
  border: 6rpx solid #FFDBAB;
  background: #F8D3A2;
  margin: 15rpx 0rpx 0rpx 15rpx;
  width: 98%;
  height: 300rpx;
}
.scroll-list_{
  display: flex;
}
.scroll-item{
  margin-left: 30rpx;
  margin-top: 20rpx;


}
.scorll-img{
  width: 205rpx;
  border-right: 1px dashed #187D7D;
  height: 158rpx;
  margin-top: 5rpx;
}
.scorll-img image{
  width: 170rpx;
  height: 158rpx;
  margin-left: 10rpx;
  margin-top: 5rpx;
}
.scroll-info{
  width: 204rpx;
  height: 56rpx;
  font-size: 20rpx;
  font-weight: 400;
  color: #333333;
  line-height: 24rpx;
  margin-top: 10rpx;
}
.scroll-info view{
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.scorll-line{
  width: 40rpx;
  height: 4rpx;
  background: #187D7D;
  border-radius: 2rpx;
  /* position: absolute; */
  /* left: 80rpx; */
  /* top: 0rpx; */
  margin-left: 75rpx;

}
.scroll-btn{
  width: 97px;
  height: 17px;
  border-radius: 9px;
  border: 1px solid #187D7D;
  font-size: 10px;
  /* font-family: PingFangSC-Regular, PingFang SC; */
  font-weight: 400;
  color: #187D7D;
  line-height: 19px;
  text-align: center;
}
.scroll-btn text{
  color: #CD534C;
}

13. 修改 swiper 样式

<view class="bigname_banner" wx:if="{{ossImagesUrl}}"
  style='background-image:url("{{ossImagesUrl}}/routine/qixi_festival_plate1.png");'>
  <view class="bigname_banner_list">
    <!-- <view class="swiper"> -->
    <swiper class="swiper" bindchange="swiperChange" current="{{swiperCurrent}}" easing-function="{{easingfunction}}"
      autoplay="{{true}}" duration="{{duration}}" indicator-color='{{indicatorcolor}}'
      indicator-active-color='{{indicatoractivecolor}}'>
      <block wx:for="{{bignameDataThree}}" wx:key="bignameDataThree" wx:for-index="bigIndex" wx:for-item="bigItem">
        <swiper-item class="sw-item" data-goods_id='{{bigItem.goods_id}}' bindtap='toJump'>
          <view class="sw_list">
            <view class="sw-left">
              <!-- mode="widthFix" -->
              <image bindtap="SecondaryPage" data-goods_id='{{bigItem.goods_id}}' bindtap='toJump'
                wx:if="{{ossImagesUrl}}" src="{{bigItem.goods_img}}"></image>
            </view>
            <view class="sw-right">
              <view class="sw-title"> {{bigItem.goods_name}}</view>
              <view class="sw-price">
                <view class="p1" wx:if="{{bigItem.true_price>bigItem.price}}">原价：{{bigItem.true_price}}</view>
              </view>
              <view class="sw-btn"  wx:if="{{ossImagesUrl}}"
                style='background-image:url("{{ossImagesUrl}}/routine/qixi_festival_plate1_btn.png");'>
                <view class="p2"><text style="font-size: 20rpx;">￥</text><text>{{bigItem.price}}</text></view>
                <view>点击购买
                  <image style="width:22rpx;height:22rpx" wx:if="{{ossImagesUrl}}"
                    src="{{ossImagesUrl}}/routine/qixi_festival_arrow.png"></image>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>

  </view>

</view>


<!-- 轮播图 圆点 -->
<view class="tswiper-btom">
  <view wx:for="{{bignameDataThree}}" wx:key="*this" class="{{swiperCurrent==index?'tswiper-seled':'tswiper-sel'}}"
    data-index='{{index}}'></view>
</view>

.bigname_banner{
  background-size: cover;
  width: 702rpx;
  height: 414rpx;
  margin: 0 auto;
}
.sw_list{
  display: flex;
  /* justify-content: center; */
  align-items: center;
}
.swiper{
  height: 414rpx;
}
.sw-left image{
  width: 302rpx;
  height: 310rpx;
  border-radius: 20rpx;
  margin: 40rpx;
  margin-top: 50rpx;
}
.sw-right .sw-title{
  width: 272rpx;
  height: 64rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FACE94;
  line-height: 32rpx;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sw-price .p1{
height: 32rpx;
font-size: 20rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 32rpx;
text-decoration: line-through;
}
.sw-price{
  padding-top: 70rpx;
  padding-bottom: 20rpx;
}
.sw-btn{
  background-size: cover;
  width: 275rpx;
  height: 63rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-around;

}
.sw-btn .p2{
  height: 28px;
   line-height: 28rpx;
   display: flex;
   align-items: center;
   margin-left: 8rpx;
   font-size: 26rpx;
}
.sw-btn .p2 text{
   
    font-weight: 500;
color: #FFFFFF;
font-weight: bold;
background: linear-gradient(to bottom, #F9D7B5, #F9AD73);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: PingFangSC-Medium, PingFang SC;
}
.sw-btn view:nth-child(2){
  height: 28px;
  font-size: 20rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #F9AD73;
  line-height: 28rpx;
  display: flex;
  align-items: center;
  margin-left: 8rpx;
}

.tswiper-btom{
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.tswiper-seled{
  width:14rpx;
height: 8rpx;
background: #CE534C;
border-radius: 4rpx;
margin-right: 20rpx;
}
.tswiper-sel{
  width: 8rpx;
height: 8rpx;
background: #FFFFFF;
border-radius: 50%;
margin-right: 20rpx;
}

14.picker-view组件

用到了自己去查吧，这部分代码有点乱就不贴了

​ picker-view组件，是一个页面上的滚动选择器；

如果想进行滚动：他的子元素必须是 picker-view-column 组件；

picker-view-column组件：只是提供了一个可视的范围，如果想进行滚动；

picker-view-column组件的属性：

value：类型　　数组　　数组中的数字依次表示 picker-view 组件中，picker-view-column组件中的第几项，如果数字大于选 项，则使用最后的选项

indicator-style：类型　　字符串　　设置选择器中间选中框的样式

indicator-class：类型　　字符串　　设置选择器中间选中框的类名

mask-style：类型　　字符串　　设置蒙层的样式

mask-class：类型　　字符串　　设置蒙层的类名

事件：

bindchange：滚动选择时，触发change事件

bindpickstart：当滚动选择开始时，触发事件

bindpickend：当滚动选择结束时，触发事件

VUE单页面开发

1.监听滚动条

<div id="app" v-cloak @scroll="handleScroll($event)">
</div>

 // 监听滚动条
            handleScroll(e) {

                const top = e.target.scrollTop;
                let scrollBottom =
                    event.target.scrollHeight -
                    event.target.scrollTop -
                    event.target.clientHeight;
                var that  = this

                if(scrollBottom<=100){//离底部<=100做的操作
                    

                }

            },

2.h5跳转小程序

<div class="goods">
                <template>
                    <wx-open-launch-weapp id="launch-btn" :username="username" :path="path" @launch="goumai">
                        <script type="text/wxtag-template">
                            <button ref="btnGo" class="ant-btn ant-btn-red">{{ btnText }}</button>

                        </script>

                    </wx-open-launch-weapp>
                </template>


            </div>

3.vue标签出现闪现

//在最外层的div 加上v-cloak
<div id="cardman" v-cloak>
</div>

[v-cloak]{
    display: none;
}

2.加入加载中的动画，开始先隐藏等数据请求回来再显示

4.vue调用扫码枪进行支付

scanData是扫码枪回执的code

scanningPayment 是支付的方法
@keyup.enter.native 点击回车键触发

友好操作:让这个文本框永远都是焦点触发的情况

 <el-input placeholder="请扫码或输入付款码" id="paymentId" v-model="scanData" @keyup.enter.native="scanningPayment">
</el-input>

参考博客:https://www.jianshu.com/p/0317c476b9c1

5.文字适配

场景:每个卡项的名称长度不一致，如果名称长度大于他这个div宽度则显示…并且鼠标悬浮有文字提示

思路:创建一个null的div，并把文字传进去最后获取他的宽度.

 <el-tooltip class="item" effect="dark" :content="item.cardname" placement="top-start" v-if="onShowNameTipsMouseenter(elwidth.cardWidth-10,item.cardname)">
         <div :style="{'width':elwidth.cardWidth-10+'px','overflow': 'hidden','text-overflow': 'ellipsis','white-space': 'nowrap'}" class="ellipsis">{{item.cardname}}
          </div>
</el-tooltip>
 <div v-else class="ellipsis">{{item.cardname}}</div>

 /***
             * js判断文本是否溢出容器
             * */
            onShowNameTipsMouseenter(e, name) {
                //-20是因为他的左右边距为10
                if (e > this.getTextWidth(name, 16)) {
                    return false;
                } else {
                    return true;
                }

            },
            getTextWidth(arr, fontSize) {
                var widthList = 0
                fontSize = fontSize || 12;
                var div = document.createElement("div");
                div.innerText = arr;
                div.style.fontSize = fontSize + "px";
                div.style.display = "none";
                document.body.appendChild(div);
                widthList = $(div).width();
                document.body.removeChild(div);
                return widthList;
            }

6.vue自定义焦点指令

<div v-focus>
    
</div>

directives: {
            //注册一个局部的自定义指令 v-focus
            focus: {
                // 指令的定义
                inserted: function (el) {
                    // 聚焦元素
                    el.querySelector('input').focus()
                }
            }
        }

7.vue中回车键让input失焦让下一个input聚焦

<el-form
      ref="form"
      :model="form"
    >
      <el-form-item label-width="10px">
        <el-input
          v-model="form.username"
          placeholder="请输入姓名"
          @blur="nextInput()"
          @keyup.enter.native="nextInput($event)"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="10px">
        <el-input
          ref="password"
          v-model="form.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
   </el-form>

nextInput (event) {
      if (event) {
        event.target.blur()
        this.$refs.password.focus()
      }
    }

常用小技巧

1.鼠标变小手

cursor:pointer;

2. 自定义鼠标的图标

场景:如果预约成功，返回首页预约的时候会有用户信息带着鼠标上，后来发现没啥办法让文字或者div紧跟在鼠标的下面，

解决方法:把鼠标图标换了,其他方法我还没找到

:hover {
            /*cursor:pointer;*/
            /*cursor: help;*/
            cursor: url('/images/makeOppoinment/putitaway.cur'), auto;

        }

3. 实现汉字的首字母搜索

 <script src="http://119.29.39.55:8686/main.js"></script>  
<div class="purchase_top">
    <input id="searchpro" value="pro" hidden/>
	<el-input v-model="kw1" @keyup.enter.native="searchPro"
                                      placeholder="请输入项目/卡项首字母或名称">
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
	</el-input>
    <div class="list">
    <div v-for="(i, index) in showList"><span v-html="i"></span></div>
     </div>
      </div>

computed: {
            showList: function () {
                if (this.kw1 != "") {
                    $(".list").show();
                    var i = this;
                    if (this.kw1) {
                        var s = []
                        i.cardListIndex = [];
                        // i.proListIndex=[];
                        this.gobuyList.forEach(function (t) {
                            var key = t.split("_")[0];
                            var value = t.split("_")[1];
                            var e = PinyinMatch.match(value, i.kw1);
                            if (e) {
                                if (!key.indexOf("car")) {
                                    i.cardListIndex.push(key.substring(3))
                                }
                                // else {
                                //     i.proListIndex.push(key.substring(3))
                                // }
                            }
                            e && s.push(i.redFont(value, e[0], e[1]))
                        })
                        return s
                        //this.time1 = (new Date).getTime() - t, s
                    }
                    return this.gobuyList
                }

            }
        },

4.将数字（整数）转为汉字

  //将数字（整数）转为汉字，从零到一亿亿，需要小数的可自行截取小数点后面的数字直接替换对应arr1的读法就行了
function convertToChinaNum(num) {
    var arr1 = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九');
    var arr2 = new Array('', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千','万', '十', '百', '千','亿');//可继续追加更高位转换值
    if(!num || isNaN(num)){
        return "零";
    }
    var english = num.toString().split("")
    var result = "";
    for (var i = 0; i < english.length; i++) {
        var des_i = english.length - 1 - i;//倒序排列设值
        result = arr2[i] + result;
        var arr1_index = english[des_i];
        result = arr1[arr1_index] + result;
    }
    //将【零千、零百】换成【零】 【十零】换成【十】
    result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十');
    //合并中间多个零为一个零
    result = result.replace(/零+/g, '零');
    //将【零亿】换成【亿】【零万】换成【万】
    result = result.replace(/零亿/g, '亿').replace(/零万/g, '万');
    //将【亿万】换成【亿】
    result = result.replace(/亿万/g, '亿');
    //移除末尾的零
    result = result.replace(/零+$/, '')
    //将【零一十】换成【零十】
    //result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十
    //将【一十】换成【十】
    result = result.replace(/^一十/g, '十');
    return result;
}

5. 关闭浏览器自动记录历史功能

<input placeholder="流程名称" required="required" name="operinfo[]" type="text" class="operinfo item_input" autocomplete="off" />

$('input:not([autocomplete]),textarea:not([autocomplete]),select:not([autocomplete])').attr('autocomplete', 'off');

6.vue中的dom操作

vue中提供了，但是不支持。

vue是虚拟dom，在mounted下面都在真实dom，

使用vue+jquery的时候可以这样的写，但是得写在mounted（）下面

this.$refs

<div ref="head">
    
</div>
<script>
	export default{
        data(){
            return {
                message:'holle',
                checkedName:[],
                selected:''
            }
        },
        methods:{
           
        },
        mounted(){
            //dom已经生成
            $(".head").html('123')
            this.$refs.head.innerHTML="123";
        }
    }
</script>

ifrom

1.如果想把引入的页面置为null 就把cardmanUrl设置成""就行了

 <iframe name="iframeName" scrolling="no" id="cardman" :src='cardmanUrl' style="width:100%;border: none;" :style="{height:screeHeight+'px'}"></iframe>

2.父子方法或者字段可以看看这个postMessage

3.parent.location.reload();刷新父页面

Template标签用法总结

http://www.klxxb.com/index.php/archives/23.html