日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
鴻蒙JS開發(fā)14自定義構建購物計算組件&表單組件

想了解更多內容，請訪問：

成都創(chuàng)新互聯(lián)成立與2013年，先為濮陽縣等服務建站，濮陽縣等地企業(yè)，進行企業(yè)商務咨詢服務。為濮陽縣企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

和華為官方合作共建的鴻蒙技術社區(qū)

https://harmonyos./#zz

1.前言:

在第九篇文章購物車做好后,還忘記了一個至關重要的計算組件.在鴻蒙的組件中并沒有提供這樣一個計算功能的組件,因此我們今天來自定義一個,這個組件和之前做的購物車的小項目放在一起.直男缺乏美感,我們就模仿別人的就行: 

 2.組件介紹:

這里(以后也要用到)要用到一個標簽: .這個標簽會與表單用在一起,比如搜索框,登錄頁面等都會用到.input>.input>標簽規(guī)定用戶可輸入數(shù)據(jù)的輸入字段.type屬性規(guī)定 input元素的類型, 根據(jù)不同的 type 屬性,輸入字段有多種形態(tài).輸入字段可以是文本字段、復選框、密碼字段、單選按鈕、按鈕等等,今天所用到的是文本字段、復選框字段和密碼字段.

3.js業(yè)務邏輯層:

點擊事件onclick后,執(zhí)行+的操作可以沒有上限,但執(zhí)行-操作在實際應用(例如購物車商品的數(shù)量)當中一般是減1后就停止.這里我們做一個提示框,用來表示已經(jīng)減到最小。

 
 
 
 
    
  
  
  
  
  1. import prompt from '@system.prompt'; 
    2. 
  
  
  
  
  2. export default { 
    3. 
  
  
  
  
  3.     data: { 
    4. 
  
  
  
  
  4.         title: 'World', 
    5. 
  
  
  
  
  5.         num:1, 
    6. 
  
  
  
  
  6.     }, 
    7. 
  
  
  
  
  7.     addnum(){ 
    8. 
  
  
  
  
  8.         ++this.num; 
    9. 
  
  
  
  
  9.     }, 
    10. 
  
  
  
  
  10.     reducenum(){ 
    11. 
  
  
  
  
  11.         if(this.num>1){ 
    12. 
  
  
  
  
  12.             --this.num; 
    13. 
  
  
  
  
  13.         } 
    14. 
  
  
  
  
  14.         else{ 
    15. 
  
  
  
  
  15.             prompt.showToast({ 
    16. 
  
  
  
  
  16.                 message:"對不起,商品至少為一件", 
    17. 
  
  
  
  
  17.                 duration:5000, 
    18. 
  
  
  
  
  18.             }) 
    19. 
  
  
  
  
  19.         } 
    20. 
  
  
  
  
  20.     } 
    21. 
  
  
  
  
  21. } 
    22.

 4.視圖層:

這里type的value可以是接收text,同樣也可以是number 讀者可以自行嘗試。

   
 
 
 
    
    
  
  
  
  1.  
    2. 
    
  
  
  
  2.    
    3. 
    
  
  
  
  3.       - 
    4. 
    
  
  
  
  4.            
    5. 
    
  
  
  
  5.       + 
    6. 
    
  
  
  
  6.   
 
  •  

     5.css屬性設置:

     
 
 
 
      
  
  
  
  
    1. .container { 
      2. 
  
  
  
  
    2.     width: 100%; 
      3. 
  
  
  
  
    3.     height:1200px; 
      4. 
  
  
  
  
    4.     display: flex; 
      5. 
  
  
  
  
    5.     justify-content: center; 
      6. 
  
  
  
  
    6.     align-items: center; 
      7. 
  
  
  
  
    7. } 
      8. 
  
  
  
  
    8. .countview{ 
      9. 
  
  
  
  
    9.     width: 300px; 
      10. 
  
  
  
  
    10.     height: 120px; 
      11. 
  
  
  
  
    11.     /**border: 3px solid red;**/ 
      12. 
  
  
  
  
    12.     display: flex; 
      13. 
  
  
  
  
    13.     justify-content: center; 
      14. 
  
  
  
  
    14.     align-items: center; 
      15. 
  
  
  
  
    15.    border-radius: 100px; 
      16. 
  
  
  
  
    16. } 
      17. 
  
  
  
  
    17. .tv1{ 
      18. 
  
  
  
  
    18.     width: 70px; 
      19. 
  
  
  
  
    19.     height: 70px; 
      20. 
  
  
  
  
    20.     font-size: 60px; 
      21. 
  
  
  
  
    21.     font-weight: bold; 
      22. 
  
  
  
  
    22.     text-align: center; 
      23. 
  
  
  
  
    23.     border:3px solid darkgray; 
      24. 
  
  
  
  
    24.     border-radius: 35px; 
      25. 
  
  
  
  
    25.     background-color: white; 
      26. 
  
  
  
  
    26.     color:darkgrey ; 
      27. 
  
  
  
  
    27. } 
      28. 
  
  
  
  
    28. .tv2{ 
      29. 
  
  
  
  
    29.     width: 70px; 
      30. 
  
  
  
  
    30.     height: 70px; 
      31. 
  
  
  
  
    31.     font-size: 50px; 
      32. 
  
  
  
  
    32.     font-weight: bold; 
      33. 
  
  
  
  
    33.     text-align: center; 
      34. 
  
  
  
  
    34.     border:4px solid #FFB964; 
      35. 
  
  
  
  
    35.     border-radius: 35px; 
      36. 
  
  
  
  
    36.     background-color: #FFB964; 
      37. 
  
  
  
  
    37.     color: white; 
      38. 
  
  
  
  
    38. } 
      39. 
  
  
  
  
    39. .inputview{ 
      40. 
  
  
  
  
    40.     width: 200px; 
      41. 
  
  
  
  
    41.     height: 100%; 
      42. 
  
  
  
  
    42.     background-color: white; 
      43. 
  
  
  
  
    43.     font-weight: bold; 
      44. 
  
  
  
  
    44.     font-size: 50px; 
      45. 
  
  
  
  
    45.     margin-left: 30px; 
      46. 
  
  
  
  
    46. } 
      47.

     6.效果呈現(xiàn):

    這里用到的 input 的type屬性的文本字段和密碼字段.利用這兩個可以制作一個登錄頁面。

    大家都知道在點擊輸入框時光標會閃爍,也即是需要獲取焦點.而獲取焦點的事件是 onfocus.取消焦點事件為onblur. 當我們點擊input的父容器時就獲得焦點,也就可以輸入字段,為了更直觀的看到獲取焦點成功,我設置了圖標的顏色,未獲取時圖標為灰色,獲取成功后為紅色.如下圖：

    placeholder是用戶名密碼框未輸入內容時,默認顯示的灰色文字。當未輸入字段時顯示，當在輸入字段獲得焦點時消失。

    js業(yè)務邏輯層:

     
 
 
 
      
  
  
  
  
    1. export default { 
      2. 
  
  
  
  
    2.     data: { 
      3. 
  
  
  
  
    3.         title: 'World', 
      4. 
  
  
  
  
    4.         flag:false, 
      5. 
  
  
  
  
    5.     }, 
      6. 
  
  
  
  
    6.     click(){ 
      7. 
  
  
  
  
    7.         this.flag=true; 
      8. 
  
  
  
  
    8.     }, 
      9. 
  
  
  
  
    9.     click1(){ 
      10. 
  
  
  
  
    10.         this.flag=false; 
      11. 
  
  
  
  
    11.     } 
      12. 
  
  
  
  
    12. } 
      13.

     視圖層:

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.      
      3. 
  
  
  
  
    3.          
      4. 
  
  
  
  
    4.           
      5. 
  
  
  
  
    5.     
     
  •      
  •          
  •           
  •     
    •  
  •      
  •         登錄 
  •     
    •  
  •  

     css屬性設置:

     
 
 
 
      
  
  
  
  
    1. .container { 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.     width: 100%; 
      4. 
  
  
  
  
    4.     height: 1200px; 
      5. 
  
  
  
  
    5.     display: flex; 
      6. 
  
  
  
  
    6.     justify-content: center; 
      7. 
  
  
  
  
    7.     align-items: center; 
      8. 
  
  
  
  
    8.     flex-direction: column; 
      9. 
  
  
  
  
    9. } 
      10. 
  
  
  
  
    10. .one{ 
      11. 
  
  
  
  
    11.     width: 80%; 
      12. 
  
  
  
  
    12.     height: 150px; 
      13. 
  
  
  
  
    13.     background-color: rgb(242, 243, 247); 
      14. 
  
  
  
  
    14.     border-radius: 100px; 
      15. 
  
  
  
  
    15.     margin: 20px; 
      16. 
  
  
  
  
    16.     display: flex; 
      17. 
  
  
  
  
    17.     align-items: center; 
      18. 
  
  
  
  
    18. } 
      19. 
  
  
  
  
    19. .img1{width: 80px; 
      20. 
  
  
  
  
    20.     height: 80px; 
      21. 
  
  
  
  
    21. } 
      22. 
  
  
  
  
    22. .input1{ 
      23. 
  
  
  
  
    23.     height: 100%; 
      24. 
  
  
  
  
    24.     font-size: 50px; 
      25. 
  
  
  
  
    25.     focus-color: rgb(109, 131, 170); 
      26. 
  
  
  
  
    26. } 
      27. 
  
  
  
  
    27. .bottom{ 
      28. 
  
  
  
  
    28.     width: 280px; 
      29. 
  
  
  
  
    29.     height: 280px; 
      30. 
  
  
  
  
    30.     border-radius: 140px; 
      31. 
  
  
  
  
    31.     background-color: rgb(192, 192, 190); 
      32. 
  
  
  
  
    32.     margin: 60px; 
      33. 
  
  
  
  
    33.     font-size: 100px; 
      34. 
  
  
  
  
    34.  
      35. 
  
  
  
  
    35. } 
      36. 
  
  
  
  
    36. .but{ 
      37. 
  
  
  
  
    37.     display: flex; 
      38. 
  
  
  
  
    38.     justify-content: center; 
      39. 
  
  
  
  
    39.  
      40. 
  
  
  
  
    40. } 
      41.

    歡迎讀者朋友訂閱我的專欄:[HarmonyOS開發(fā)從0到1]

    https://harmonyos./column/35

    想了解更多內容，請訪問：

    和華為官方合作共建的鴻蒙技術社區(qū)

    https://harmonyos./#zz


    標題名稱：鴻蒙JS開發(fā)14自定義構建購物計算組件&表單組件
    文章鏈接：http://www.5511xx.com/article/dhjdici.html