自定义组件
想要编写一个属于自己的自定义组件，建议先看看官网的介绍
以下是本人自己封装的一个自定义组件，以及理解，简单粗暴直接上代码
创建components文件
1)、右键左上角+号，创建components文档，专门放组件的文件夹。Components.png
2)、 在【components】文件中创建你需要的自定义组件名字，如【title-input】(常见的有标题有输入框的组件)title-input.png
3)、右击title-input文件夹，会出现一个菜单，鼠标移到【新建】，会出现二级菜单，点击【component】，接着输入组件名字 title-input然后回车，开发者工具会自动为你创建 json wxml wxss js这四个文件，同时自动把json 与 js的方法也自动写好；title-input.png
4)、查看组件的json、js文件，应该是以下的样子了
title-input.json 文档
{
"component": true,
"usingComponents": {}
}
title-input.js 文档
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
5)、开始根据个人需求开始编写组件，例如：
wxml
<block wx:if="{{ show }}">
<view class="we-title-picker-container">
<view style="width:{{titleWidth}};font-size:{{titleSize}};color:{{titleColor}};">{{ title }}</view>
<input
// 根据传入的style进行设置input
style='width:{{inputWidth}};height:{{inputHeight}};font-size:{{inputSize}};color:{{inputColor}};border:{{inputBorder}};border-radius:{{radius}};box-sizing: border-box;padding:{{inputPadding}}'
// 根据传入描述的提示文字
placeholder='{{inputPlaceholder}}'
// 设置 input 的 vaule 值
value='{{inputValue}}'
// input 类型(因为目前只用到text属性，所以写死)
type='text'
// 是否需要密码类型
password='{{inputPassword}}'
// 描述文字的样式
placeholder-style='{{placeholderStyle}}'
// 是否禁止输入
disabled='{{inputDisabled}}'
// 最长字节限制（-1是无限）
maxlength='{{inpitMaxLength}}'
// 传递组件内部数据的方法
bindinput='_pickerChangeEvent'
/>
</view>
</block>
wxss
.title-picker-container {
display: flex;
align-items: center;
width: 100%;
height: 100%;
}
js
// 默认属性值
const DEF_CONFIG = {
show: true,
title: '标题',
titleWidth: '220rpx',
titleSize: '34rpx',
titleColor: '#353535',
inputWidth: '254rpx',
inputHeight: '32rpx',
inputSize: '26rpx',
inputColor: '#353535',
inputBorder: '2rpx solid #353535',
placeholderStyle: 'color: #353535',
radius: '10rpx;',
inputPadding: '0 0 0 0',
inputPassword: false,
inputDisabled: false,
inputValue: '',
inpitMaxLength: -1,
inputPlaceholder: '你好jackTeng'
}
Component({
/**
* 组件的属性列表
*/
properties: {
show: {
// 规定传入的类型 如果是 Boolean 那么传入的只能是true 或 false
type: Boolean,
// 写入预设值
value: DEF_CONFIG.show
},
title: {
type: String,
value: DEF_CONFIG.title
},
// 标题的宽
titleWidth: {
type: String,
value: DEF_CONFIG.titleWidth
},
// 标题文字的大小
titleSize: {
type: String,
value: DEF_CONFIG.titleSize
},
// 标题文字的颜色
titleColor: {
type: String,
value: DEF_CONFIG.titleColor
},
// 输入框宽度
inputWidth: {
type: String,
value: DEF_CONFIG.inputWidth
},
// 输入框高度
inputHeight: {
type: String,
value: DEF_CONFIG.inputHeight
},
// 输入框字体大小
inputSize: {
type: String,
value: DEF_CONFIG.inputSize
},
// 输入框字体颜色
inputColor: {
type: String,
value: DEF_CONFIG.inputColor
},
// 输入框边框
inputBorder: {
type: String,
value: DEF_CONFIG.inputBorder
},
// 输入框placeholder属性样式
placeholderStyle: {
type: String,
value: DEF_CONFIG.placeholderStyle
},
// 圆角度
radius: {
type: String,
value: DEF_CONFIG.radius
},
// 输入框内间距
inputPadding: {
type: String,
value: DEF_CONFIG.inputPadding
},
// 是否为密码类型
inputPassword: {
type: Boolean,
value: DEF_CONFIG.inputPassword
},
// 是否禁止输入
inputDisabled: {
type: Boolean,
value: DEF_CONFIG.inputDisabled
},
// 设置输入框内容
inputValue: {
type: String,
value: DEF_CONFIG.inputValue
},
// 最长输入多少字节
inpitMaxLength: {
type: Number,
value: DEF_CONFIG.inpitMaxLength
},
// 输入框提示类型
inputPlaceholder: {
type: String,
value: DEF_CONFIG.inputPlaceholder
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
// 显示组件 自定义方法，用来接受父组件传入的属性值
customMethod: function (config) {
// 设置data属性
this.setData({
// 三目写法，如果没有传入属性，就以默认属性设置
show: config.show ? config.show : this.data.show,
// 设置title
title: config.title ? config.title : this.data.title,
titleWidth: config.titleWidth ? config.titleWidth : this.data.titleWidth,
titleSize: config.titleSize ? config.titleSize : this.data.titleSize,
titleColor: config.titleColor ? config.titleColor : this.data.titleColor,
// 设置input
inputWidth: config.inputWidth ? config.inputWidth : this.data.inputWidth,
inputHeight: config.inputHeight ? config.inputHeight : this.data.inputHeight,
inputSize: config.inputSize ? config.inputSize : this.data.inputSize,
inputColor: config.inputColor ? config.inputColor : this.data.inputColor,
inputBorder: config.inputBorder ? config.inputBorder : this.data.inputBorder,
placeholderStyle: config.placeholderStyle ? config.placeholderStyle : this.data.placeholderStyle,
radius: config.radius ? config.radius : this.data.radius,
inputPadding: config.inputPadding ? config.inputPadding : this.data.inputPadding,
// 设置属性
inputPassword: config.inputPassword ? config.inputPassword : this.data.inputPassword,
inputDisabled: config.inputDisabled ? config.inputDisabled : this.data.inputDisabled,
inputValue: config.inputValue ? config.inputValue : this.data.inputValue,
inpitMaxLength: config.inpitMaxLength ? config.inpitMaxLength : this.data.inpitMaxLength,
inputPlaceholder: config.inputPlaceholder ? config.inputPlaceholder : this.data.inputPlaceholder,
});
},
/**
* 内部方法，所有内部方法不适合在外部调用，为区别开公有方法，内部方法可以以 "_" 开头
*/
_pickerChangeEvent: function (e) {
// 获取事件 e 的 detail 值
// 参数 1：EVENT_PICKER_CHANGE ===> 是外部调用时使用的方法名
// 参数 2：_detail ===> 传递给 EVENT_PICKER_CHANGE 方法的 detail 值，
// 不传递则 EVENT_PICKER_CHANGE 方法的 detail 值为空
let _detail = { value: e.detail.value }
// 用来触发父组件事件
this.triggerEvent('myevent', _detail);
}
})
6)、引用组件（在页面需要这个组建json文件中写入）
json文件
{
"usingComponents": {
"title-input": "/components/title-input/title-input"
}
}
wxml文件
<title-input
// 根据需求写入自己要设置的值
titleSize='26rpx'
class="multi-hp-picker"
title="标题"
inputValue=""
inputWidth="260rpx"
inputHeight="35rpx"
inputSize="26rpx"
inputColor=""
inputBorder="2px solid #bbbbbb"
radius="10rpx"
inputPassword="{{false}}"
placeholderStyle=""
inputDisabled="{{false}}"
inputPadding="0 0 0 17rpx"
inputPlaceholder="JackTeng"
// 获取组件内部数据的方法(myevent就是组件js文件中this.triggerEvent('myevent', _detail)的'myevent')
bind:myevent='onMyEvent'/>
JS文件
// 在调用组件的js文件中加入此方法来获取到，组件内部数据
onMyEvent: function(e){
console.log(e.detail);
},
7)、恭喜你已完成^ _ ^ （组件有点粗糙勿喷哦，感谢）
以上均为自学所记录的笔记！
网友评论