zj-scroll-list

    1.0.4 • Public • Published

    开发指南

    安装

    推荐使用 npm 的方式安装。

    npm install zj-scroll-list

    引入

    全局引入,在 main.js 中写入以下内容:

    import Vue from 'vue';
    import App from './App.vue';
    import ZjScrollList from "zj-scroll-list";
    
    Vue.use(ZjScrollList);
    new Vue({
      el: '#app',
      render: h => h(App)
    });

    局部引入,在 vue页面文件中写入以下内容

    import ZjScrollList from 'zj-scroll-list';
    import {ZjScrollTree, ZjScrollItem, ZjSelector} from 'zj-scroll-list';
    export default {
        components: {
            ZjScrollList, // 滚动列表
            ZjScrollTree, // 树列表
            ZjScrollItem, // 单行
            ZjSelector, // 选择组件
        },
    };

    组件

    Zj-Scroll-List 滚动列表

    基于Swiper开发的列表滚动组件——Жидзин(Zidjin)系列组件库。

    安装

    推荐使用 npm 的方式安装。

    npm install zj-scroll-list

    引入

    全局引入,在 main.js 中写入以下内容:

    import Vue from 'vue';
    import App from './App.vue';
    import ZjScrollList from "zj-scroll-list";
    
    Vue.use(ZjScrollList);
    new Vue({
      el: '#app',
      render: h => h(App)
    });

    局部引入,在 vue页面文件中写入以下内容

    import ZjScrollList from 'zj-scroll-list';
    export default {
        components: {
            ZjScrollList, // 滚动列表
        },
    };

    基本用法

    初始化滚动列表。

    <zj-scroll-list :data-list="dataList"> </zj-scroll-list>
    
    <script>
        export default {
            components: {
    			ZjScrollList : () => import('zj-scroll-list'),
    		},
    		data: () => ({
                dataList: [
                    {
                        row: [
                            { text: "名称", },
                        ],
                    },
                ]
            })
        };
    </script>

    Attributes

    参数 说明 类型 可选值 默认值
    title-list 标题列表 Array - -
    data-list 数据列表 Array - -
    selectable 是否可选择 Boolean true false
    limit 限制行数 Number - 6
    height 高度 Number - -1
    item-height 行高 Number - 30
    loop 是否启用滚动 Boolean false true
    delay 滚动延时 Number - 1000

    TitleList Attributes

    参数 说明 类型 可选值 默认值
    flex 比例 Number - -
    title 列标题 String - -

    DataList Attributes

    参数 说明 类型 可选值 默认值
    key 行ID String - -
    row 行配置 Array - -
    selectable 显示选择框 Boolean false true
    selected 已选择 Boolean false true

    Row of DataList Attributes

    参数 说明 类型 可选值 默认值
    icon 图标 String - -
    icon_color 图标颜色 String none, red, orange, yellow, green, blue, black, white, gray -
    text 文本 String
    text_color 文本颜色 String red, orange, yellow, green, blue, black, white, gray -
    list 子分组列表,与父配置相同 Arrar
    emit 信号名称 String

    版本说明

    V1.0.0.20211121-release

    第一代稳定版本,经过多次内测。下一步文档的补完,多选功能的更灵活配置。

    Zj-Scroll-Tree 树列表

    基于原生开发的列表滚动组件——Жидзин(Zidjin)系列组件库。

    安装

    推荐使用 npm 的方式安装。

    npm install zj-scroll-list

    引入

    先添加天地图API,在/public/index.html中写入以

            <div class="zj-scroll-tree"  >
                <el-tree :data="dataTree" :props="elTreeProps" node-key="key" show-checkbox @check="handleClick">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <zj-scroll-item :itemInfo="data" />
                    </span>
            </div>

    全局引入,在 main.js 中写入以下内容:

    import Swiper from 'swiper';
    // import 'swiper/dist/css/swiper.css';
    import 'swiper/swiper-bundle.css';
    import ZjScrollItem from '../../components/zj-scroll-item/zj-scroll-item.vue'
    
    name: 'ZjScrollList',
        components:{
            ZjScrollItem,
        },

    局部引入,在 vue页面文件中写入以下内容

    export default {
        name: 'ZjScrollList',
        components:{shrinkIcon
            ZjScrollItem,String
        },
    }

    基本用法

    初始化滚动列表、缩放比例和图标

    	export default{
    		components:{
    			ZjScrollList:()=>import('zj-scroll-list'),
    		},
    		data:()=>({
    		dataList: [		
    		            {
    		                key: "key1",
    		                row: [
    
    		            },
    		        ]
    		                selectable: true,
    		                selected: true,
    	})
    	}

    调用子主键

      data(){
            return {
                mySwiper: '',
    			elTreeProps: {
    				children: 'children',
    				label: 'label',
    				text: 'label',
    			}
            }
       }
    

    方法逻辑

        methods:{
    		handleClick(node, tree){
    			let list = [];
    			for(const it of tree.checkedNodes){
    				if(it.children === undefined){
    					list.push(it)
    				}
    			}
    			this.$emit('select', list)
    		},
        }
    }
    

    ZjScrollTree Attributes

    参数 说明 类型 可选值 默认值
    identity 身份 String - ZjScrollList
    selectable 可选的 Boolean true false
    extensible 可扩展 Boolean false true
    extend-icon 扩展图标 String - -
    shrink-icon 收缩图标 String - -
    scrollable 可滚动 Boolean false true
    limit 限度 Number - 6
    loop 环形 Boolean false true
    delay 延迟 Number - 1000
    item-height 项目高度 Number - 30
    data-tree 数据树 Array - key:1
    item_bar:
    children:子主键

    DataTree Attributes (一级)

    参数 说明 类型 可选值 默认值
    key 组键名 Number 4,5,6,.... 1,2,
    item_bar 项目栏 Array - icon:require("url")
    icon_color:blue
    text:杭州市
    text_color:blue
    children 子主键 Array - key:1-1
    item_bar:项目栏
    children:子主键

    ItemBar Attributes

    参数 说明 类型 可选值 默认值
    icon 图片路径 String String require("url")
    icon_color 图片颜色 color Red ,yellow ,blue ,green, red ,orange ,purple blue
    text 标题 String - 杭州市
    text_color 标题字体颜色 color Red ,yellow ,blue ,green, red ,orange ,purple blue

    Children Attributes (二级)

    参数 说明 类型 可选值 默认值
    key 组键名 Number 2-1,2-2,.... 1-1,
    item_bar 项目栏 Array - icon:require("url")
    icon_color:blue
    text:二级部门
    text_color:blue
    children 子主键 Array - key:组键名
    item_bar:项目栏
    children:子主键

    ItemBar Attributes

    参数 说明 类型 可选值 默认值
    icon 图片路径 String String require("url")
    icon_color 图片颜色 color Red ,yellow ,blue ,green, red ,orange ,purple blue
    text 标题 String - 二级部门
    text_color 标题字体颜色 color Red ,yellow ,blue ,green, red ,orange ,purple blue

    Children Attributes (三级)

    参数 说明 类型 可选值 默认值
    key 组键名 Number 2-1-2,2-2-3,.... 1-1-1,
    item_bar 项目栏 Array - text:张三,
    text:秘书
    text_color:gray
    children 子主键 Array - key:组键名
    item_bar:项目栏
    children:子主键

    ItemBar Attributes

    参数 说明 类型 可选值 默认值
    text 姓名 String 张三,李四 张三
    text 职务 String - 秘书
    text_color 职务字体颜色 color Red ,yellow ,blue ,green, red ,orange ,purple gray

    ZjScrollItem 滚动列表

    基于Swiper开发的列表滚动组件——Жидзин(Zidjin)系列组件库。

    安装

    推荐使用 npm 的方式安装。

    npm install zj-scroll-list -S

    引入

    先添加天地图API,在/public/index.html中写入以下内容:

    <zj-scroll-item :data-list="dataitem"></zj-scroll-item>

    全局引入,在 main.js 中写入以下内容:

    import Vue from 'vue';
    import App from './App.vue';
    import ZjScrollItem from "Zj-Scroll-item";
    
    Vue.use(ZjScrollItem);
    new Vue({
      el: '#app',
      render: h => h(App)
    });

    局部引入,在 vue页面文件中写入以下内容

    export default {
        components: {
            ZjScrollItem: () => import('Zj-Scroll-item'),
        },
    };

    基本用法

    初始化滚动列表。

    <Zj-Scroll-item :data-list="dataList"> </Zj-Scroll-item>
    
    <script>
        export default {
            components: {
    			ZjScrollItem : () => import('Zj-Scroll-item'),
    		},
    		data: () => ({
                dataList: [
                    {
                        key: "key1",
                        row: [
                            { text: "名称", },
                        ],
                    },
                ]
            })
        };
    </script>

    ZjScrollItem Attributes

    参数 说明 类型 可选值 默认值
    height 行高 Number - 30
    header 头部 Array - -
    item-info 信息 Object - -
    sytle 窗口样式 string dark/bright bright

    Item-Info Attributes

    参数 说明 类型 可选值 默认值
    key 组件名 Atring
    row 行配置 Array
    selectable 是否可选择 True
    selected 是否已选择 True

    Row of Item-Info Attributes

    参数 说明 类型 可选值 默认值
    icon 图片 String - require
    icon_color 图片颜色 Color - blue
    text 字体 String - 标题
    text_color 字体颜色 Color - blue#EEE
    "#EEE",
    emit 透明度 String - onThisClick
    delete
    list 列表 Array - -

    依赖

    "swiper": "^6.4.5",

    "vue-awesome-swiper": "^4.1.1",

    贡献

    赵向明 ian@pku.edu.cn

    版本说明

    V1.0.0.20211121-release

    第一代稳定版本,经过多次内测。下一步文档的补完,多选功能的更灵活配置。

    Install

    npm i zj-scroll-list

    DownloadsWeekly Downloads

    7

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    122 kB

    Total Files

    28

    Last publish

    Collaborators

    • sieyoo