1. 程式人生 > >wux-button 樣式擴充套件 增加shape屬性

wux-button 樣式擴充套件 增加shape屬性

1、原來的寫法介面圖如下

  <wux-button block type="orange">拍照確認</wux-button>

在這裡插入圖片描述
2、現在的寫法只需要增加一個shape="round"引數,可以實現按鈕邊框為半圓

 <wux-button block type="orange" shape="round">拍照確認</wux-button>

在這裡插入圖片描述
3、改造方法
button/index.js增加

 shape: {
   type: String,
   value: 'rect',
 }

button/index.wxml

增加

{{ shape ? 'wux-button--' + shape : '' }}

button/index.wxss增加

.wux-button--round {
  border-radius: 84rpx;
}

搞定