本申請(qǐng)屬于計(jì)算機(jī)，具體涉及一種基于vue的ip輸入組件。

背景技術(shù)：

1、在用戶交互領(lǐng)域中，能夠?qū)崿F(xiàn)用戶交互圖形界面的技術(shù)非常多，像平時(shí)用的安卓(android)手機(jī)軟件是用java技術(shù)實(shí)現(xiàn)的，電腦是wi?ndows操作系統(tǒng)的其軟件大多是基于c++或者c#實(shí)現(xiàn)的。c++、c#和java技術(shù)都有強(qiáng)大的圖形用戶界面庫(kù)，可以輕松地創(chuàng)建復(fù)雜的用戶界面，但是它們都不能運(yùn)用于網(wǎng)頁(yè)中。

2、web網(wǎng)頁(yè)技術(shù)在mvc模式時(shí)代普遍是使用html、javascr?i?pt和css技術(shù)來(lái)開(kāi)發(fā)，也有已經(jīng)實(shí)現(xiàn)的少量ip輸入框組件，但是已經(jīng)不適用于mvvm模式中了。

3、申請(qǐng)內(nèi)容

4、本申請(qǐng)為了克服現(xiàn)有技術(shù)的不足，提供了一種基于vue的ip輸入組件，基于vue技術(shù)實(shí)現(xiàn)，是一個(gè)功能強(qiáng)大、使用便捷、交互體驗(yàn)感強(qiáng)的輸入框組件，意在完善vue技術(shù)在i?p輸入框組件這塊的不足。

5、為了實(shí)現(xiàn)上述目的，本申請(qǐng)采用以下技術(shù)方案：

6、一種基于vue的i?p輸入組件，所述i?p輸入組件嵌設(shè)于mvvm網(wǎng)頁(yè)，所述i?p輸入組件包括：

7、第一輸入?yún)^(qū)，用于輸入所述i?p的第一節(jié)字段；

8、第二輸入?yún)^(qū)，用于輸入所述i?p的第二節(jié)字段；

9、第三輸入?yún)^(qū)，用于輸入所述i?p的第三節(jié)字段；

10、第四輸入?yún)^(qū)，用于輸入所述i?p的第四節(jié)字段；

11、第一分隔符，位于所述第一輸入?yún)^(qū)和所述第二輸入?yún)^(qū)之間；

12、第二分隔符，位于所述第二輸入?yún)^(qū)和所述第三輸入?yún)^(qū)之間；以及

13、第三分隔符，位于所述第三輸入?yún)^(qū)和所述第四輸入?yún)^(qū)之間。

14、進(jìn)一步地，所述mvvm網(wǎng)頁(yè)的光標(biāo)在所述第二輸入?yún)^(qū)向前刪除完所述第二節(jié)字段后根據(jù)向前刪除指令移動(dòng)到所述第一輸入?yún)^(qū)。

15、進(jìn)一步地，所述mvvm網(wǎng)頁(yè)的光標(biāo)在所述第二輸入?yún)^(qū)向后刪除完所述第二節(jié)字段后根據(jù)向后刪除指令移動(dòng)到所述第三輸入?yún)^(qū)。

16、進(jìn)一步地，所述mvvm網(wǎng)頁(yè)的光標(biāo)根據(jù)分隔符輸入指令從所述第一輸入?yún)^(qū)移動(dòng)到所述第二輸入?yún)^(qū)。

17、進(jìn)一步地，所述mvvm網(wǎng)頁(yè)的光標(biāo)根據(jù)左位移指令從所述第二輸入?yún)^(qū)移動(dòng)到所述第一輸入?yún)^(qū)；或者，所述mvvm網(wǎng)頁(yè)的光標(biāo)根據(jù)右位移指令從所述第一輸入?yún)^(qū)移動(dòng)到所述第二輸入?yún)^(qū)。

18、進(jìn)一步地，所述mvvm網(wǎng)頁(yè)的光標(biāo)根據(jù)起始指令從所述第一輸入?yún)^(qū)的所述第一節(jié)字段中移動(dòng)到所述第一輸入?yún)^(qū)的頭部；或者，所述mvvm網(wǎng)頁(yè)的光標(biāo)根據(jù)結(jié)束指令從所述第一輸入?yún)^(qū)的所述第一節(jié)字段中移動(dòng)到所述第一輸入?yún)^(qū)的尾部。

19、進(jìn)一步地，所述mvvm網(wǎng)頁(yè)的光標(biāo)根據(jù)切換指令從所述第一輸入?yún)^(qū)移動(dòng)到所述第二輸入?yún)^(qū)的頭部。

20、另外，本申請(qǐng)還提供了一種獲得如上所述的基于vue的i?p輸入組件的方法，包括：

21、獲取所述i?p輸入組件的代碼；

22、將所述i?p輸入組件的代碼寫(xiě)入vue項(xiàng)目的組件目錄中，并命名為i?nput?ip.vue；

23、將所述mvvm網(wǎng)頁(yè)上設(shè)置填寫(xiě)網(wǎng)絡(luò)配置的表單，形成app.vue；

24、將所述i?nput?i?p.vue引入到app.vue中使用；以及

25、通過(guò)vue的ref屬性在所述mvvm頁(yè)面的htm?l中綁定i?nput?i?p.vue，以形成所述ip輸入組件。

26、進(jìn)一步地，所述將所述i?p輸入組件的代碼寫(xiě)入vue項(xiàng)目的組件目錄中，包括：

27、將所述i?p輸入組件的代碼寫(xiě)入vue項(xiàng)目的src目錄下的components文件夾中；所述src目錄下放置assets靜態(tài)文件目錄、components文件夾、app.vue主視圖頁(yè)面文件和main.js主入口文件。

28、進(jìn)一步地，所述通過(guò)vue的ref屬性在所述mvvm頁(yè)面的htm?l中綁定i?nput?ip.vue，包括：

29、在所述mvvm網(wǎng)頁(yè)上methods函數(shù)中調(diào)用i?nput?i?p.vue，再通過(guò)htm?l標(biāo)簽完成綁定。

30、與現(xiàn)有技術(shù)相比，本申請(qǐng)具有以下優(yōu)點(diǎn)：

31、通過(guò)本申請(qǐng)的運(yùn)用，在用戶端(泛指所有能夠使用vue技術(shù)生成交互視圖的用戶機(jī)、軟件，此后同)一些需要輸入i?p的地方，都能夠正確的引導(dǎo)用戶，減少用戶的試錯(cuò)成本，使輸入內(nèi)容更加規(guī)范合理，操作更加便捷，交互體驗(yàn)更好。在開(kāi)發(fā)上，為實(shí)現(xiàn)本申請(qǐng)的功能，不同于市面上其他i?p輸入組件是基于i?nput標(biāo)簽封裝，本發(fā)明是以textarea標(biāo)簽為核心來(lái)實(shí)現(xiàn)的，使用簡(jiǎn)單，本發(fā)明的組件化更是節(jié)省了開(kāi)發(fā)成本，提高了開(kāi)發(fā)效率。

技術(shù)實(shí)現(xiàn)思路

技術(shù)特征：

1.一種基于vue的ip輸入組件，其特征在于，所述ip輸入組件嵌設(shè)于mvvm網(wǎng)頁(yè)，所述ip輸入組件包括：

2.根據(jù)權(quán)利要求1所述的基于vue的ip輸入組件，其特征在于：

3.根據(jù)權(quán)利要求2所述的基于vue的ip輸入組件，其特征在于：

4.根據(jù)權(quán)利要求3所述的基于vue的ip輸入組件，其特征在于，還包括：

5.根據(jù)權(quán)利要求4所述的基于vue的ip輸入組件，其特征在于，還包括：

6.根據(jù)權(quán)利要求5所述的基于vue的ip輸入組件，其特征在于，還包括：

7.根據(jù)權(quán)利要求6所述的基于vue的ip輸入組件，其特征在于，還包括：

8.一種獲得如權(quán)利要求1-7任一項(xiàng)所述的基于vue的ip輸入組件的方法，其特征在于，包括：

9.根據(jù)權(quán)利要求8所述的方法，其特征在于，所述將所述ip輸入組件的代碼寫(xiě)入vue項(xiàng)目的組件目錄中，包括：

10.根據(jù)權(quán)利要求9所述的方法，其特征在于，所述通過(guò)vue的ref屬性在所述mvvm頁(yè)面的html中綁定inputip.vue，包括：

技術(shù)總結(jié)
本申請(qǐng)公開(kāi)了一種基于vue的ip輸入組件，其特征在于，所述ip輸入組件嵌設(shè)于MVVM網(wǎng)頁(yè)，所述ip輸入組件包括：第一輸入?yún)^(qū)，用于輸入所述ip的第一節(jié)字段；第二輸入?yún)^(qū)，用于輸入所述ip的第二節(jié)字段；第三輸入?yún)^(qū)，用于輸入所述ip的第三節(jié)字段；第四輸入?yún)^(qū)，用于輸入所述ip的第四節(jié)字段；第一分隔符，位于所述第一輸入?yún)^(qū)和所述第二輸入?yún)^(qū)之間；第二分隔符，位于所述第二輸入?yún)^(qū)和所述第三輸入?yún)^(qū)之間；以及第三分隔符，位于所述第三輸入?yún)^(qū)和所述第四輸入?yún)^(qū)之間。本申請(qǐng)能夠在用戶端一些需要輸入i?p的地方正確的引導(dǎo)用戶，減少用戶的試錯(cuò)成本，使輸入內(nèi)容更加規(guī)范合理，操作更加便捷，交互體驗(yàn)更好。

技術(shù)研發(fā)人員：方家愉,孫利杰,陳松政
受保護(hù)的技術(shù)使用者：湖南麒麟信安科技股份有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2025/1/9