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

一、自定义输入框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});
    }
  }
})

.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: {
    
  }
})

  
    
      
       
        {{index + 1}}
      
      
      {{index + 1}}
      
      {{item.text}}
    
    
    
  

.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": {}
}