1.0.4 • Published 5 years ago
leng-react v1.0.4
安装方法
npm i leng-react --save
//或者
yarn add leng-react
使用方法
module.exports = {
entry: {
bundle: path.join(__dirname, '/index.js')
},
output: {
filename: "[name].js",
path: path.join(__dirname)
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules$/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
},{
test: /\.css/,
loader: 'style-loader!css-loader'
}]
}
};
import {Button, Text, List} from 'leng-react';
import 'leng-react/dist/myreact.css'
/* 引入React和ReactDom*/
ReactDom.render(<Button/>, document.getElementById('app'));
ReactDom.render(<Text/>, document.getElementById('app2'));
ReactDom.render(<List/>, document.getElementById('app3'));
Button(按钮)可配置参数
{
value: '按钮的value值.默认为button',
width: '按钮的宽度. 默认auto',
height: '按钮的高度. 默认auto',
id: '按钮的id. 默认idDefault, 不建议使用',
click: '按钮的点击事件 默认无'
}
Text(文本框)可配置参数
{
value: '文本框的value值.默认为text',
width: '文本框的宽度. 默认auto',
height: '文本框的高度. 默认auto',
id: '文本框的id. 默认idDefault, 不建议使用',
click: '文本框的点击事件 默认无',
input: '文本框的input事件',
change: '文本框的change事件',
tip: '在文本框后面的小提示'
}
List(下拉框)可配置参数
{
lis: [], //数组类型, 显示下拉框的可选项, 默认为空数组
tip: '下拉框显示文字, 默认为请选择',
width: '文本框的宽度. 默认140px',
height: '文本框的高度. 默认30px',
change: () => {}, //获取选中值的回调函数,下拉框的选中值会作为该方法的第一个参数
}
目前只有这两个组件,当我写了新的组件我会第一时间在npm上更新~欢迎提出意见