Lx-UI

# 安装

# npm 安装

    npm install lxing-ui
1

# 安装依赖

lxing-ui依赖有：

  • vue （vue脚手架一般都有了，不需要另外install）
  • element-ui
  • moment.js
npm install element-ui moment
1

# 引入到项目中

import Vue from 'vue'

import ElementUI from 'element-ui'
import LxUI from 'lxing-ui'
import 'lxing-ui/lib/esm/css/index.css'

Vue.use(ElementUI)
Vue.use(LxUI)
1
2
3
4
5
6
7
8

# 按需引入

//main.js
import Vue from 'vue'
import { lxForm } from 'lxing-ui'

Vue.use(lxForm)
1
2
3
4
5

# CDN

使用方法
目前可以通过 unpkg.com/lxing-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

TIP

注意：
建议在链接中锁定版本，防止出现新版本改版引起不兼容某些API的情况出现
输定版本的方法：添加 /lxing-ui@[version]/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LXing-UI</title>
    <!-- css文件 -->
    <link rel="stylesheet" href="https://unpkg.com/lxing-ui/lib/umd/css/index.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="app">
    <div>
        <el-button>按钮</el-button>
        <lx-form :config="formConfig" v-model="formData" @submit="submit"></lx-form>
        <lx-table :columns="tableColumns" :data="tableData"></lx-table>
    </div>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import moment-js -->
<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
<!-- 未压缩版 -->
<!--<script src="https://unpkg.com/lxing-ui/dist/umd/lxing-ui.umd.js"></script>-->
<!-- 压缩版 -->
<script src="https://unpkg.com/lxing-ui/lib/umd/lxing-ui.umd.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data () {
            return {
                name: '小白123',
                tableData: [
                    { id: 'A123', status: 1 },
                    { id: 'A111', status: 0 }
                ],
                tableColumns: [
                    { label: 'ID', filed: 'id' },
                    {
                        label: '状态',
                        filed: 'status',
                        type: 'enum',
                        options: [
                            { label: '已完成', value: 1 },
                            { label: '未完成', value: 0 }
                        ]
                    }
                ],
                formData: {
                    id: '1',
                    status: 1
                },
                formConfig: [
                    { label: 'ID', filed: 'id', type: 'input' },
                    {
                        label: '状态',
                        filed: 'status',
                        type: 'enum',
                        options: [
                            { label: '已完成', value: 1 },
                            { label: '未完成', value: 0 }
                        ]
                    }
                ]
            }
        },
        methods: {
            submit (form) {
                console.log('提交', form)
            }
        }
    })
</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

← form表单 →