微信小程序之自定义组件（汇总记录）

一、自定义输入框Input。

1、效果图：

 2、相应m-input.js，m-input.wxml，m-input.wxss，m-input.json文件代码依次如下：

/* 自定义组件--输入框 */
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    placeholderContent: {
      value: ''
    },
    inputType: {
      value: 'text'
    },
    content: {
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    content: '',
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /* 清空 */
    clearContent: function () {
      var content = '';
      this.setData({content: content});
      this.triggerEvent('inputListener', {content});
    },
    /* 内容输入监听 */
    contentInput: function (event) {
      var content = event.detail.value;
      this.setData({content: content});
      this.triggerEvent('inputListener', {content});
    }
  }
})

<view class="input_container">
  <input type="{{inputType}}" placeholder="{{placeholderContent}}" value="{{content}}" bindinput="contentInput"/>
  <view wx:if="{{content != null && content.length > 0}}" class="v_delete" bindtap="clearContent">
    <image src="/images/icon_edittext_delete.png"></image>
  </view>
</view>

.input_container {
  display: flex;
  height: 30px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  background-color: transparent;
}

.v_delete {
  width: 30px;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.input_container input {
  flex-grow: 1;
  padding-right: 10px;
  padding-left: 10px;
}

.input_container image {
  width: 12px;
  height: 12px;
}

{
  "component": true,
  "usingComponents": {}
}

二、自定义步骤器

1、效果图：

 2、相应m-step-view.js，m-step-view.wxml，m-step-view.wxss，m-step-view.json文件代码依次如下：

/* 自定义步骤器 */
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    stepList: {
      type: Array,
      value: null
    },
    stepNum: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    
  }
})

<view class="steps_box">
  <block class="block-step" wx:for="{{stepList}}" wx:key="*this">
    <view class="view_item">
      <!-- 已执行的步骤 -->
      <view class="item_select_y" wx:if="{{stepNum >= index + 1 ? true:false}}"> 
        <view class="item_select_y_inner">{{index + 1}}</view>
      </view>
      <!-- 尚未执行的步骤 -->
      <view class="item_select_n" wx:else>{{index + 1}}</view>
      <!-- 步骤的标题说明 -->
      <text class="{{stepNum >= index + 1 ? 'color_font_y':'color_font_n'}}">{{item.text}}</text>
    </view>
    <!-- 横线 -->
    <view wx:if="{{index == stepList.length -1 ? false:true}}" class="view_line {{stepNum <= index + 1 ? 'color_bg_n':'color_bg_y'}} "></view>
  </block>
</view>

.steps_box {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.block-step {
	flex-direction: row;
}

.view_item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.view_item text {
	font-size: 30rpx;
	margin-top: 20rpx;
}

.item_select_n {
	width: 45rpx;
	height: 45rpx;
	display: flex;
	background-color: rgb(255, 255, 255, 0);
	border: 15rpx solid rgba(255, 255, 255, 0);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	color: #ffffff9d;
	font-size: 30rpx;
	content: "\e732";
}

.item_select_y {
	width: 45rpx;
	height: 45rpx;
	background-color: rgba(255, 255, 255, 0.3);
	border: 15rpx solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
}

.item_select_y_inner {
	background-color: rgb(255, 255, 255);
	border: 1rpx solid rgba(255, 255, 255);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ECA419;
	font-size: 30rpx;
}

.view_line {
	flex-grow: 1;
	height: 5rpx;
	margin: 0rpx 2% 40rpx 2%;
}

.color_font_n{
	color: #ffffff9d;
}

.color_font_y{
	color: #ffffff;
}

.color_bg_n{
	background-color: #ffffff9d;
}

.color_bg_y{
	background-color: #ffffff;
}

{
  "component": true,
  "usingComponents": {}
}