本文主要是介绍element-ui做背单词的网站，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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-paginationbackground:current-page="page"layout="prev, pager, next, jumper":total="pagetotal":page-size="perpage"@current-change="changepage"></el-pagination><div class="wai"><el-cardclass="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>
这篇关于element-ui做背单词的网站的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
