199 lines
7.1 KiB
HTML
199 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>节假日信息预览</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
height: 100%;
|
||
}
|
||
|
||
#app {
|
||
height: 100%;
|
||
}
|
||
|
||
td {
|
||
border: 1px solid black;
|
||
}
|
||
</style>
|
||
<!--
|
||
Vue 3
|
||
Docs: https://cn.vuejs.org/guide/quick-start.html
|
||
Download: https://unpkg.com/vue@3/dist/vue.global.js
|
||
-->
|
||
<script src="./assets/lib/vue.global.min.js"></script>
|
||
<!--
|
||
axios
|
||
Docs: http://www.axios-js.com/docs/
|
||
Download: https://unpkg.com/axios@1.3.0/dist/axios.min.js
|
||
-->
|
||
<script src="./assets/lib/axios.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app">
|
||
<div>
|
||
<h1>节日列表</h1>
|
||
<table style="margin: 10px auto;">
|
||
<tr v-for="festival in dataList">
|
||
<td>{{ festival.name }}</td>
|
||
<td>{{ festival.date }}</td>
|
||
<td>{{ festival.id }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div id="festival-compare">
|
||
<h1>节日信息对比</h1>
|
||
<input v-model="compare" />
|
||
<table style="width: 100vw;">
|
||
<template v-for="key in festivalKeys">
|
||
<tr v-if="!['poetry','baike'].includes(key)">
|
||
<td>{{ key }}</td>
|
||
<td v-for="f in compareKeys">{{ dataDict[f][key] }}</td>
|
||
</tr>
|
||
</template>
|
||
</table>
|
||
<style>
|
||
table {
|
||
table-layout: fixed;
|
||
width: 100%;
|
||
}
|
||
|
||
table,
|
||
th,
|
||
td {
|
||
border: 1px solid #999;
|
||
padding: 5px;
|
||
text-align: left;
|
||
}
|
||
|
||
td.desc {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
</style>
|
||
</div>
|
||
<div id="festival-list">
|
||
<h1>节日详细信息</h1>
|
||
<div v-for="festival in dataList">
|
||
<!-- {{ festival }}<hr style="margin: 20px 0;"> -->
|
||
<h2>{{ festival.date }} | {{ festival.fullName }} | {{ festival.englishName }}</h2>
|
||
<table>
|
||
<tr v-for="key in Object.keys(festival)">
|
||
<td>{{ key }}</td>
|
||
<td>{{ festival[key] }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<hr>
|
||
<p style="white-space: pre-wrap;">{{ JSON.stringify(dataList, null, 4) }}</p>
|
||
</div>
|
||
<script type="module">
|
||
window.instance = Vue.createApp({
|
||
data() {
|
||
return {
|
||
dataList: [],
|
||
compare: '寒食节 立秋'
|
||
}
|
||
},
|
||
computed: {
|
||
festivalKeys() {
|
||
return Object.keys(this.dataList[0] || {})
|
||
},
|
||
compareKeys() {
|
||
return this.compare.split(" ")
|
||
},
|
||
dataDict() {
|
||
let dict = {}
|
||
this.dataList.forEach(i => dict[i.name] = i)
|
||
return dict
|
||
},
|
||
},
|
||
mounted() {
|
||
// 网页加载完成
|
||
// this.$refs.userInput.select()
|
||
let that = this
|
||
axios.get('data/holiday.min.json')
|
||
// axios.get('data/holiday.simplify.min.json')
|
||
.then(function (response) {
|
||
// handle success
|
||
console.log(response)
|
||
that.dataList = response.data
|
||
})
|
||
.catch(function (error) {
|
||
// handle error
|
||
console.log(error)
|
||
})
|
||
.then(function () {
|
||
// always executed
|
||
})
|
||
},
|
||
methods: {
|
||
catchError(func) {
|
||
try {
|
||
return func()
|
||
} catch (err) {
|
||
// console.log(err)
|
||
// return '[ERROR] 该字符串暂时无法解码' + '\n' + err.message
|
||
return
|
||
}
|
||
},
|
||
scrollTo(id) {
|
||
let dom = document.getElementById(id)
|
||
if (dom) {
|
||
let container = document.getElementById('content')
|
||
// console.log("container:", container, dom.offsetTop)
|
||
container.scrollTo({
|
||
top: dom.offsetTop - container.offsetTop
|
||
})
|
||
} else {
|
||
console.log("找不到元素，id:", id)
|
||
}
|
||
},
|
||
copyString(stringToCopy, i) {
|
||
// 复制
|
||
// refer: https://blog.csdn.net/qq_44980680/article/details/126453761
|
||
var input = document.createElement("textarea") // 创建input对象
|
||
input.value = stringToCopy; // 设置复制内容
|
||
document.body.appendChild(input) // 添加临时实例
|
||
input.select() // 选择实例内容
|
||
document.execCommand("Copy") // 执行复制
|
||
document.body.removeChild(input) // 删除临时实例
|
||
|
||
// 显示复制成功的标志
|
||
// copyCount.value++
|
||
i._copyCount++
|
||
let promotEl = this.$refs[i._promotRef][0]
|
||
if (promotEl) {
|
||
promotEl.textContent = "复制成功"
|
||
let oldCopyCount = i._copyCount // copyCount.value
|
||
let refName = i._resultTextboxRef
|
||
this.$refs[refName][0].style.backgroundColor = '#fbfbde'
|
||
setTimeout(() => {
|
||
if (oldCopyCount == i._copyCount) {
|
||
promotEl.textContent = ""
|
||
this.$refs[refName][0].style.backgroundColor = ''
|
||
}
|
||
// 如果两数不等，说明中间点击复制了多次，这里就不用处理了，等最后一个timeout处理
|
||
}, 1000)
|
||
// document.getElementById(i.id).getElementsByClassName('result-textbox').style.backgroundColor = '#fbfbde'
|
||
}
|
||
},
|
||
|
||
}
|
||
}).mount('#app')
|
||
</script>
|
||
</body>
|
||
|
||
</html> |