zj-scroll-list
v1.0.4
Published
基于Swiper开发的列表滚动组件——Жидзин（Zidjin）系列组件库。
Downloads
15
Maintainers
sieyooReadme
开发指南
安装
推荐使用 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:1item_bar:children：子主键 |
DataTree Attributes （一级）
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | ------ | ------------- | ---------- | ------------------------------------------------------------ | | key | 组键名 | Number | 4,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 | 图片路径 | 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:bluetext:二级部门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 | - | onThisClickdelete | | list | 列表 | Array | - | - |
依赖
"swiper": "^6.4.5",
"vue-awesome-swiper": "^4.1.1",
贡献
版本说明
V1.0.0.20211121-release
第一代稳定版本，经过多次内测。下一步文档的补完，多选功能的更灵活配置。