element-ui做背单词的网站

最新推荐文章于 2024-08-07 18:21:52 发布

李守聪

最新推荐文章于 2024-08-07 18:21:52 发布

阅读量658

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/sddzlsc/article/details/117847821

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这个博客展示了如何使用Vue.js创建一个英语单词墙应用，其中包括一个表格组件用于展示单词书，用户点击单词书后会触发10秒延迟加载对应单词。应用还包含一个分页组件，用于显示单词卡片。当鼠标进入单词卡片时，英文单词会隐藏，中文解释显示；离开时则反之。此外，点击表格行会触发API调用，更新单词列表。

摘要由CSDN通过智能技术生成

vue关键代码：

<template>
  <el-container>
    <el-header>英语单词墙</el-header>
    <el-container>
      <el-aside width="300px">
        <el-table :data="tableData" style="width: 100%;cursor:pointer;" @row-click="clickTr">
          <el-table-column prop="name" label="单词书(点击后需等待10秒加载每本书的单词)" width="300" lazy  >
          </el-table-column>
        </el-table>
      </el-aside>
      <el-main>
        <el-pagination
          background
          :current-page="page"
          layout="prev, pager, next, jumper"
          :total="pagetotal"
          :page-size="perpage"
          @current-change="changepage"
        >
        </el-pagination>
        <div class="wai">
          <el-card
            class="box-card" 
            v-for="(item, index) in dclist2" @mouseenter.native="enter(index)" @mouseleave.native="leave(index)" 
            :key="index"
          >
               <div class="text item en" ref="en" >
              {{ item.vocabulary }}
            </div>
       
            <div class="text item cn" ref="cn" >
              {{ item.interpretation}}
            </div>
      
          </el-card>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.text {
  font-size: 14px;

}

.item {

  padding: 18px 0;

}
.cn{

    transform: scale(0);
    position: absolute;
 width: 100%;
 height: 100%;
   display:flex;
justify-content: center;
align-items: center;
background: #F2F2F2
    
}
.en{  transform:scale(1);position: absolute;background:#eeeeee;display:flex;width: 100%;height: 100%;
justify-content: center;
align-items: center;}
.el-card__body {
   transition:0.3s;
   height: 100%;
   width: 100%;
   padding:0px;
position: relative;
display:flex;
justify-content: center;
align-items: center;

}
.box-card{
  width: 20%;
  height: 100px;
  margin: 10px;
}
.wai {
display: flex;
flex-wrap: wrap;
width:100%;
height:480px;


}
</style>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
section {
  height: 100%;
}
.el-header,
.el-footer {
  background-color:  #F2F2F2;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 1);
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>

  <script>
import page from "@/components/Pagination";
export default {
  name: "HelloWorld",
  data() {
    return {
      words: [],
      tableData: [],
      page: 1, //当前页码
      perpage:16, //每页多少条记录
      pagetotal: 1, //一共有多少条记录
    };
  },
  components: {
    page,
  },
  computed: {
    dclist2() {
      var that = this;
      return this.words.filter(function (item, index) {
        if (
          index >= (that.page - 1) * that.perpage &&
          index < (that.page - 1) * that.perpage + that.perpage
        ) {
          return item;
        }
      });
    },
  },

  methods: {
    
    changepage(res) {
      this.page = res;
      // this.getdata(this.page,this.perpage)
    },
enter(index){
// alert("hello")
console.log(index)

  // console.log(this.$refs.cn)
  this.$refs.cn[index].style.transform ="scale(1)"
   this.$refs.en[index].style.transform ="scale(0)"
}
  ,
 leave(index){
  this.$refs.cn[index].style.transform ="scale(0)"
   this.$refs.en[index].style.transform ="scale(1)"
}
  ,
 clickTr(event){
   let that = this;
      //console.log(row["id"]) 跟下面效果一样
      console.log(event.fenlei_code)//获取各行id的值
          axios({
      url: "接口",
      method: "GET",
      header: {
        "Content-Type": "application/json;charset-UTF-8",
      },
      params: {book:event.fenlei_code}
    }).then((res) => {
      console.log(res.data);
console.log(that.words)

      that.words = res.data;
            console.log(that.words)
      that.pagetotal = res.data.length; //一共有多少条记录
    });
     }
  },
  mounted() {
    axios({
      url: "接口",
      method: "GET",
      header: {
        "Content-Type": "application/json;charset-UTF-8",
      },
    }).then((res) => {
      console.log(res.data);
      this.tableData = res.data;
      this.pagetotal = res.data.length; //一共有多少条记录
    });
 
  },
  
  
};
</script>