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

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

Package Sidebar

Install

npm i zj-scroll-list

Weekly Downloads

1

Version

1.0.4

License

MIT

Unpacked Size

122 kB

Total Files

28

Last publish

Collaborators

  • sieyoo