天繼續(xù)給大家分享一下Element UI 多選框組用法筆記,直接上代碼!
<el-form-item label="用戶列表">
<el-autocomplete
class="inline-input"
@clear="clearUser"
clearable
v-model="paramData.userName"
:fetch-suggestions="querySearch"
placeholder="請輸入用戶名"
@select="handleSelect"
>
</el-autocomplete>
</el-form-item>
var vue=new Vue({
data: {
paramData: {
userId: "",
userName: ""
},
userList: []
},
created: function() {
var self=this;
self.initUser("");
},
mounted: function() {},
methods: {},
methods: {
initUser: function(userName) {
var self=this;
var queryParam={};
$.ajax({
url: xxx,
contentType: 'application/json',
data: JSON.stringify(queryParam),
success: function(resultData) {
if (resultData.success) {
self.userList=result.data;
} else {
self.userList=[];
}
}
});
},
handleSelect: function(item) {
var self=this;
self.paramData.userName=item.value;
self.paramData.userId=item.id;
self.onSearch();
},
querySearch: function(queryString, cb) {
var self=this;
var queryParam={};
$.ajax({
url: xxx,
contentType: 'application/json',
data: JSON.stringify(queryParam),
success: function(resultData) {
if (resultData.success) {
cb(result.data);
} else {
cb([]);
}
}
});
},
clearUser: function() {
var self=this;
self.paramData.userName="";
self.paramData.userId="";
//重新加載數(shù)據(jù)列表
}
}
});
以上是分享內(nèi)容,感謝閱讀,歡迎收藏、點贊、轉(zhuǎn)發(fā)。您的支持是我最大的創(chuàng)作動力,有問題可以留言大家共同進(jìn)步!
在開始之前,我們先來想一個問題,用戶為什么要使用搜索功能呢? 今天我?guī)Т蠹乙黄饋硖接懸幌耈I搜索頁面的一些設(shè)計方法。
用戶搜索的目的是為了快速找到自己想要的結(jié)果!搜索頁是用戶進(jìn)行搜索的第一站,最理想的狀態(tài)就是用戶不需要輸入文字或者語音等交互操作就可以點擊查看搜索結(jié)果,所以搜索頁中推薦內(nèi)容對提高用戶搜索效率有著非常重要的作用。
一個完整的搜索過程大體分為三部分:尋找搜索入口、進(jìn)入頁面搜索、查看搜索結(jié)果。接下來將從這3點來講述:
一、搜索入口
搜索入口樣式常見的可分為2種:1搜索框、2搜索icon
搜索框類根據(jù)位置分類常見的有三種:
1.位于頁面頂部(導(dǎo)航欄中間或下方) ,比較常見的樣式。
2.位于頁面中間,搜索功能作為核心部分展示。
3.位于頁面底部作為獨立的Tab存在。常見與發(fā)現(xiàn)頁面或應(yīng)用商店等內(nèi)容類APP中。
2搜索icon 樣式:
一般位于頁面導(dǎo)航欄左右兩邊,可與其他icon并類存在。
二、搜索頁面
搜索頁面一般由三部分組成:1頂部搜索區(qū) 2中間輔助區(qū) 3底部鍵盤,有些產(chǎn)品也支持實時搜索,我們一一來看:
2.1頂部搜索區(qū)
頂部搜索區(qū):包括輸入框,有些也會伴隨拍照、語音等輔助功能。
2.2中間輔助區(qū)
中間輔助區(qū):主要包括“歷史搜索”和“熱門推薦”兩部分內(nèi)容。常見樣式有以下幾種:
1標(biāo)簽式:
在設(shè)計形式上一般采用“文字”+“背景”形式,標(biāo)簽文字在 @2x 圖下一般是 24px 大小,標(biāo)簽背景一般以淺灰色的圓角矩形為主。
優(yōu)點:提取用戶最關(guān)注的核心關(guān)鍵詞,相比其他形式區(qū)域內(nèi)展示標(biāo)簽數(shù)量多,展示效率高。
缺點:展示信息密集且樣式單一,缺乏感染力。
適合場景:需要高效展示搜索內(nèi)容的信息頁面。
2.列表式:
在設(shè)計樣式一般由多個橫向列表單元組成,列表單元內(nèi)主要分為“純文字”和“圖標(biāo)+文字”兩種設(shè)計形式
優(yōu)點:可借助縱軸交互無限下拉展示,通常以短句的形式展示核心內(nèi)容,展示信息更全面,根據(jù)產(chǎn)品類型的不同還會伴有圖標(biāo)、輔助文案等信息展示;列表流的設(shè)計符合用戶自上到下、自左到右的閱讀習(xí)慣。
缺點:一屏之內(nèi)顯示的內(nèi)容遠(yuǎn)少于標(biāo)簽式能展示的內(nèi)容,展示效率低;在伴隨圖標(biāo)、輔助文案的情況下,用戶的閱讀視線需要進(jìn)行多次跳轉(zhuǎn),閱讀成本高。
適合場景:需要全面展示推薦信息的頁面。
3.Tab欄式:
由頂部 Tab 選項和推薦列表組成,兩者有強(qiáng)烈的依附關(guān)系。在設(shè)計細(xì)節(jié)上通常會添加排名、標(biāo)簽、圖標(biāo)等作為輔助性信息,增強(qiáng)用戶點擊欲望。
優(yōu)點:通過Tab 欄可以展示多維度的推薦內(nèi)容,展示信息維度廣,間接地提高了信息展示效率。
缺點:交互成本高,需要用戶先點擊 Tab 欄再選擇具體的推薦關(guān)鍵詞;操作門檻高,對于幼兒、老年等非主流用戶群體學(xué)習(xí)成本高。
適合場景:需要全面多維度展示的頁面。
4.圖片式:
在設(shè)計上主要以圖片和標(biāo)題文字組成,UI設(shè)計中搜索頁設(shè)計指南https://www.aaa-cg.com.cn/ui/2609.html?gpf在設(shè)計細(xì)節(jié)上會添加標(biāo)簽、圖標(biāo)、推薦文案等輔助性信息。
優(yōu)點:圖片相比于文字更加能吸引用戶的注意力,視覺沖擊力強(qiáng),識別成本低;通常圖片中會包含標(biāo)簽、圖標(biāo)、說明文案等輔助信息,展示信息全面。
缺點:圖片面積占比大,信息展示效率低;需要找到和標(biāo)題釋義一致的圖片要耗費(fèi)較高的人力成本,后期維護(hù)成本高。
適合場景:需要增強(qiáng)頁面感染力,激發(fā)用戶點擊欲望的頁面。
5.條件篩選:
設(shè)計上主要以文字為主,部分產(chǎn)品也會添加圖標(biāo)輔助用戶快速識別。
優(yōu)點:限定搜索維度,更加精準(zhǔn)。
缺點:交互成本高,想要精準(zhǔn)搜索必須先點擊篩選條件。
適合場景:需要精準(zhǔn)化搜索的頁面。
6.組合樣式:
不同形式的推薦搜索內(nèi)容在設(shè)計上都有各自的優(yōu)缺點,選擇某一種形式取決于頁面當(dāng)前承擔(dān)核心業(yè)務(wù)是什么,我們在實際設(shè)計當(dāng)中可以有選擇的進(jìn)行多種形式的組合(最好不要超過兩種),進(jìn)行取長補(bǔ)短。
適合場景:最大化的發(fā)揮搜索推薦的優(yōu)勢。
2.3底部鍵盤
底部的鍵盤通常也會伴隨著輔助功能,例如語音、掃一掃等功能,例如淘寶的鍵盤頂部功能。
2.4實時搜索
用戶在輸入關(guān)鍵詞時,下方頁面會實時更新內(nèi)容,一種是實時呈現(xiàn)搜索結(jié)果,一種是呈現(xiàn)聯(lián)想詞列表。
三、搜索結(jié)果
搜索結(jié)果通常分為常規(guī)列表、帶有篩選排序功能的結(jié)果列表以及搜索為空的頁面。
1.常規(guī)列表
簡易結(jié)果列表,有些也帶有分類標(biāo)簽和關(guān)鍵詞高亮顯示。
2.篩選排序
可進(jìn)一步對結(jié)果做篩選或排序,如電商、旅游等類型產(chǎn)品較多使用此功能。
3.結(jié)果為空
當(dāng)無搜索結(jié)果時,可用展位圖+提示語來告知用戶,也可在此頁面上推薦其他內(nèi)容,給用戶多一點選擇。
希望這篇文章能幫助大家在拿到設(shè)計需求沒有什么想法的時候,可以快速產(chǎn)出一套搜索頁設(shè)計方案 。而其中的細(xì)節(jié)確定需要大家結(jié)合自身產(chǎn)品特點,選擇適合自己的部分。因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息,請給我點個關(guān)注,我之后還會發(fā)包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。
這個IP地址輸入框控件,估計寫爛了,網(wǎng)上隨便一搜索,保證一大堆,估計也是因為這個控件太容易了,非常適合新手練手,一般的思路都是用4個qlineedit控件拼起來,然后每個輸入框設(shè)置正則表達(dá)式過濾只能輸入3位數(shù)字,然后安裝事件過濾器識別回車自動跳到下一個輸入框。關(guān)于如何設(shè)置正則表達(dá)式過濾,這個可以搜索查到,本人也不大懂這個規(guī)則,貌似還有專門的書籍專門介紹正則表達(dá)式,可能這塊非常強(qiáng)大。
開源地址:https://gitee.com/feiyangqingyun/QWidgetDemo https://github.com/feiyangqingyun/QWidgetDemo
#ifndef IPADDRESS_H
#define IPADDRESS_H
/**
* IP地址輸入框控件 作者:feiyangqingyun(QQ:517216493) 2017-8-11
* 1:可設(shè)置IP地址,自動填入框
* 2:可清空IP地址
* 3:支持按下小圓點自動切換
* 4:支持退格鍵自動切換
* 5:支持IP地址過濾
* 6:可設(shè)置背景色/邊框顏色/邊框圓角角度
*/
#include <QWidget>
class QLabel;
class QLineEdit;
#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif
class QDESIGNER_WIDGET_EXPORT IPAddress : public QWidget
#else
class IPAddress : public QWidget
#endif
{
Q_OBJECT
Q_PROPERTY(QString ip READ getIP WRITE setIP)
public:
explicit IPAddress(QWidget *parent=0);
protected:
bool eventFilter(QObject *watched, QEvent *event);
private:
QLabel *labDot1; //第一個小圓點
QLabel *labDot2; //第二個小圓點
QLabel *labDot3; //第三個小圓點
QLineEdit *txtIP1; //IP地址網(wǎng)段輸入框1
QLineEdit *txtIP2; //IP地址網(wǎng)段輸入框2
QLineEdit *txtIP3; //IP地址網(wǎng)段輸入框3
QLineEdit *txtIP4; //IP地址網(wǎng)段輸入框4
QString ip; //IP地址
QString bgColor; //背景顏色
QString borderColor;//邊框顏色
int borderRadius; //邊框圓角角度
private slots:
void textChanged(const QString &text);
public:
//獲取IP地址
QString getIP() const;
QSize sizeHint() const;
QSize minimumSizeHint() const;
public Q_SLOTS:
//設(shè)置IP地址
void setIP(const QString &ip);
//清空
void clear();
//設(shè)置背景顏色
void setBgColor(const QString &bgColor);
//設(shè)置邊框顏色
void setBorderColor(const QString &borderColor);
//設(shè)置邊框圓角角度
void setBorderRadius(int borderRadius);
};
#endif // IPADDRESS_H
【領(lǐng)QT開發(fā)教程學(xué)習(xí)資料,點擊下方鏈接莬費(fèi)領(lǐng)取↓↓,先碼住不迷路~】
點擊這里:Qt資料領(lǐng)取(視頻教程+文檔+代碼+項目實戰(zhàn))
#pragma execution_character_set("utf-8")
#include "ipaddress.h"
#include "qlabel.h"
#include "qlineedit.h"
#include "qboxlayout.h"
#include "qregexp.h"
#include "qvalidator.h"
#include "qevent.h"
#include "qdebug.h"
IPAddress::IPAddress(QWidget *parent) : QWidget(parent)
{
bgColor="#FFFFFF";
borderColor="#A6B5B8";
borderRadius=3;
//用于顯示小圓點的標(biāo)簽,居中對齊
labDot1=new QLabel;
labDot1->setAlignment(Qt::AlignCenter);
labDot1->setText(".");
labDot2=new QLabel;
labDot2->setAlignment(Qt::AlignCenter);
labDot2->setText(".");
labDot3=new QLabel;
labDot3->setAlignment(Qt::AlignCenter);
labDot3->setText(".");
//用于輸入IP地址的文本框,居中對齊
txtIP1=new QLineEdit;
txtIP1->setObjectName("txtIP1");
txtIP1->setAlignment(Qt::AlignCenter);
txtIP1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
connect(txtIP1, SIGNAL(textChanged(QString)), this, SLOT(textChanged(QString)));
txtIP2=new QLineEdit;
txtIP2->setObjectName("txtIP2");
txtIP2->setAlignment(Qt::AlignCenter);
txtIP2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
connect(txtIP2, SIGNAL(textChanged(QString)), this, SLOT(textChanged(QString)));
txtIP3=new QLineEdit;
txtIP3->setObjectName("txtIP3");
txtIP3->setAlignment(Qt::AlignCenter);
txtIP3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
connect(txtIP3, SIGNAL(textChanged(QString)), this, SLOT(textChanged(QString)));
txtIP4=new QLineEdit;
txtIP4->setObjectName("txtIP4");
txtIP4->setAlignment(Qt::AlignCenter);
txtIP4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
connect(txtIP4, SIGNAL(textChanged(QString)), this, SLOT(textChanged(QString)));
//設(shè)置IP地址校驗過濾
QRegExp regExp("(2[0-5]{2}|2[0-4][0-9]|1?[0-9]{1,2})");
QRegExpValidator *validator=new QRegExpValidator(regExp, this);
txtIP1->setValidator(validator);
txtIP2->setValidator(validator);
txtIP3->setValidator(validator);
txtIP4->setValidator(validator);
//綁定事件過濾器,識別鍵盤按下
txtIP1->installEventFilter(this);
txtIP2->installEventFilter(this);
txtIP3->installEventFilter(this);
txtIP4->installEventFilter(this);
QFrame *frame=new QFrame;
frame->setObjectName("frameIP");
QStringList qss;
qss.append(QString("QFrame#frameIP{border:1px solid %1;border-radius:%2px;}").arg(borderColor).arg(borderRadius));
qss.append(QString("QLabel{min-width:15px;background-color:%1;}").arg(bgColor));
qss.append(QString("QLineEdit{background-color:%1;border:none;}").arg(bgColor));
qss.append(QString("QLineEdit#txtIP1{border-top-left-radius:%1px;border-bottom-left-radius:%1px;}").arg(borderRadius));
qss.append(QString("QLineEdit#txtIP4{border-top-right-radius:%1px;border-bottom-right-radius:%1px;}").arg(borderRadius));
frame->setStyleSheet(qss.join(""));
QVBoxLayout *verticalLayout=new QVBoxLayout(this);
verticalLayout->setMargin(0);
verticalLayout->setSpacing(0);
verticalLayout->addWidget(frame);
//將控件按照橫向布局排列
QHBoxLayout *layout=new QHBoxLayout(frame);
layout->setMargin(0);
layout->setSpacing(0);
layout->addWidget(txtIP1);
layout->addWidget(labDot1);
layout->addWidget(txtIP2);
layout->addWidget(labDot2);
layout->addWidget(txtIP3);
layout->addWidget(labDot3);
layout->addWidget(txtIP4);
}
bool IPAddress::eventFilter(QObject *watched, QEvent *event)
{
if (event->type()==QEvent::KeyPress) {
QLineEdit *txt=(QLineEdit *)watched;
if (txt==txtIP1 || txt==txtIP2 || txt==txtIP3 || txt==txtIP4) {
QKeyEvent *key=(QKeyEvent *)event;
//如果當(dāng)前按下了小數(shù)點則移動焦點到下一個輸入框
if (key->text()==".") {
this->focusNextChild();
}
//如果按下了退格鍵并且當(dāng)前文本框已經(jīng)沒有了內(nèi)容則焦點往前移
if (key->key()==Qt::Key_Backspace) {
if (txt->text().length() <=1) {
this->focusNextPrevChild(false);
}
}
}
}
return QWidget::eventFilter(watched, event);
}
void IPAddress::textChanged(const QString &text)
{
int len=text.length();
int value=text.toInt();
//判斷當(dāng)前是否輸入完成一個網(wǎng)段,是的話則自動移動到下一個輸入框
if (len==3) {
if (value >=100 && value <=255) {
this->focusNextChild();
}
}
//拼接成完整IP地址
ip=QString("%1.%2.%3.%4").arg(txtIP1->text()).arg(txtIP2->text()).arg(txtIP3->text()).arg(txtIP4->text());
}
QString IPAddress::getIP() const
{
return this->ip;
}
QSize IPAddress::sizeHint() const
{
return QSize(250, 20);
}
QSize IPAddress::minimumSizeHint() const
{
return QSize(30, 10);
}
void IPAddress::setIP(const QString &ip)
{
//先檢測IP地址是否合法
QRegExp regExp("((2[0-4]\\d|25[0-5]|[01]?\\d\\d?)\\.){3}(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)");
if (!regExp.exactMatch(ip)) {
return;
}
if (this->ip !=ip) {
this->ip=ip;
//將IP地址填入各個網(wǎng)段
QStringList list=ip.split(".");
txtIP1->setText(list.at(0));
txtIP2->setText(list.at(1));
txtIP3->setText(list.at(2));
txtIP4->setText(list.at(3));
}
}
void IPAddress::clear()
{
txtIP1->clear();
txtIP2->clear();
txtIP3->clear();
txtIP4->clear();
txtIP1->setFocus();
}
void IPAddress::setBgColor(const QString &bgColor)
{
if (this->bgColor !=bgColor) {
this->bgColor=bgColor;
}
}
void IPAddress::setBorderColor(const QString &borderColor)
{
if (this->borderColor !=borderColor) {
this->borderColor=borderColor;
}
}
void IPAddress::setBorderRadius(int borderRadius)
{
if (this->borderRadius !=borderRadius) {
this->borderRadius=borderRadius;
}
}
原文鏈接:https://www.cnblogs.com/feiyangqingyun/p/11665022.html
【領(lǐng)QT開發(fā)教程學(xué)習(xí)資料,點擊下方鏈接莬費(fèi)領(lǐng)取↓↓,先碼住不迷路~】
點擊這里:「鏈接」
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。