1.0.4 • Published 2 years ago

zj-scroll-list v1.0.4

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

开发指南

安装

推荐使用 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是否可选择Booleantruefalse
limit限制行数Number-6
height高度Number--1
item-height行高Number-30
loop是否启用滚动Booleanfalsetrue
delay滚动延时Number-1000

TitleList Attributes

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

DataList Attributes

参数说明类型可选值默认值
key行IDString--
row行配置Array--
selectable显示选择框Booleanfalsetrue
selected已选择Booleanfalsetrue

Row of DataList Attributes

参数说明类型可选值默认值
icon图标String--
icon_color图标颜色Stringnone, red, orange, yellow, green, blue, black, white, gray-
text文本String
text_color文本颜色Stringred, 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可选的Booleantruefalse
extensible可扩展Booleanfalsetrue
extend-icon扩展图标String--
shrink-icon收缩图标String--
scrollable可滚动Booleanfalsetrue
limit限度Number-6
loop环形Booleanfalsetrue
delay延迟Number-1000
item-height项目高度Number-30
data-tree数据树Array-key:1item_bar:children：子主键

DataTree Attributes （一级）

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

ItemBar Attributes

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

Children Attributes （二级）

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

ItemBar Attributes

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

Children Attributes （三级）

参数说明类型可选值默认值
key组键名Number2-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职务字体颜色colorRed ，yellow ，blue ，green， red ，orange ，purplegray

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窗口样式stringdark/brightbright

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-onThisClickdelete
list列表Array--

依赖

"swiper": "^6.4.5",

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

贡献

赵向明 ian@pku.edu.cn

版本说明

V1.0.0.20211121-release

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

滚动列表swiperscrolllisttreehuihuamuztakzidjin赵向明sieyoo
@infinitebrahmanuniverse/nolb-zj@everything-registry/sub-chunk-3234
1.0.2

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago