当前位置: 首页 > 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;同时也是整个系统升级的关键步骤。其意义近似于现实中的…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...