工作中 项目遇到的一些问题笔记~中国社区前台pc

中国社区前台pc：

1、vue中的ref与$refs

   1.1 ref用在dom元素里面或者子组件中

 <div class="left_last">
     <span>状态：</span>
     <v-numodule :list='["未读","已读"]' ref="isRead"></v-numodule>
     <button @click="query">查询</button>
     <button @click="reset">重置</button>
 </div>

1.2 如果用在dom元素上，指向的就是这个元素；如果用在子组件上，则指向组件实例。引用信息就会被注册在父组件的$refs的对象上

query() {
      this.isRead = ["未读", "已读"].indexOf(this.$refs.isRead.value);
}

data() {
    return {
      isRead: null,//读取状态
}

2、scope.$index

2.1 element表格获取每行的index

<template slot-scope="scope">
    <span style="margin-right: 20px;color: #356afa;cursor: pointer;" @click='$router.push({path:"/Inbox/"+ tableData[scope.$index].id})'>详情</span>
    <span @click="onDelete(tableData[scope.$index].id)" style="color: #f54949;cursor: pointer;">删除</span>
</template>

addressee() {
      // 收件箱展示
      u.addressee(
        {
          type: 1,
          currentCount: this.currentCount,
          pageSize: this.pageSize
        },
        data => {
          if (data || data.code == 200) {
            console.log(data);
            this.total = data.data.total;
            this.tableData = data.data.list.map((item, index) => {
              // console.log(item);
              return {
                tda: index + 1,
                tdb: item.reciverName,
                tdc: item.sendTitle,
                tdd: item.sendContent,
                date: item.sendTime,
                tdt: item.strIsRead,
                id: item.id
              };
            });
          }
        }
      );
    },

3、路由跳转

1、在主页面跳转处使用（通过params这种方法传参 缺点：会把id带到页面路径上，并且页面刷新后或者跳到别的页面后 本页参数就会丢失）：$router.push({path:"/Inbox/"+item.id

在路径配置处：

{

path: '/Inbox/:id',

name: 'Inbox',

component: Inbox

}

在子页面传参处：id:this.$route.params.id

对于以上那个问题 可以通过：

主页面跳转：

<el-table-column label="操作" show-overflow-tooltip="false" align="left">
   <template slot-scope="scope">
      <span style="margin-right: 20px;color: #356afa;cursor: pointer;" @click='$router.push({name:"Inbox", params:{id:tableData[scope.$index].id}})'>详情</span>
      <span @click="onDelete(tableData[scope.$index].id)" style="color: #f54949;cursor: pointer;">删除</span>
   </template>
</el-table-column>

子页面：

 created() {
    this.$route.params.id == 0 || this.$route.params.id
      ? localStorage.setItem("id", this.$route.params.id)
      : "";
    u.receiptDetail(
      {
        type: 1,
        id: Number(this.$route.params.id || localStorage.getItem("id"))
      },
      data => {
        if (data.code == 200) {
          this.data = data.data;
          u.unreadNum({}, data => {
            if (data.code == 200) {
              this.$store.commit("setuserNum", data.data);
            }
          });
        }
      }
    );
  },

4、资讯详情里面content字段的处理（视频、图片、文字）

<template>
  <div class="AnnouncementList">
    <div class="title">
      <span></span>
      <span>资讯</span>
    </div>
    <div class="subhead">
      <h3>{{data.title}}</h3>
      <span>{{data.createTime}}</span>
    </div>
    <div class="content">
      <video controls name="media" v-if="flag && !isImg">
        <source :src="data.content" type="video/mp4">
      </video>
      <img :src="data.content" v-if="flag && isImg">
      {{flag ?'':data.content}}
    </div>
  </div>
</template>
<script>
import $ from "jquery";
// import jwplayer from "../../jwplayer.js";

export default {
  data() {
    return {
      data: "",
      flag: false,
      isImg: false
    };
  },
  created() {
    this.$route.params.id == 0 || this.$route.params.id
      ? localStorage.setItem("id", this.$route.params.id)
      : "";
    u.newsDetails(
      {
        id: this.$route.params.id || localStorage.getItem("id")
      },
      data => {
        if (data && data.code == 200) {
          this.data = data.data;
          console.log(this.data);

          this.data.content = this.data.content
            .replace('src="', 'src="'+u.baseurl)
            .replace('src="', "*");
          if (this.data.content.includes("http")) {
            this.flag = true;
            if (this.data.content.includes("img")) {
              this.isImg = true;
            }
          }else{
            return
          }
          let index = this.data.content.indexOf("*");
          let last = this.data.content.indexOf('"', index);
          this.data.content = this.data.content
            .substring(index, last)
            .replace("*", "");
        }
      }
    );
  },
  mounted() {
    // this.getVideo();
  },
  methods: {
    // getVideo() {
    //   $(document).ready(function(e) {
    //     setTimeout(function() {
    //       jwplayer.key = "hTHv8+BvigYhzJUOpkmEGlJ7ETsKmqyrQb8/PetBTBI=";
    //       //非视频，不加载播放器 ?
    //       if (document.getElementById("player") != null) {
    //         jwplayer("player").onReady(function() {});
    //         jwplayer("player").onPlay(function() {});
    //         jwplayer("player").play();
    //       }
    //       var src =
    //         document.getElementById("player") !== null
    //           ? document.getElementById("player").getAttribute("src")
    //           : "";
    //       jwplayer("player").setup({
    //         file: src,
    //         image: "http://52.79.71.169/ChainManagement/upload/1540546033165.jpg" //此处放视频封面图片
    //         // primary: "flash" ? ? ? //360极速模式不支持，会报错！?
    //       });
    //     }, 2000);
    //   });
    // },
  }
};
</script>