iT邦幫忙

1

CoreUI & Element UI 表單驗證共用

  • 分享至 

  • xImage

各位有沒有遇過同一個表單使用兩種或兩種以上的元件?
目前在開發表單
使用 CoreUI & ElementUI & Vue.js來開發
表單上有使用 Element UI 和 CoreUI 的元件

但在表單驗證的時候有遇到一些問題
目前Element UI是正常

但CoreUI無法在前端做即時回饋
1.假設現在顯示不可空白,但鍵入值錯誤訊息並不會消失
2.鍵入值,點選表單送出,錯誤訊息並不會消失

<datePicker id="date1" type="single" isRequired="true"
	empty="false"  patternKey="YYYY/MM/DD"  />
 <div class="invalid-feedback">
     {{errorDatas}}
 </div>
 <input type="text" id="date1" value="" class="form-control" required />
</div>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2
dragonH
iT邦超人 5 級 ‧ 2019-12-06 13:25:43
最佳解答

各位有沒有遇過同一個表單使用兩種或兩種以上的元件?

但是會盡量避免

因為你很難知道他們會不會有衝突

或許你要多說一些細節

搞不好你的需求

只用 element-ui 就能全部搞定

晚點有空再補範例

歪歪 iT邦新手 3 級 ‧ 2019-12-06 13:35:22 檢舉

dragonH
其實我們本來就打算元件都使用ElementUI來處理
但因為我們有些表單會在平板上面操作
公司又不想另外專門為平板再客製一個畫面

後來我們發現ElementUI DatePicker這個元件
在平板上面操作的話,超過邊界的部分物件會直接被卡掉
但CoreUI的元件卻會自動直接往下排列
所以我們才會又選CoreUI的元件來使用

dragonH iT邦超人 5 級 ‧ 2019-12-06 22:20:46 檢舉

eric9991517

codepen

我不確定你 datepicker 是不是用 element-ui 的

在平板上面操作的話,超過邊界的部分物件會直接被卡掉

我認為你應該要看一下被卡掉時

css 是什麼情況

然後再來修正

才會是比較適合的作法

甲土豆 iT邦新手 5 級 ‧ 2019-12-09 09:33:48 檢舉

大神 /images/emoticon/emoticon32.gif

我要發表回答

立即登入回答