leng-react

安装方法

npm i leng-react --save
//或者
yarn add leng-react

使用方法

• 1.需要在webpack中使用css-loader和style-loader

  demo:

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'
                }]
            }
        };

• 2.引入

  demo:

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上更新~欢迎提出意见