如標題
因為我後續還有很多頁面會需要讀取當下時間
請問我要怎麼將現有的[收料時間]獨立成一個.vue頁面
提供給接下來其他頁面使用?
以下是目前的程式碼
<template>
<div class="row" style="margin-bottom: 8px; margin-left:10px;">
<div class="row">
收料時間<span class="space"/><input type="text" size="5" v-model="datetime">
收料員<span class="space"/><input type="text" size="10" v-model="fullName">
</div>
</div>
</template>
<script>
export default {
name: 'IMPS03002',
components: {
Header,
},
data () {
return {
datetime: this.getDatetime(),
header: {
},
lines: []
}
},
computed: {
},
methods: {
getDatetime: function(){
return new Date().toLocaleTimeString('en-US', { hour12: false, hour: "numeric",minute: "numeric",second: "numeric"})
},
intervalUpdate_datetime: function(){
this.datetime = this.getDatetime()
},
toggle: function(){
if(this.bars===false) this.bars=true
else this.bars=false
}
},
/*setInterval()按照指定的周期來調用函數*/
/*setTimeout() 只執行一次*/
/*created 實體建立完成。資料 $data 已可取得，但 $el 屬性還未被建立。*/
created: function () {
setInterval(() => {
this.intervalUpdate_datetime()
}, 1000)
}
}
</script>
<style scoped>
.row-td {
word-break: break-all
}
</style>
已邀請的邦友 {{ invite_list.length }}/5
你把那部分獨立做程一個Component(組件)就行了!
首先先把你要的部分獨立出來成timeComponents.vue
<template>
<div>
<span class="space"/><input type="text" size="5" v-model="datetime">
</div>
</template>
<script>
export default {
name: 'timeComponents',
data () {
return {
datetime: this.getDatetime(),
header: {},
lines: []
}
},
methods: {
getDatetime: function(){
return new Date().toLocaleTimeString('en-US', { hour12: false, hour: "numeric",minute: "numeric",second: "numeric"})
},
intervalUpdate_datetime: function(){
this.datetime = this.getDatetime()
},
toggle: function(){
if(this.bars===false) this.bars=true
else this.bars=false
}
},
created: function () {
setInterval(() => {
this.intervalUpdate_datetime()
}, 1000)
}
}
</script>
<style scoped>
</style>
然後你原本的頁面要import並註冊剛剛那個組件
在你要的位置擺上你的組件
<template>
<div class="row" style="margin-bottom: 8px; margin-left:10px;">
<div class="row">
<!--引用的組件-->
收料時間<TimeCom/>
收料員<span class="space"/><input type="text" size="10" >
</div>
</div>
</template>
<script>
import TimeCom from '@/components/timeComponents' // 引用
export default {
name: 'timComponent',
components: { TimeCom },
template: '<TimeCom/>'
}
</script>
<style scoped>
.row-td {
word-break: break-all
}
</style>
謝謝你
我照你的方法目前成功顯現出時間
但我還有遇到一個問題timeComponents.vue底下的這段程式碼，會讓現在的時間每分每秒都在更新，但是目前我原本頁面import後時間沒有及時在更新，請問我還遺漏什麼部分嗎?
created: function () {
setInterval(() => {
this.intervalUpdate_datetime()
}, 1000)
}
@RE:homura
我已找到問題點，是括號的問題，改正後就能及時更新囉～
`export default {
name: 'timeComponents',
data () {
return {
datetime: this.getDatetime(),
header: {},
lines: []
}
},
methods: {
getDatetime: function(){
return new Date().toLocaleTimeString('en-US', { hour12: false, hour: "numeric",minute: "numeric",second: "numeric"})
},
intervalUpdate_datetime: function(){
this.datetime = this.getDatetime()
}
},
created: function () {
setInterval(() => {
this.intervalUpdate_datetime()
}, 1000)
}
}`
iThome鐵人賽
看影片追技術