React里用Layui

Layui还是很好用的,那怎么在React里用Layui?一开始还碰到点小问题,经过找资料解决。

https://fly.layui.com/jie/27470/

总结一下,首先在index。html里加上

  
  

然后,在用的那个组件里用上下面这个注释,表示layer是全局变量(真是坑,还能这样操作)

/* global layer */

下面这个案例算是比较全了,用了antd,用了layer的弹出层,以及layer弹出html。

ant design:https://ant.design/components/button-cn/

layer:http://layer.layui.com/

import React, { Component } from 'react';
import $ from 'jquery';
import 'antd/dist/antd.css'
import { Button,Table } from 'antd';

class LayerTest extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource :[{
                key: '1',
                name: '胡彦斌',
                age: 32,
                address: '西湖区湖底公园1号'
              }, {
                key: '2',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号'
              }],
            columns:[{
                title: '姓名',
                dataIndex: 'name',
                key: 'name',
              }, {
                title: '年龄',
                dataIndex: 'age',
                key: 'age',
              }, {
                title: '住址',
                dataIndex: 'address',
                key: 'address',
              }]
          };
    }

    showLayer(){
        /* global layer */
        //询问框
        layer.confirm('您是如何看待前端开发?', {
            btn: ['重要','奇葩'] //按钮
        }, function(){
            layer.msg('的确很重要', {icon: 1});
        }, function(){
            layer.msg('也可以这样', {
            time: 20000, //20s后自动关闭
            btn: ['明白了', '知道了']
            });
        });
    }

    showLayer2(){

        //询问框
        //页面层
        /* global layer */
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['420px', '240px'], //宽高
            content: $('#test')
        });
    }

    showAlert(){
        //墨绿深蓝风
        /* global layer */
        layer.alert('墨绿风格,点击确认看深蓝', {
            skin: 'layui-layer-molv' //样式类名
            ,closeBtn: 0
        }, function(){
            layer.alert('偶吧深蓝style', {
            skin: 'layui-layer-lan'
            ,closeBtn: 0
            ,anim: 4 //动画类型
            });
        });
    }

    render() {
        return (
            
); } } export default LayerTest;

 

 

你可能感兴趣的:(Javascript)