一、自定义输入框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": {}
}