从微信小程序到鸿蒙js开发【14】——自定义组件 原创 精华

<div class="container">
    <text class="icon"> - </text>
    <text class="cnt"> 1 </text>
    <text class="icon"> + </text>
</div>
1.
2.
3.
4.
5.

.container {
    height: 60px;
    width: 240px;
    border: 1px solid #bbbbbb;
    border-radius: 30px;
}
.container>text {
    height: 100%;
    line-height: 60px;
    text-align: center;
    color: #333333;
}
.icon {
    width: 70px;
    font-size: 40px;
}
.cnt {
    width: 100px;
    background-color: #eeeeee;
    font-size: 36px;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

<element name="counter" src="../../../cart_counter/pages/index/index.hml"></element>
1.

 <counter></counter>
1.

export default {
    data: {
        props: ['goodsCnt', 'itemIdx']
    },
}
1.
2.
3.
4.
5.

<div class="container">
    <text class="icon"> - </text>
    <text class="cnt">
        {{ goodsCnt }}
    </text>
    <text class="icon"> + </text>
</div>
1.
2.
3.
4.
5.
6.
7.

<counter goods-cnt="{{ $item.number }}" item-idx="{{ $idx }}"></counter>
1.

<div class="container">
    <text class="icon" onclick="minus({{ itemIdx }})">
        -
    </text>
    <text class="cnt">
        {{ goodsCnt }}
    </text>
    <text class="icon" onclick="add({{ itemIdx }})">
        +
    </text>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

export default {
    data: {
        props: ['goodsCnt', 'itemIdx']
    },
    minus(idx) {
        this.$emit("minus", {idx});
    },
    add(idx) {
        this.$emit("add", {idx});
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

<counter goods-cnt="{{ $item.number }}" item-idx="{{ $idx }}" onminus="minusCarts" @add="addCarts"></counter>
1.

// 减少一个商品
    minusCarts(e) {
        let idx = e.detail.idx;
        let item = this.carts[idx];
        if (item.number == 1) {
            prompt.showToast({
                message: "至少购买1件商品哦",
                duration: 3000
            });
        } else {
            this.carts[idx].number--;
            this.totalPrice -= this.carts[idx].price;
            if (this.carts[idx].checked == 1) {
                this.nowPrice -= this.carts[idx].price;
            }
            this.updateNumber(idx);
        }
    },
// 添加一个商品
    addCarts(e) {
        let idx = e.detail.idx;
        this.carts[idx].number++;
        this.totalPrice += this.carts[idx].price;
        if (this.carts[idx].checked == 1) {
            this.nowPrice += this.carts[idx].price;
        }
        this.updateNumber(idx);
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

<view class="parent">
    <view class="text">{{text}}</view>
    <input type="{{type}}" placeholder="{{placeholder}}" name="{{name}}" onblur="blur" disabled="{{disabled}}"></input>
</view>
1.
2.
3.
4.

Component({
   
    properties: {
        text:{
            type: String,
            value: "输入:"
        },
        type:{
            type: String,
            value: "text"
        },
        placeholder:{
            type: String,
            value: "请输入内容"
        },
        name:{
            type: String,
            value: null
        },
        disabled:{
            type: Boolean,
            value: false
        }
    },

    data: {
       
    },

    methods: {
        blur(event){
            this.triggerEvent("blur", event.detail)
        }
    }
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

{
    "component": true,
    "usingComponents": {}
}
1.
2.
3.
4.

<myInput text="用户名" placeholder="请输入用户名" type="text" onblur="blur"></myInput>
1.

Page({

  data: {
  },

  blur(e) {
    wx.showToast({
      title: e.detail.value,
      duration: 3000,
      icon: 'none'
    })
  },
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

{
  "usingComponents": {
    "myInput": "/component/myInput/myInput"
  }
}
1.
2.
3.
4.
5.