ant-design-vue時間線使用踩坑及解決
更新時間：2022年12月03日 16:35:58 作者：Cupid_Yan
這篇文章主要介紹了ant-design-vue時間線使用踩坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
ant-design-vue時間線使用踩坑
今天在使用ant-design-vue Timeline組件時，直接使用官網例子發(fā)現并不生效，觀察瀏覽器報錯
[Vue warn]: Unknown custom element:
<a-timeline> - did you register the component correctly?
For recursive components, make sure to provide the "name" option.
這個錯誤很常見，組件未注冊，之后開始網上搜索相關資料，發(fā)現如果直接將報錯信息復制進行搜索是沒有結果的，相關的解決方案試了很多，都未能找到解決辦法。
忽然想起來一句話：“編程中遇到的問題，大部分人之前都遇到過，如果沒找到解決方案，一定是方法錯了”
所以就來到了ant-design-vue的github上尋找issues果然讓我找到了，原文地址是https://github.com/vueComponent/ant-design-vue/issues/364
解決辦法是
import { Timeline } from 'ant-design-vue'
?
components: {
? ? [Timeline.Item.name]: Timeline.Item
}果然是遇事不決找作者！
ant-design-vue時間選擇器賦值默認時間
代碼
<template>
<div>
<a-range-picker
show-time
format="YYYY/MM/DD HH:mm:ss"
:value="[this.moment(startTime, dateFormat),this.moment(endTime, dateFormat)]" //關鍵代碼
@change="onChangeTime"
></a-range-picker>
</div>
</template>
<script>
import Moment from 'moment'
export default {
data () {
this.dateFormat = 'YYYY/MM/DD HH:mm:ss'
return {
startTime: '2019-07-12 16:00:00',
endTime: '2019-07-13 04:00:00',
}
}
methods: {
onChangeTime (dates, dateStrings) {
console.log(dates)
console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
},
}
}
</script>效果圖：
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于vue項目中使用scss的詳細方法步驟,scss是一種css預處理語言,定義了一種新的專門的編程語言,編譯后形成正常的css文件,為css增加一些編程特性,無需考慮瀏覽器的兼容性,讓css更加簡潔、適應性更強,可讀性更佳,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue之多項目|多工程共用相同組件的思路，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue3+element?Plus使用el-tabs標簽頁解決頁面刷新不回到默認頁的問題
這篇文章主要介紹了vue3+element?Plus使用el-tabs標簽頁頁面刷新不回到默認頁的操作方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue 封裝 Adminlte3組件的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要為大家詳細介紹了vue回到頂部監(jiān)聽滾動事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
vue-cli創(chuàng)建的項目中的gitHooks原理解析
這篇文章主要介紹了vue-cli創(chuàng)建的項目中的gitHooks原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
這篇文章主要為大家介紹了vue多頁面項目實現版本快照功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了一個手寫的vue放大鏡，組件使用less，文中給出了示例代碼,需要的朋友可以參考下2019-08-08
這篇文章主要給大家介紹了關于vue項目運行的相關資料,文中通過圖文介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
Vue.js中的refs屬性是一個非常有用的特性,它允許我們在組件中操作 DOM 元素和組件實例,本文來介紹一下Vue寶典之this.$refs屬性的使用,感興趣的可以了解一下2023-12-12