当前位置: 首页 > news >正文

UI组件库基础

UI组件库

全局组件*

全局注册组件 & 并且使用了require.context

模块化编程 & webpack打包

const install=(Vue)=>{const context=require.context('.',true,/\.vue$/)
    context.keys().forEach(fileName=>{const module=context(fileName)
        Vue.component(module.default.name,module.default)})
}export default {
    install
}

button*

SCSS:在@each中使用动态变量-腾讯云开发者社区-腾讯云

@each:循环语句

<template>
<button class="zh-button" :class="buttonClass">
  <span v-if="$slots.default"><slot></slot></span>
</button>
</template><script>
const types=['primary','info','success','warning','danger']
export default {
  name:'zh-button',
  props:{
    type:{
      type:String,
      default:'',
      validator(val){
        if(val && !types.includes(val)){
          console.error('类型不合法')
        }
        return true;
      }
    }
  },
  computed:{
    buttonClass(){
      let classes=[]
      if(this.type){
        classes.push(`zh-button--${this.type}`)
      }
      return classes;
    }
  }
}
</script><style scoped lang="scss">
$primary-color:#409eff;
$success-color:#67c23a;
.zh-button{
  padding: 12px 20px;
  border: none;
  color: #fff;
  &:hover{
  }
  &:focus,&:active{  }  @each $type,$color in (
    primary:$primary-color,
    success:$success-color,
  ){
    &--#{$type}{
      background:$primary-color;
    }
  }}
</style>

icon*

iconfont的symbol方式引入项目不显示_svg use symbol 不显示-CSDN博客

order:1

<template>
<button class="zh-button" :class="buttonClass" v-on="$listeners">
  <zh-icon :icon="icon" v-if="icon"></zh-icon>
  <zh-icon icon="loading" v-if="loading" color="#fff"></zh-icon>
  <span v-if="$slots.default"><slot></slot></span>
</button>
</template><script>
const types=['primary','info','success','warning','danger']
export default {
  name:'zh-button',
  props:{
    type:{
      type:String,
      default:'',
      validator(val){
        if(val && !types.includes(val)){
          console.error('类型不合法')
        }
        return true;
      }
    },
    icon:{
      type:String,
    },
    iconPosition:{
      type:String,
      default:'left'
    },
    loading:{
      type:Boolean,
      default:false,
    }
  },
  computed:{
    buttonClass(){
      let classes=[]
      if(this.type){
        classes.push(`zh-button--${this.type}`)
      }
      if(this.iconPosition){
        classes.push(`zh-button--icon-${this.iconPosition}`)
      }
      return classes;
    }
  }
}
</script><style scoped lang="scss">
$primary-color:#409eff;
$success-color:#67c23a;
.zh-button{
  padding: 12px 20px;
  border: none;
  color: #fff;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  cursor: pointer;
  &:hover{
  }
  &:focus,&:active{  }  @each $type,$color in (
    primary:$primary-color,
    success:$success-color,
  ){
    &--#{$type}{
      background:$primary-color;
    }
  }  &--icon-left{
    > .icon{
      order: 1;
    }
    > span{
      order: 2;
    }
  }
  &--icon-right{
    > .icon{
      order: 2;
    }
    > span{
      order: 1;
    }
  }}
</style>

绑定事件

单元测试(略)

CSS*

三角形*

宽高 padding都不写,只设置border的话,border会自动根据对角线/三角形来划分

<div class="triangle"></div>
<div class="triangle-2"></div>

.triangle{
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right: 10px solid red;
}
.triangle-2{
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: red;
    border-top-color: red;
}

垂直居中

盒子定位

定位:相对/绝对

已知宽高:margin-left/calc

未知宽高:transform

flex布局

让盒子实现固定宽高比

绘制<1px的线*

  1. ::after创建虚拟元素
  2. transform  scale缩放

.thin{
  width: 200px;
  height: 100px;
  background: blue;
}
.thin::before{
  content: "";
  display: block;
  height: 1px;
  background: red;
  transform-origin: 0 0;
  transform: scale(1, 0.5);
}

圣杯布局*

左中右:左右固定,中间伸缩

flex布局

通过flex值来设置

flex: 伸 缩 basis

<div class="box">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

.box{
    width: 100vw;
    height: 100px;
    display: flex;
}
.box .left,.box .right{
    flex: 0 0 100px;
    background: red;
}
.box .middle{
    flex: 1;
    background: blue;
}

定位

  1. 盒子左右padding
  2. 中间子盒子width:100%,左右盒子定位

<div class="box">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.box{
    position: relative;
    width: 100%;
    padding: 0 100px;
    height: 100px;
    position: relative;
}
.box .left,.box .right{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    background: red;}
.box .right{
    left: auto;
    right: 0;
}
.box .middle{
    width: 100%;
    height: 200px;
    background: blue;
}

响应式的方案*

PC不同像素:

vw/vh:百分比布局。

@media:媒体查询。微调,指定大小基于它微调。

移动&PC:共用一套页面。比如官网。

@media:基于设备尺寸写多套样式

移动端:

rem:等比缩放。相对于页面根元素大小设置rem值

相关文章:

UI组件库基础

UI组件库 全局组件* 全局注册组件 & 并且使用了require.context 模块化编程 & webpack打包 const install(Vue)>{const contextrequire.context(.,true,/\.vue$/)context.keys().forEach(fileName>{const modulecontext(fileName)Vue.component(module.default.n…...

数据结构与算法之矩阵: Leetcode 48. 旋转矩阵 (Typescript版)

旋转图像 https://leetcode.cn/problems/rotate-image/ 描述 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 示例 1 输入&…...

大厂面试题-JVM中的三色标记法是什么?

目录 问题分析 问题答案 问题分析 三色标记法是Java虚拟机(JVM)中垃圾回收算法的一种&#xff0c;主要用来标记内存中存活和需要回收的对象。 它的好处是&#xff0c;可以让JVM不发生或仅短时间发生STW(Stop The World)&#xff0c;从而达到清除JVM内存垃圾的目的&#xff…...

Leetcode—121.买卖股票的最佳时机【简单】

2023每日刷题&#xff08;十一&#xff09; Leetcode—17.电话号码的字母组合 枚举法题解 参考自灵茶山艾府 枚举法实现代码 int maxProfit(int* prices, int pricesSize){int i;int max 0;int minPrice prices[0];for(i 1; i < pricesSize; i) {int tmp prices[i] -…...

【云原生】portainer管理多个独立docker服务器

目录 一、portainer简介 二、安装Portainer 1.1 内网环境下&#xff1a; 1.1.1 方式1&#xff1a;命令行运行 1.1.2 方式2&#xff1a;通过compose-file来启动 2.1 配置本地主机&#xff08;node-1&#xff09; 3.1 配置其他主机&#xff08;被node-1管理的节点服务器&…...

Command集合

Command集合 mysql相关命令 查看mysql的状态 sudo netstat -tap | grep mysql 启动mysql sudo service mysql start 停止mysql sudo service mysql stop 重启mysql sudo service mysql restart 指定端口号&#xff0c;客户端连接mysql sudo mysql -h127.0.0.1 -uroot -p red…...

【QT开发(17)】2023-QT 5.14.2实现Android开发

1、简介 搭建Qt For Android开发环境需要安装的软件有&#xff1a; JAVA SDK &#xff08;jdk 有apt install 安装&#xff09; Android SDK Android NDKQT官网的介绍&#xff1a; Different Qt versions depend on different NDK versions, as listed below: Qt versionNDK…...

JVM相关面试题(每日一练)

1. 什么是垃圾回收机制&#xff1f; 垃圾收集 Garbage Collection 通常被称为“GC”&#xff0c;它诞生于1960年 MIT 的 Lisp 语言&#xff0c;经过半个多世纪&#xff0c;目前已经十分成熟了。 jvm 中&#xff0c;程序计数器、虚拟机栈、本地方法栈都是随线程而生随线程而灭&a…...

OpenCV 相机相关函数

一、变换参数矩阵的求解 1. 计算三个二维点对之间的仿射变换矩阵&#xff1a;getAffineTransform() 2. 计算多个二维点对之间的最优放射变换矩阵&#xff08;误差最小准则&#xff09;&#xff1a;estimateRigidTransform();或者findHomography(); 3. 计算四个二维点对之间的…...

微信小程序之投票管理

前言 对于会议管理模块&#xff0c;必不可少的当然就是我们的投票管理&#xff0c;实现真正意义上的无纸化办公&#xff0c;本期博客为大家介绍会议管理模块&#xff0c;包括发布投票及查看各类投票的状态 所用技术点 MyBatis、SpringMVC、VentUI MyBatis和SpringMVC在博客主…...

23种设计模式【创建型模式】详细介绍之【建造者模式】

建造者模式&#xff1a;构建复杂对象的精妙设计 设计模式的分类和应用场景总结建造者模式&#xff1a;构建复杂对象的精妙设计建造者模式的核心思想建造者模式的参与者Java示例&#xff1a;建造者模式 设计模式的分类和应用场景总结 可以查看专栏设计模式&#xff1a;设计模式 …...

[量化投资-学习笔记002]Python+TDengine从零开始搭建量化分析平台-MA均线的多种实现方式

MA 均线时最基本的技术指标&#xff0c;也是最简单&#xff0c;最不常用的&#xff08;通常使用EMA、SMA&#xff09;。 以下用两种不同的计算方法和两种不同的画图方法进行展示和说明。 MA 均线指标公式 MA (N)(C1 C2 C3 …C N )/N目录 方式一1.SQL 直接查询均值2.使用 pyp…...

c语言 判断两个文件是否相同

使用strcmp比较&#xff1a; #include <stdio.h> #include <string.h>int Compare(const char * file1, const char* file2) {FILE* f1, * f2;int size1, size2;unsigned char buffer1[1024], buffer2[1024];f1 fopen(file1, "rb");f2 fopen(file2, &…...

【2021集创赛】Arm杯三等奖:基于FPGA的人脸检测SoC设计

本作品参与极术社区组织的有奖征集|秀出你的集创赛作品风采,免费电子产品等你拿~活动。 团队介绍 参赛单位&#xff1a;合肥工业大学 队伍名称&#xff1a;芯创之家 指导老师&#xff1a;邓红辉、尹勇生 参赛杯赛&#xff1a;Arm杯 参赛人员&#xff1a;王亮 李嘉燊 金京 获奖情…...

Java电商平台 - API 接口设计之 token、timestamp、sign 具体架构与实现|电商API接口接入

一&#xff1a;token 简介 Token&#xff1a;访问令牌access token, 用于接口中, 用于标识接口调用者的身份、凭证&#xff0c;减少用户名和密码的传输次数。一般情况下客户端(接口调用方)需要先向服务器端申请一个接口调用的账号&#xff0c;服务器会给出一个appId和一个key, …...

【带头学C++】----- 1.基础知识 ---- 1.23 运算符概述

1.23 运算符概述 运算符&#xff0c;在数学中常见的加减乘除之类的符号&#xff0c;那么在C在编程语言中呢&#xff0c;将使用特定的符号或标记对操作数进行操作以生成结果。用算术运算符将运算对象(也称操作数)连接起来的、符合C 语法规则的式子&#xff0c;称为C 算术表达式运…...

python爬虫分析基于python图书馆书目推荐数据分析与可视化

收藏关注不迷路 文章目录 前言一、项目介绍二、开发环境三、功能介绍四、核心代码五、效果图六、文章目录 前言 随着电子技术的普及和快速发展&#xff0c;线上管理系统被广泛的使用&#xff0c;有很多商业机构都在实现电子信息化管理&#xff0c;图书推荐也不例外&#xff0c…...

Java零基础入门-关系运算符

前言 Java作为一门广受欢迎的开发语言&#xff0c;其在企业级应用和移动应用开发中有着广泛的应用。如果你是一个Java零基础的初学者&#xff0c;那么你来到了一个正确的地方。在本篇文章中&#xff0c;我们会详细介绍Java中的关系运算符&#xff0c;帮助你快速入门。 摘要 …...

1200*A. Trust Nobody(贪心)

Problem - 1826A - Codeforces 解析&#xff1a; 从大到小枚举说谎人的个数x&#xff0c;然后查看是否有 x个人说谎即可。 #include<bits/stdc.h> using namespace std; #define int long long const int N2e55; int t,n,a[N]; signed main(){scanf("%lld",&a…...

二维码智慧门牌管理系统升级解决方案:采集项目的建立与运用

文章目录 前言一、采集项目的建立二、采集项目的运用三、采集项目的意义 前言 在二维码智慧门牌管理系统的升级过程中&#xff0c;一个至关重要的环节是采集项目的建立与运用。采集项目是新建采集任务的前提&#xff0c;同时也是整个系统升级的关键步骤。其意义近似于现实中的…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...