element-ui做背单词的网站

Posted 2022-12-04 李守聪

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>