自定義構建購物計算組件&表單組件

1.前言:

        在第九篇文章購物車作好後,還忘記了一個相當重要的計算組件.在鴻蒙的組件中並無提供這樣一個計算功能的組件,所以咱們今天來自定義一個,這個組件和以前作的購物車的小項目放在一塊兒.直男缺少美感,咱們就模仿別人的就行:

2.組件介紹:  

 這裏(之後也要用到)要用到一個標籤:<input> .這個標籤會與表單用在一塊兒,好比搜索框,登陸頁面等都會用到<input>.input>標籤規定用戶可輸入數據的輸入字段.type屬性規定 input元素的類型, 根據不一樣的 type 屬性,輸入字段有多種形態.輸入字段能夠是文本字段、複選框、密碼字段、單選按鈕、按鈕等等,今天所用到的是文本字段、複選框字段和密碼字段.

 

3.js業務邏輯層:

         點擊事件onclick後,執行+的操做能夠沒有上限,但執行-操做在實際應用(例如購物車商品的數量)當中通常是減1後就中止.這裏咱們作一個提示框,用來表示已經減到最小.

import prompt from '@system.prompt';
export default {
    data: {
        title: 'World',
        num:1,
    },
    addnum(){
        ++this.num;
    },
    reducenum(){
        if(this.num>1){
            --this.num;
        }
        else{
            prompt.showToast({
                message:"對不起,商品至少爲一件",
                duration:5000,
            })
        }
    }
}

 

4.視圖層:       這裏type的value能夠是接收text,一樣也能夠是number 讀者能夠自行嘗試

<div class="container">
  <div class="countview">
      <text class="tv1" onclick="reducenum">-</text>
          <input class="inputview" type="text" value="{{num}}"></input>
      <text class="tv2" onclick="addnum">+</text>
  </div>
</div>

 

5.css屬性設置:

.container {
    width: 100%;
    height:1200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.countview{
    width: 300px;
    height: 120px;
    /**border: 3px solid red;**/
    display: flex;
    justify-content: center;
    align-items: center;
   border-radius: 100px;
}
.tv1{
    width: 70px;
    height: 70px;
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    border:3px solid darkgray;
    border-radius: 35px;
    background-color: white;
    color:darkgrey ;
}
.tv2{
    width: 70px;
    height: 70px;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    border:4px solid #FFB964;
    border-radius: 35px;
    background-color: #FFB964;
    color: white;
}
.inputview{
    width: 200px;
    height: 100%;
    background-color: white;
    font-weight: bold;
    font-size: 50px;
    margin-left: 30px;
}

 

6.效果呈現:

 

--------------------------------------------------------------------------------分割線-------------------------------------------------------------------------------------------

 

這裏用到的 input 的type屬性的文本字段和密碼字段.利用這兩個能夠製做一個登陸頁面.

       你們都知道在點擊輸入框時光標會閃爍,也便是須要獲取焦點.而獲取焦點的事件是 onfocus.取消焦點事件爲onblur. 當咱們點擊input的父容器時就得到焦點,也就能夠輸入字段,爲了更直觀的看到獲取焦點成功,我設置了圖標的顏色,未獲取時圖標爲灰色,獲取成功後爲紅色.以下圖

 

 

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

 

 

 

js業務邏輯層:

文章後續內容和相關附件能夠點擊下面的原文連接前往學習
原文連接：https://harmonyos.51cto.com/posts/3101#bkwz

想了解更多關於鴻蒙的內容，請訪問：

51CTO和華爲官方戰略合做共建的鴻蒙技術社區

https://harmonyos.51cto.com/#bkwz