無縫滾動表格、數字定時滾動元件封裝
阿新 • • 發佈：2021-07-05
//tableRun.vue <template> <div id="table_scroll"> <div class="table_header"> <div class="head_td" v-for="(item, index) in headLists" :key="index" :style="own_width(item.width)" > {{ item.name }} </div> </div> <div class="table_main"> <div class="table_box" @mouseenter.stop="mouseover" @mouseleave.stop="mouseout" > <div class="table_row" v-for="(item, index) in listTrue" :key="index"> <div class="table_td" v-for="(item_td, index) in headLists" :key="index" :style="own_width(item_td.width)" > {{ item[item_td.value] }} </div> </div> </div> </div> </div> </template> <script> export default { name: "scrollTable", props: { hideString: { type: Array, default: function () { return ["zjhm", "lxhm"]; }, }, headLists: { type: Array, default: function () { return []; }, }, dataLists: { type: Array, default: function () { return []; }, }, }, data() { return { timer: null, }; }, computed: { listTrue() { let lists = this.dataLists; let hideOne = this.hideString[0]; let hideTwo = this.hideString[1]; lists.map((item) => { if (item[hideOne] && item[hideTwo]) { item[hideOne] = item[hideOne].substring(0, 4) + "**********" + item[hideOne].substring( item[hideOne].length - 4, item[hideOne].length ); item[hideTwo] = item[hideTwo].substring(0, 3) + "****" + item[hideTwo].substring( item[hideTwo].length - 4, item[hideTwo].length ); return item; } }); if (this.dataLists.length <= 14) return this.dataLists; lists.push({}); return lists.concat(lists); }, own_width() { return function (param) { if(!param){ return {} } return { width: param, flex: "none!important", } } }, }, mounted() { if (this.dataLists.length <= 14) return; this.go(); }, beforeDestroy() { clearInterval(this.timer); }, methods: { goscroll() { let table_main = document.getElementsByClassName("table_main")[0]; let table_box = document.getElementsByClassName("table_box")[0]; if (table_main.scrollTop >= table_box.scrollHeight / 2) { table_main.scrollTop = 0; } else { table_main.scrollTop++; } }, go() { if (this.timer) { clearInterval(this.timer); } this.timer = setInterval(this.goscroll, 10); }, mouseover() { clearInterval(this.timer); console.log("over"); }, mouseout() { this.go(); console.log("out"); }, }, }; </script> <style lang="less" scoped> #table_scroll { .table_header { width: 1751px; height: 61px; background-color: #244479; color: #fff; display: flex; .head_td { font-size: 18px; flex: 1; display: flex; justify-content: center; align-items: center; } } .table_main { width: 1751px; height: 826px; background-color: black; overflow: scroll; .table_box { width: 1751px; background-color: gray; .table_row { width: 1751px; height: 59px; display: flex; .table_td { font-size: 18px; color: #fff; flex: 1; } } } } } // 隱藏滾輪 ::-webkit-scrollbar { display: none; } // table row style .table_box .table_row:nth-child(even) { // background-color: #244479; background-color: rgba(36, 68, 121, 0.4); } .table_box .table_row:nth-child(odd) { // background-color: #244479; background-color: rgba(36, 68, 121, 0.2); } // table td center .table_td { display: flex; justify-content: center; align-items: center; } .own_width { width: 200px; flex: none !important; } </style>
//numRun.vue <template> <div id="run_num"> <div class="run_left" :style="leftBck"> <div class="four_before"> <div class="num_scroll" v-for="(item, index) in clocks_left" :key="index" > <span v-if="!isNaN(item)"> <i ref="numRef_left" ><span v-for="(iItem_before, iIndex_before) in iArray_before" :key="iIndex_before" >{{ iItem_before }}</span ></i > </span> <span v-else>{{ item }}</span> </div> </div> <div class="star_icon"> <span class="star_span" v-for="(item, index) in starList" :key="index" >*</span > </div> <div class="four_after"> <div class="num_scroll" v-for="(item, index) in clocks_right" :key="index" > <span v-if="!isNaN(item)"> <i ref="numRef_right" ><span v-for="(iItem, iIndex) in iArray" :key="iIndex">{{ iItem }}</span></i > </span> <span v-else>{{ item }}</span> </div> </div> </div> <div class="run_right" :style="rightBck" v-if="num_type === 'address'"> <div class="num_scroll" v-for="(item, index) in clocks_house" :key="index" > <span v-if="!isNaN(item)"> <i ref="numRef" ><span v-for="(iItem, iIndex) in iArray" :key="iIndex">{{ iItem }}</span></i > </span> <span v-else>{{ item }}</span> </div> </div> <div class="run_right_other" :style="rightBckXh" v-if="num_type === 'index'" > <div class="run_right_index"><span>序</span><span>號</span></div> <div class="num_scroll" v-for="(item, index) in clocks_index" :key="index" > <span v-if="!isNaN(item)"> <i ref="numRef" ><span v-for="(iItem, iIndex) in iArray" :key="iIndex">{{ iItem }}</span></i > </span> <span v-else>{{ item }}</span> </div> </div> </div> </template> <script> export default { watch: { num_scroll: { handler: function (val) { console.log(val); this.setNumberTransform_house(val.param); this.setNumberTransform(val.sfz_start, val.sfz_end); }, deep: true, }, }, props: { num_type: { type: String, default: "address", // default: "index" }, num_scroll: { type: Object, default: function () { return { sfz_start: "1111", sfz_end: "1111", param: "000000" }; }, }, }, data() { return { leftBck: { backgroundImage: "url(" + require("../assets/sfz.png") + ")", backgroundRepeat: "no-repeat", backgroundSize: "100% 100%,cover", }, rightBck: { backgroundImage: "url(" + require("../assets/fh.png") + ")", backgroundRepeat: "no-repeat", backgroundSize: "100% 100%,cover", }, rightBckXh: { backgroundImage: "url(" + require("../assets/xh.png") + ")", backgroundRepeat: "no-repeat", backgroundSize: "100% 100%,cover", }, clocks_left: [0, 0, 0, 0], clocks_right: [0, 0, 0, 0], clocks_house: [0, "-", 0, "-", 0, "-", 0, 0, 0], clocks_index: [0, 0, 0, 0], starList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], iArray: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], iArray_before: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], }; }, mounted() { setInterval(() => { // let count = this.getRandomNumber(0, 9999); // this.setNumberTransform(count); // let count_house = this.getRandomNumber(0, 999999); // this.setNumberTransform_house(count_house); }, 1000); }, methods: { setNumberTransform(count1, count2) { // 空位補齊 let newNumber1 = this.PrefixZero(count1, 4); let newNumber2 = this.PrefixZero(count2, 4); let items_left = this.$refs.numRef_left; let items_right = this.$refs.numRef_right; for (let i = 0; i < items_left.length; i++) { let el_left = items_left[i]; // 相容瀏覽器 el_left.style.transform = `translate(-50%, -${newNumber1[i] * 10}%)`; el_left.style.transform = `-ms-translate(-50%, -${ newNumber1[i] * 10 }%)`; el_left.style.transform = `-moz-translate(-50%, -${ newNumber1[i] * 10 }%)`; el_left.style.transform = `-o-translate(-50%, -${newNumber1[i] * 10}%)`; } for (let i = 0; i < items_right.length; i++) { let el_right = items_right[i]; // 相容瀏覽器 el_right.style.transform = `translate(-50%, -${newNumber2[i] * 10}%)`; el_right.style.transform = `-ms-translate(-50%, -${ newNumber2[i] * 10 }%)`; el_right.style.transform = `-moz-translate(-50%, -${ newNumber2[i] * 10 }%)`; el_right.style.transform = `-o-translate(-50%, -${ newNumber2[i] * 10 }%)`; } }, setNumberTransform_house(count) { //區分type if (this.num_type === "index") { // 空位補齊 let newNumber = this.PrefixZero(count, 3); let items = this.$refs.numRef; console.log(items); for (let i = 0; i < items.length; i++) { let el = items[i]; // 相容瀏覽器 el.style.transform = `translate(-50%, -${newNumber[i] * 10}%)`; el.style.transform = `-ms-translate(-50%, -${newNumber[i] * 10}%)`; el.style.transform = `-moz-translate(-50%, -${newNumber[i] * 10}%)`; el.style.transform = `-o-translate(-50%, -${newNumber[i] * 10}%)`; } } else if (this.num_type === "address") { // 空位補齊 let newNumber = this.PrefixZero(count, 6); let items = this.$refs.numRef; console.log(items); for (let i = 0; i < items.length; i++) { let el = items[i]; // 相容瀏覽器 el.style.transform = `translate(-50%, -${newNumber[i] * 10}%)`; el.style.transform = `-ms-translate(-50%, -${newNumber[i] * 10}%)`; el.style.transform = `-moz-translate(-50%, -${newNumber[i] * 10}%)`; el.style.transform = `-o-translate(-50%, -${newNumber[i] * 10}%)`; // debugger } } }, // 獲取隨機數 getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }, // num: 被運算元 , n 固定的總位數 PrefixZero(num, n) { return (Array(n).join(0) + num).slice(-n); }, }, }; </script> <style lang="less" scoped> #run_num { font-family: Avenir, Helvetica, Arial, sans-serif; width: 1826px; height: 200px; display: flex; justify-content: space-between; .run_left { width: 1300px; height: 120px; display: flex; .four_before { width: 301px; display: flex; box-sizing: border-box; padding-left: 20px; .num_scroll { flex: 1; color: #fff; font-size: 80px; span { position: relative; display: inline-block; overflow: hidden; width: 100%; height: 100%; // writing-mode: vertical-rl; // text-orientation: upright; i { width: 100%; position: absolute; // top: 50%; top: 0; // margin-top: -44px; left: 50%; // letter-spacing: 10px; transition: transform 0.5s ease-in-out; transform: translate(-50%, 0); span { height: 120px; display: flex; justify-content: center; align-items: center; color: #44ffff; } } } } } .star_icon { flex: 1; display: flex; justify-content: space-around; align-items: center; font-size: 80px; color: #fff; .star_span { margin-top: 39px; color: #44ffff; } } .four_after { width: 301px; display: flex; box-sizing: border-box; padding-right: 22px; .num_scroll { flex: 1; color: #fff; font-size: 80px; span { position: relative; display: inline-block; overflow: hidden; width: 100%; height: 100%; // writing-mode: vertical-rl; // text-orientation: upright; i { width: 100%; position: absolute; // top: 50%; top: 0; // margin-top: -44px; left: 50%; // letter-spacing: 10px; transition: transform 0.5s ease-in-out; transform: translate(-50%, 0); span { height: 120px; display: flex; justify-content: center; align-items: center; color: #44ffff; } } } } } } .run_right { width: 500px; height: 120px; display: flex; box-sizing: border-box; padding: 0 29px 0 20px; .num_scroll { flex: 1; color: #fff; font-size: 80px; span { display: flex !important; justify-content: center; align-items: center; position: relative; display: inline-block; overflow: hidden; width: 100%; height: 100%; color: #44ffff; // writing-mode: vertical-rl; // text-orientation: upright; i { width: 100%; position: absolute; // top: 50%; top: 0; // margin-top: -44px; left: 50%; // letter-spacing: 10px; transition: transform 0.5s ease-in-out; transform: translate(-50%, 0); span { height: 120px; display: flex; justify-content: center; align-items: center; color: #44ffff; } } } } } .run_right_other { width: 500px; height: 120px; display: flex; box-sizing: border-box; padding-right: 25px; .run_right_index { width: 200px; font-size: 56px; color: #0584d9; display: flex; align-items: center; padding-left: 20px; box-sizing: border-box; span { flex: 1; } } .num_scroll { flex: 1; color: #fff; font-size: 80px; span { display: flex !important; justify-content: center; align-items: center; position: relative; display: inline-block; overflow: hidden; width: 100%; height: 100%; // writing-mode: vertical-rl; // text-orientation: upright; i { width: 100%; position: absolute; // top: 50%; top: 0; // margin-top: -44px; left: 50%; // letter-spacing: 10px; transition: transform 0.5s ease-in-out; transform: translate(-50%, 0); span { height: 120px; display: flex; justify-content: center; align-items: center; color: #44ffff; } } } } } } </style>
//引用元件 <template> <div id="app"> <HelloWorld class="hello_com" :headLists="headLists" :dataLists="dataLists"/> <HelloRunNum :num_scroll="numScroll" num_type="index"/> <!-- <FuckWin10/> <FuckWin11/> --> </div> </template> <script> import HelloWorld from './components/tableRun.vue' import helloRunNum from './components/numRun.vue' // import fuckWin10 from './components/fuckWin10.vue' // import fuckWin11 from './components/fuckWin11.vue' export default { name: 'App', components: { HelloWorld, HelloRunNum:helloRunNum, // FuckWin10:fuckWin10, // FuckWin11:fuckWin11 }, data(){ return { numScroll:{}, headLists:[], dataLists:[] } }, mounted(){ let timer = setTimeout(() => { this.numScroll={sfz_start:"1234",sfz_end:"5678",param:"7890"} this.headLists = [{ name: "序號", value: "value",width:"100px" }, { name: "分組", value: "fz" }, { name: "申請人姓名", value: "sqrxm" }, { name: "證件號碼", value: "zjhm" }, { name: "聯絡號碼", value: "lxhm" }, { name: "家庭人數", value: "jtrs" }, { name: "申請人型別", value: "sqrlx", width: "300px" }, { name: "小區名稱", value: "xqmc" }, { name: "搖號結果", value: "yhjg" }, { name: "戶型", value: "hx" }] this.dataLists = [{ value: 1, id: "a", fz: "第一組", sqrxm: "於歡水", zjhm: "429004199511273119", lxhm: "13333333333", jtrs: "2", sqrlx: "城鎮低收入住房困難家庭", // sqrlx: "城鎮低收入住房", xqmc: "幸福花園", yhjg: "1-3-2-302", hx: "兩室一廳", }, { value: 2, id: "b" }, { value: 3, id: "c" }, { value: 4, id: "d" }, { value: 5, id: "e" }, { value: 6, id: "f" }, { value: 7, id: "g" }, { value: 8, id: "h" }, { value: 9, id: "i" }, { value: 10, id: "j" }, { value: 11, id: "k" }, { value: 12, id: "l" }, { value: 13, id: "m" }, { value: 14, id: "n" }, { value: 15, id: "o" }] }, 1000); console.log(timer) } } </script> <style> #app { /* font-family: Avenir, Helvetica, Arial, sans-serif; */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .hello_com{ margin-bottom: 80px; } </style>