lqlq-components v2.5.5

@klicen/component-vue

公司Vue项目中的公用组件及Mixin集合

Install

    npm install @klicen/component-vue --save #在安装之前请确保npm的仓库地址已经指向了公司内部私有npm仓库地址

Example Usage

    import Vue from 'vue';
    import { BaseMixin, MessageBox } from '@klicen/component-vue';
    Vue.mixin(BaseMixin);
    Vue.use(MessageBox);

BaseMixin

提供组件中常用的方法的封装

BaseMixin方法列表

参数说明

showComponent参数说明

showComponent options列表

usage

    // 以固定宽度的方式打开
    this.showComponent(Login, {
        width: '500px',
        params: {
            username: 'jack-cheng',
            password: 123456
        }
    });
    
    // 以带标题的方式打开
    this.showComponent(Login, {
        width: '500px',
        title: '用户登录',
        params: {
            username: 'jack park',
            password: 123456
        }
    });

特殊说明

在showFooter选项为true的情况下，如果我们传递了confirmHandle选项，那么“确定”按钮的控制权将交由confirmHandle函数实现，否则，我们会在点击“确定”按钮的时候默认执行component里面的handleSubmit函数。

showConfirm参数说明

usage

    // 基础使用方法
    this.showConfirm('warning', '打开确认框');
    // 自定义标题
    this.showConfirm('warning', '这是正文', '这是标题');
    // 自定义事件方法(此处省略标题)
    this.showConfirm('warning', '这是正文', () => alert('点击确认'), () => alert('点击取消'));
    // 以对象的方式调用(仅此方式调用可以自定义按钮文案)
    this.showConfirm('warning', {
        content: '这是正文',
        title: '这是标题',
        confirmButtonText: '是',
        cancelButtonText: '否',
        confirmHandle: () => alert('点击确认'),
        cancelHandle: () => alert('点击取消')
    });
    // 快捷方式调用（除了可以省略type字段外，其他字段相同）
    this.showWarningConfirm('打开确认框');
    this.showErrorConfirm('warning', '这是正文', '这是标题');

showMsg参数说明

useage

    // 普通调用方式
    this.showMsg('info', '这是一个普通的消息');
    // 快捷方式
    this.showInfoMsg('这是一个普通的消息');
    this.showWarningMsg('这是一个警告消息');
    this.showErrorMsg('这是一个错误的消息');
    this.showSuccessMsg('这是一个成功的消息');

showAlert参数说明

usage

    // 简单用法
    this.showAlert('简单弹窗消息');

    // 自定义标题
    this.showAlert('弹窗消息正文', '标题');

    // 自定义确定按钮事件
    this.showAlert('弹窗消息正文', '标题', () => alert('确定按钮'))

    // 以对象方式调用（仅此方法可以修改按钮文案以及定义按钮倒计时功能）
    this.showAlert({
        title: '这是标题',
        content: '这里是标题正文',
        callback: (...params) => console.log(params),
        confirmButtonText: '知道了',
        countdown: 5
    })

特别说明

在原版本的element-ui中，MessageBox不支持倒计时功能。所以，为了支持该功能，我们重写了MessageBox组件。如果在项目中有需求需要用到的话，请特别声明使用我们提供的MessageBox，如下：

    import Vue from 'vue';
    import { MessageBox } from '@klicen/component-vue';
    Vue.use(MessageBox);

SearchBar组件

用途

用于生成列表页上面的搜索框并自动拼装搜索参数。

useage(使用options)

    <template>
        <searchbar 
            :option="searchOption"
            @search="search"
        />
    </template>
    <script>
        export default {
            data() {
                return {
                    searchOption: [
                        {
                            type: 'input',
                            label: '车架号',
                            field: 'vin'
                        }
                    ]
                }
            },
            methods: {
                search(params) {
                    console.log(params); // {vin: 123456}
                }
            }
        }
    </script>

useage(使用url)

    <template>
        <searchbar 
            :url="url"
        />
    </template>
    <script>
        export default {
            data() {
                return {
                    url: 'http://www.klicen.com/example/'
                }
            }
        }
    </script>

searchbar 参数说明

searchbar options参数说明

Form组件

用途

封装el-form组件，通过对象的方式形成想要的表单

useage

    <template>
        <Form 
            :formItems="formItems"
            :formData="formData"
            @createForm="form => this.form = form"
        />
    </template>
    <script>
        export default {
            data() {
                return {
                    formItems: {
                        vin: {
                            type: 'input',
                            label: '车架号',
                        }
                    },
                    formData: {}
                }
            }
        }
    </script>

Form 参数说明

Form新增自定义方法

Form formItems参数说明

TextItem组件

用途

通过数据的方式，展示数据详情。多用于展示数据详情页面

usage

    <template>
        <textItem
            :textData="textData"
        />
    </template>
    <script>
        export default {
            data() {
                textData: [
                    {
                        label: '用户名',
                        content: 'jack'
                    },
                    {
                        label: '备注',
                        content: 'abcdef',
                        span: 24
                    },
                    {
                        label: '今日计划',
                        type: 'component',
                        content: Plan,
                        params: {
                            date: new Date()
                        }
                        span: 24
                    }
                ]
            }
        }
    </script>

TextItem 参数说明

TextItem textData参数说明

PageFooter参数说明

TagEdit参数说明

usage

    <template>
        <TagEdit 
            :url="url"
            :ruleUrl="ruleUrl"
            v-model="editTags"
            :cascaderAttrs="cascaderAttrs"
            :customDialog="true"
        />
    </template>
    <script>
        export default {
            data() {
                return {
                    url: '/api/saas/tags/rule-tree',
                    ruleUrl: '/api/saas/tags/rule-result',
                    editTags: [],
                    cascaderAttrs: {
                        props: {
                            label: 'name', 
                            value: 'id', 
                            children: 'child',
                        },
                    },
                }
            },
        }
    </script>

Tree参数说明

用途

用于树形控件带搜索框和分页展示，可被选择状态下不能分页展示。

useage(使用options)

    <template>
        <Tree
            :treeData="treeData"
            :pageSize="30"
            :treeAttrs="treeAttrs"
            :treeEvents="treeEvents"
            ref="kTree"
            :treeHeight="300"
            :showSearch="false"
            :key="isKey"
        >
            <template slot="search-left">
                <span> 请选择系统: </span>
                <el-select
                    class="search-select"
                    size="small"
                    v-model="byText"
                >
                    <el-option 
                        v-for="(item, index) in selectOptions"
                        :key="index"
                        :label="item.alias"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
                <el-button 
                    class="search-btn"
                    type="primary"
                    size="small" 
                    @click="treeSearch"
                > 
                    查询
                </el-button>
            </template>
        </Tree>
    </template>
    <script>
        export default {
            data() {
                return {
                    treeData: [],
                    treeAttrs: {
                        props: {
                            children: 'children',
                            label: 'title',
                        },
                        'default-expand-all': false,
                    },
                    treeEvents: {
                        'node-click': val => this.getNode(val),
                    },
                    isKey: 0,
                    byText: '',
                }
            },
            methods: {
                getNode(val) {
                },
                treeSearch() {
                    this.isKey++;
                    window.request(`/api/admin/menu/tree?systemId=${this.byText}`).then(data => {
                        this.treeData = this.getTreeData(data.tree);
                    });
                },
                getTreeData(data) {
                    // 处理接口返回的数据
                },
            },
        };
    </script>

SelectTree参数说明

DateRange

用途

不同于element-ui自带的日期范围控件，该组件支持单独选择开始时间或者结束时间。

useage

  <template>
     <DateRange :options="options" v-model="xxx" />
  </template>

options属性参数说明