先上效果圖:
用戶點擊到文本框內即可查看Guss的詳情
這是el-dialog里面套着一個el-dialog,我去年寫過一篇博客是使用ifame標簽來實現el-dialog里面嵌套一個div的,隨着開發經驗增加。。。發現用組件化即可很完美的解決dialog里面嵌套dialog的問題。
請務必注意!dialog的放置位置!
在這個Guss的父組件就是圖中陰影部分加入上述代碼(如果需要引用組件,在底下注冊就行)
上一下Guss評分的代碼:
這里需要注意的是!這個isGussShow對象!接下來是isGussShow的定義和showGuess函數詳情:
由於是子組件,vue規定子組件的變量必須在data()函數里面!
因為返回給父組件的只是子組件的一份拷貝,接下來showGuess函數是最關鍵的!
這里務必注意!!!要提取這個this!!!如果不懂js中this用法的可以去看我的另一篇博客:
https://www.cnblogs.com/jyj666/p/14628535.html
這里的isGuessShow是vue對象里的一個屬性!如果你不獲取此時的this那么你改變這里isGuessShow的值,上面那個dialog是不會顯示出來的!!!
最后再提一點,組件傳值記得小寫,大寫識別不了。(就是這里的assessment之類的)