前有一個頭像漸變邊框的需求,當時是全部用的切圖,但是不同的地方可能頭像大小不一樣,切圖適配性太差,正好這幾日學了下css漸變的各種妙用,想到之前的頭像邊框其實可以用漸變來實現。
當時用到的頭像切圖:
這個還是比較簡單,不過定位位置和圓角大小需要自己每次根據實際的尺寸來計算,而且感覺還額外多使用了一個 div 標簽,不是很優雅。
但是這個 border-image 和 border-radius 不能同時使用,設置了邊框背景,圓角就自動失效了,所以最終做出來的是一個直接的邊框背景。
這個樣子肯定是不闊以的了,然后 發了了 clip-path 這個裁切屬性,搞上去外圓角倒是又了,那里面圖片的內圓角呢?圖片還是個直角的,和需求有點不符。
用 border-image 方式雖然少用了一個標簽,但是沒法同時實現內外圓角。最后只能在第一種方式上來進行優化,還是利用背景漸變的方式來實現,不過位置不用定位,直接用 padding 留出需要的邊框寬度就行了,不需要自己每次要去計算定位位置,不過圓角還是要去根據大小計算下的。
這個IP地址輸入框控件,估計寫爛了,網上隨便一搜索,保證一大堆,估計也是因為這個控件太容易了,非常適合新手練手,一般的思路都是用4個qlineedit控件拼起來,然后每個輸入框設置正則表達式過濾只能輸入3位數字,然后安裝事件過濾器識別回車自動跳到下一個輸入框。關于如何設置正則表達式過濾,這個可以搜索查到,本人也不大懂這個規則,貌似還有專門的書籍專門介紹正則表達式,可能這塊非常強大。
開源地址:https://gitee.com/feiyangqingyun/QWidgetDemo https://github.com/feiyangqingyun/QWidgetDemo
#ifndef IPADDRESS_H
#define IPADDRESS_H
/**
* IP地址輸入框控件 作者:feiyangqingyun(QQ:517216493) 2017-8-11
* 1:可設置IP地址,自動填入框
* 2:可清空IP地址
* 3:支持按下小圓點自動切換
* 4:支持退格鍵自動切換
* 5:支持IP地址過濾
* 6:可設置背景色/邊框顏色/邊框圓角角度
*/
#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地址網段輸入框1
QLineEdit *txtIP2; //IP地址網段輸入框2
QLineEdit *txtIP3; //IP地址網段輸入框3
QLineEdit *txtIP4; //IP地址網段輸入框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:
//設置IP地址
void setIP(const QString &ip);
//清空
void clear();
//設置背景顏色
void setBgColor(const QString &bgColor);
//設置邊框顏色
void setBorderColor(const QString &borderColor);
//設置邊框圓角角度
void setBorderRadius(int borderRadius);
};
#endif // IPADDRESS_H
【領QT開發教程學習資料,點擊下方鏈接莬費領取↓↓,先碼住不迷路~】
點擊這里:Qt資料領取(視頻教程+文檔+代碼+項目實戰)
#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;
//用于顯示小圓點的標簽,居中對齊
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)));
//設置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;
//如果當前按下了小數點則移動焦點到下一個輸入框
if (key->text() == ".") {
this->focusNextChild();
}
//如果按下了退格鍵并且當前文本框已經沒有了內容則焦點往前移
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();
//判斷當前是否輸入完成一個網段,是的話則自動移動到下一個輸入框
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地址填入各個網段
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
【領QT開發教程學習資料,點擊下方鏈接莬費領取↓↓,先碼住不迷路~】
點擊這里:「鏈接」
最近在做直播后臺,涉及到對用戶的一些操作,比如關注/取關/禁言/踢出直播間。多個地方都要用,需要封裝一個彈框組件
根據 點擊事件event參數,來獲取位置,根據需要來實際計算位置
獲取元素top/left,其實直接用getBoundingClientRect 里的bottom / right 即可
export const getCurrentDialogXY = (event: Event) => {
const target = event.target as HTMLElement
const { bottom, right } = target.getBoundingClientRect()
return { bottom, right }
}
調用
```js
const avatarHandler = (event: Event) => {
const { right, bottom } = getCurrentDialogXY(event)
currentX.value = right
currentY.value = bottom
}
傳入子組件,在子組件內接收到left/top 重新定位即可
<user-info-dialog
:left="currentX"
:top="currentY"
/>
<div ref="userInfoRef" class="dialog-wrap" :style="{ top: top + 'px', left: left + 'px' }"></div>
通過監聽彈框的ref(彈框有顯示隱藏邏輯,所以監聽彈框的ref即可,然后動態設置位置),
watchEffect(() => {
const userInfoRefValue = userInfoRef.value
if (userInfoRefValue) {
const offsetHeight = userInfoRefValue.offsetHeight // 獲取彈框的高度
const offsetWidth = userInfoRefValue.offsetWidth // 獲取元素的寬度
// 不管彈框顯示是左側還是右側,根據需求 都需要 減去 彈框的高度 - 用戶頭像高度的一半 進行定位
propTop.value = props.top - offsetHeight - userAvatarWidth.value / 2
// 如果是彈框顯示在左側,需要減去彈框的寬度 - 頭像的寬度
if (props.roleEnumType === 1) {
propLeft.value = props.left - offsetWidth - userAvatarWidth.value
}
}
})
你會發現,其實我們的整個元素,是直接在根節點上,根常規里的,每個彈框,必須要綁定在循環里,才能做一一對應的關系,怎么不太一樣呢? 這里是用到的
vue3中的Teleport:將其插槽內容渲染到 DOM 中的另一個位置 這對于我們層級比較多,做全局定位,脫離當前元素,非常好用!!!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。