Skip to content

多选时，当tag数量过多，会导致输入框超高度，增加了超过限定数量当显示 #108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

多选时，当tag数量过多，会导致输入框超高度，增加了超过限定数量当显示 #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
78d4616
🙈
WLyKan Dec 30, 2020
b176a7a
🎨
WLyKan Dec 30, 2020
18e0e0b
feat：增加最大标签限制的自定义显示
WLyKan Dec 31, 2020
88ef1eb
feat：清空功能调试
WLyKan Dec 31, 2020
4f257fa
feat: 增加多tag显示数量太多时，只显示自定义文案
WLyKan Jan 4, 2021
47d882c
feat: add test data
WLyKan Feb 22, 2021
d743524
chore: readme
WLyKan Feb 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
node_modules/
npm-debug.log
yarn-error.log
.vscode

# Editor directories and files
.idea
Expand Down
4 changes: 4 additions & 0 deletions README-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@

![SelectPage1](https://terryz.github.io/image/SelectPage1.png "SelectPage")

*Tags限定数量模式*

![SelectPage2](https://terryz.github.io/image/SelectPage2.jpg "SelectPage")

*单选模式*

![SelectPage](https://terryz.github.io/image/SelectPage.png "SelectPage")
Expand Down
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ The Vuejs version: [v-selectpage](https://github.com/TerryZ/v-selectpage)
*Multiple Selection with Tags form*

![SelectPage1](https://terryz.github.io/image/SelectPage1.png)
![SelectPage max tag limit](https://github.com/WLyKan/SelectPage/blob/master/demo/SelectPage2.jpg)

*Regular select mode ( single selection )*

Expand Down
Binary file added demo/SelectPage2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 46 additions & 0 deletions demo/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
<script type="text/javascript" src="../selectpage.js" ></script>
<link rel="stylesheet" href="../selectpage.css">
</head>
<body>
<div class="" style="padding: 100px 200px;">
<input type="text" id="selectPage" style="width: 300px;" >
<script>
//定义数组，在服务端返回的数据也以该格式返回：Array[{Object},{...}]
var tag_data = [
{id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛1'},
{id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士2'},
{id:3 ,name:'Detroit Pistons',desc:'底特律活塞3'},
{id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者4'},
{id:5 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士5'},
{id:6 ,name:'Detroit Pistons',desc:'底特律活塞6'},
{id:7 ,name:'Indiana Pacers',desc:'印第安纳步行者7'},
{id:8 ,name:'Chicago Bulls',desc:'芝加哥公牛1'},
{id:9 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士2'},
{id:10 ,name:'Detroit Pistons',desc:'底特律活塞3'},
{id:11 ,name:'Indiana Pacers',desc:'印第安纳步行者4'},
{id:12 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士5'},
{id:13 ,name:'Detroit Pistons',desc:'底特律活塞6'},
{id:14 ,name:'Indiana Pacers',desc:'印第安纳步行者7'},
];
//初始化插件
$('#selectPage').selectPage({
showField : 'desc',
keyField : 'id',
data : tag_data,
// pageSize: 3,
//启用多选模式
multiple : true,
maxTagCount: 3,
// maxTagPlaceholder: '已选择#count#个用户',
});
</script>
</div>
</body>
</html>
31 changes: 31 additions & 0 deletions selectpage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,10 @@ ul.sp_results > li.sp_selected {
cursor: default;
}

ul.sp_results > li.sp_selected.enabled {
color: blue;
}

.sp_control_box{
padding: 0;
height: 27px;
Expand Down Expand Up @@ -285,6 +289,9 @@ input.sp_combo_input[readonly],
input.sp_combo_input[disabled]{
background-color: white;
}
ul.sp_element_box_bak{
display: none;
}
ul.sp_element_box{
margin: 0;
padding: 3px 0 0 3px;
Expand Down Expand Up @@ -338,6 +345,30 @@ ul.sp_element_box li.selected_tag i {
ul.sp_element_box li.selected_tag i:hover {
color: black;
}
ul.sp_element_box li.custom_tag {
border: 1px solid #AAAAAA;
border-radius: 3px;
background-color: #EFEFEF;
cursor: pointer;
max-width: 100%;
box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
height: 24px;
line-height: 24px;
-webkit-transition: all .5s cubic-bezier(.175,.885,.32,1);
transition: all .5s cubic-bezier(.175,.885,.32,1);
}
ul.sp_element_box li.custom_tag:hover {
background-color: white;
border: 1px solid #D0D0D0;
box-shadow: 0 2px 7px rgba(0,0,0,.1);
}
ul.sp_element_box li.custom_tag i {
font-size: 14px;
color: #AAAAAA;
}
ul.sp_element_box li.custom_tag i:hover {
color: black;
}
ul.sp_element_box li.input_box {
padding: 0;
/* margin: 0; */
Expand Down
Loading