vue笔记

作者: 五更月下琉璃 | 来源:发表于2019-01-26 10:40 被阅读0次

保留小数点后两位

<p><b>{{(22).toFixed(2)}}</b></p>
<p>{{(userinfo.number).toFixed(2)}}</p>

移动端边框宽度:为了兼容老机型,不写0.01rem

border: 0.02rem solid #CCCCCC;

定时器

setTimeout(() => {
            this.success = true;
          }, 600);

返回当前页面刷新

window.fZJSExportObject.jsCallback('{"action":100,"backRefresh":1}');

页面跳转

gohomepage(){
        this.$router.replace({ name: "homepage" });
},

返回数组与字符串

let obj = {
        uid: this.GetQueryString('uid'),
        content: this.text, //返回字符串
        report: newArr,  //返回字符串
        img_list: JSON.stringify(this.upimgArr),//返回数组
      };

写一个空数组,有个需求是做单选,那么就要在点击存入数据之前把数组之前存放的清空,在push之前先让这个数组为空

this.data = [];

接口实列

init() {
      let that = this;
      let obj = {
        uid: this.curUserInfo.uid//传uid是必要的
      };
      this.$store.state.comAjax.ajaxPostAdmin(
        this.$store.state.comAjax.API.secondindex,
        obj,
        res => {
          this.userpage = res;
         //接口里面方法调用的一些判断
          if(this.userpage.has_signed == 1){
            this.inner();
          }else{
            this.gohomepage();
          }
          //console.log(this.userpage)
        },
        this
      );
    },
H5获取页面生成图片
//初始化生成图片
这个函数的功能是将id=capture的div所包含的元素生成图片展示出来,我们可以在页面设置一个点击调用这个方法,或者是进来后自动触发这个方法。在前面要引入如下代码:import html2canvas from "html2canvas";
    initimg() {
      let that = this;
      html2canvas(document.querySelector("#capture"), {
        backgroundColor: null,
        logging: false, //日志开关,便于查看html2canvas的内部执行流程
        useCORS: true, // 【重要】开启跨域配置
        // allowTaint:true
      }).then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        this.dataUrltext = dataURL
        this.dataURL = dataURL.slice(22);
        // console.log(this.dataUrltext)
      });
    },
//return里写上如下代码
data: function() {
    return {
      dataURL: "",//这是图片地址,分享的函数中图片地址写这一个
      dataUrltext:'',//在浏览器中查看可以在div中加入<img :src="dataUrltext" width="100%">来查看所获取并生成的图片。
    };
  },
分享函数里面有分享链接分享缩略图等,
shareObj.pic = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551074792535&di=6a7745570383a07d23a5ccfed0bfdae2&imgtype=0&src=http%3A%2F%2Fpic36.nipic.com%2F20131219%2F10512072_171745235190_2.jpg';这是常规链接,
shareObj.pic = 'dataURL'这是将当前获取的页面生成图片分享出去的地址,当需要以图片的形式分享的时候就这样写

接口判断的一些问题

一开始我是把判断写在v-if后面
<div v-if="userinfo.today_dubbing_status == 1 && userinfo.today_share_status == 0 && userinfo.share_end_status == 0 && userinfo.share_sequent_count <= 7">
这样写过于繁琐而且不便于观看,判断容易出错。
通过popup的true和false来判断会好很多,当满足条件的时候popup=true来显示这个div
<div v-if="popup">
      <div class="login">
        <img src="/kxpeiyin/daka.png">
        <a class="know" href="javascript:;" @click="know"></a>
      </div>
      <div class="over"></div>
    </div>

接口里面的判断如下:我最初写入条件的时候直接复制上面判断的忘了加This,这是基本错误,但是确实很坑,所以当时测试测了发现接口返回的数据没问题但是没触发这个判断

inner() {
      let that = this;
      let obj = {
        uid: this.curUserInfo.uid
      };
      this.$store.state.comAjax.ajaxPostAdmin(
        this.$store.state.comAjax.API.secondinner_index,
        obj,
        res => {
          this.userinfo = res;

          setTimeout(() => {
            that.initimg();
          }, 2600);
        if(this.userinfo.today_dubbing_status == 1){
          if(this.userinfo.today_share_status == 0){
            if(this.userinfo.share_end_status == 0){
              if(this.userinfo.share_sequent_count <= 7){
              this.popup = true;
              this.wtf11 = true;

              }
            }
          }
        }
        },
        this
      );
    },

相关文章

网友评论

      本文标题:vue笔记

      本文链接:https://www.haomeiwen.com/subject/zjzbjqtx.html