zj-scroll-list/README.md

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

## 开发指南

### 安装

推荐使用 npm 的方式安装。

```shell
npm install zj-scroll-list
```



### 引入

全局引入，在 main.js 中写入以下内容：

```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页面文件中写入以下内容

```js
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 的方式安装。

```shell
npm install zj-scroll-list
```



#### 引入

全局引入，在 main.js 中写入以下内容：

```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页面文件中写入以下内容

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



#### 基本用法

初始化滚动列表。



[^图像示例]: 注：图像示例统一800×300像素，特殊除外。

```vue
<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<object> |   -    |   -    |
|  data-list  |   数据列表   | Array<object> |   -    |   -    |
| 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<boject> |   -    |   -    |
| selectable | 显示选择框 |    Boolean    | false  |  true  |
|  selected  |   已选择   |    Boolean    | false  |  true  |



#### Row of DataList Attributes 

|    参数    |           说明           |     类型      |                           可选值                           | 默认值 |
| :--------: | :----------------------: | :-----------: | :--------------------------------------------------------: | :----: |
|    icon    |           图标           |  String<url>  |                             -                              |   -    |
| 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<Object> |                                                            |        |
|    emit    |         信号名称         |    String     |                                                            |        |



#### 版本说明

V1.0.0.20211121-release

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



### Zj-Scroll-Tree  树列表

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



#### 安装

推荐使用 npm 的方式安装。

```shell
npm install zj-scroll-list
```



#### 引入

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

```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 中写入以下内容：

```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页面文件中写入以下内容

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



#### 基本用法

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

```vue
	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<object> | -      | key:1<br />item_bar:<br />children：子主键 |



#### DataTree Attributes （一级）

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



#### ItemBar Attributes 

| 参数       | 说明         | 类型   | 可选值                                              | 默认值         |
| ---------- | ------------ | ------ | --------------------------------------------------- | -------------- |
| icon       | 图片路径     | String | String<utl>                                         | 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<Object> | -            | icon:require("url")<br />icon_color:blue<br />text:二级部门<br />text_color:blue |
| children | 子主键 | Array<Object> | -            | key:组键名<br />item_bar:项目栏<br />children：子主键        |



#### ItemBar Attributes 

| 参数       | 说明         | 类型   | 可选值                                              | 默认值         |
| ---------- | ------------ | ------ | --------------------------------------------------- | -------------- |
| icon       | 图片路径     | String | String<utl>                                         | 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<Object> | -                | text:张三，<br />text：秘书<br />text_color：gray     |
| children | 子主键 | Array<Object> | -                | key:组键名<br />item_bar:项目栏<br />children：子主键 |



#### ItemBar Attributes 

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





### ZjScrollItem 滚动列表

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



#### 安装

推荐使用 npm 的方式安装。

```shell
npm install zj-scroll-list -S
```



#### 引入

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

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

全局引入，在 main.js 中写入以下内容：

```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页面文件中写入以下内容

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



#### 基本用法

初始化滚动列表。



```vue
<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<Object> |        |        |
| selectable | 是否可选择 |     True      |        |        |
|  selected  | 是否已选择 |     True      |        |        |



#### Row of Item-Info Attributes

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









### **依赖**

"swiper": "^6.4.5",

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



### 贡献

赵向明 [ian@pku.edu.cn](mailto:ian@pku.edu.cn)





### 版本说明

V1.0.0.20211121-release

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