Web开发小知识点(一)

1.input不支持自动换行解决办法

input不支持换行;
textarea:支持换行;

设置提示文案的css 用::placeHolder

2.textarea禁止拖拽、去掉右下角三角(css下)
textarea{resize:none;
}
3.用户对访问路径乱输入的处理

在路由管理器index.js里进行处理

之前的path写'*'号就行了,现在做了限制,得用正则 /:catchAll(.*),我这儿时回到首页,如果想跳转特有的404页面,只需要把redirect写成想跳转的路由就行了

4.div实现 a标签的跳转功能
 <div class="repeat_top_content" @click="redirectToLink">

 实现方法

function redirectToLink() {// window.location.href = '/h5/help?index=0';//就在本页面跳转window.open('/h5/help', '_blank');//打开一个新标签页
}
5.el-dialog实现自定义弹窗
  <el-dialog v-model="dialogVisible" :show-close="false" :close-on-click-modal="false"style="width: 296px; height: 314px;background-color:white ;border-radius: 16px; padding: 0;"modal="true" top='243px'><divstyle=" padding-top: 16px;display: flex;flex-direction: column;justify-content: space-between;align-items: center;height: 314px;"><div style="display: flex; flex-direction: column;margin-left: 16px;margin-right: 16px;"><span class="dialog_title">¡CREO se actualiza!</span><span class="dialog_text">Con el fin de brindarle una mejor experiencia, hemos lanzado una nuevaversiónque requiere una actualización inmediata por su parte.</span></div><div class="dialog_button" @click="toDownload">Actualice ahora</div></div></el-dialog>

效果

组件地址:

Dialog 对话框 | Element Plus

常用属性:

:show-close="false" 是否展示关闭按钮

:close-on-click-modal="false" 点击遮罩是否关闭

tips:dialog有自带的margin和padding,如果发现你设置或者未设置这两个属性但是它展示出来和UI不一样,可以把这两个属性设置为0;

属性名说明类型默认
model-value / v-model是否显示 Dialogboolean
titleDialog 对话框 Dialog 的标题, 也可通过具名 slot (见下表)传入string''
width对话框的宽度,默认值为 50%string / number''
fullscreen是否为全屏 Dialogbooleanfalse
topdialog CSS 中的 margin-top 值,默认为 15vhstring''
modal是否需要遮罩层booleantrue
6.关于Flex布局justify-content属性

justify-content 属性用于定义 Flexbox 容器中子元素在主轴上的对齐方式。除了 space-between,还有其他常用的取值:

  1. flex-start:子元素沿主轴起点对齐。(例如文本)
  2. flex-end:子元素沿主轴终点对齐。
  3. center:子元素在主轴上居中对齐。(这个很常用)
  4. space-around:子元素沿主轴均匀分布,每个子元素前后都有相等的空白间距。
  5. space-evenly:子元素沿主轴均匀分布,每个子元素前后和两个子元素之间都有相等的空白间距。
  6. stretch:子元素拉伸以填充整个容器的长度(默认值)。
  7. space-between,子元素就会在水平方向上均匀分布,并且具有相等的间距。

我需求里的截图

space-around space-evenly

space-between

7.div设置overflow:auto时隐藏滑动条

div的css:

.ccccc {

width: 100%;

height: 100%;

position: relative;

overflow: auto;//设置这个属性的时候,表示如果内容展示不完可以通过滑动来展示,会自带一个滚动条

}

在下面补充一个:

.ccccc ::-webkit-scrollbar {

width: 0;

height: 0;

}

 就可以了。

8.textarea文本居中

有时候需要设置一个输入框,但是textarea的文本默认左上角,这时候,设置 rows="1"就行了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/7431.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

中学数学重大错误:射线A沿其正向平移非0距离就变为其真子集了

黄小宁 射线A沿其射出的方向平移非0距离变为B≌A&#xff0c;中学数学一直认定B是A的一部分&#xff0c;其实这是将两异射线&#xff08;函数&#xff09;误为同一射线&#xff08;函数&#xff09;的肉眼直观错觉。设“点集A&#xff5b;点p&#xff5d;”表示A的元素是点p&a…

【分享】基于集成成像的悬浮光场3D显示系统

摘要: 悬浮显示技术是一种非常具有发展前景的显示技术&#xff0c;它可以将图像显示在空中&#xff0c;给观看者带来沉浸感和临场感的体验。目前国内悬浮3D显示技术研究还处于初级阶段。文章提出基于集成成像的悬浮3D显示系统&#xff0c;系统由集成成像3D显示器、半透半反镜和…

Cordova 12 Android 不支持 http 原因探索

最近在升级 Cordova 到最新版本&#xff0c;升级完成后发现无法请求网络&#xff0c;研究了两次最终发现解决方案。 发现控制台中有日志输出&#xff0c;提示当前是 https &#xff0c;无法直接访问 http。 [INFO:CONSOLE(225)] "Mixed Content: The page at https://lo…

第11篇:创建Nios II工程之控制多个七段数码管

Q&#xff1a;DE2-115开发板上有8个七段数码管&#xff0c;如何用PIO IP并设计Nios II工程控制呢&#xff1f; A&#xff1a;基本思路&#xff1a;DE2-115上有8个7位七段数码管&#xff0c;而一个PIO最多可配置为32位&#xff0c;如此就可以添加2个PIO都配置为28位output。 Ni…

大数据掌控秘籍:一步步教你安装和驾驭Cloudera的无限潜力

Cloudera是一家提供大数据解决方案的公司&#xff0c;主要产品是Cloudera Enterprise&#xff0c;它是一个基于Apache Hadoop、Apache Spark和其他开源技术的大数据平台。Cloudera Enterprise提供了一个完整的大数据生态系统&#xff0c;包括数据存储、数据处理、数据分析和数据…

机器学习批量服务模式优化指南

原文地址&#xff1a;optimizing-machine-learning-a-practitioners-guide-to-effective-batch-serving-patterns 2024 年 4 月 15 日 简介 在机器学习和数据分析中&#xff0c;模型服务模式的战略实施对于在生产环境中部署和操作人工智能模型起着至关重要的作用。其中&…

Android中对MVC,MVP,MVVM架构的理解

博主前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住也分享一下给大家&#xff0c; &#x1f449;点击跳转到教程 以下是主流的对MVC,MVP,MVVM架构理解的图示 一、对于MVC架构的理解&#xff1a; 1、首先编写Model&#…

Python密码测试程序

下面是一个简单的 Python 密码测试程序&#xff0c;用于检查用户输入的密码是否符合一些基本的安全要求&#xff0c;如长度、包含字母和数字等。这个程序可以作为一个基本的密码验证器&#xff0c;你可以根据需要进行修改和扩展。 1、问题背景 我们正在编写一个程序&#xff0…

数据结构:线性表(详解)

线性表 线性表的知识框架&#xff1a; 线性表的定义&#xff1a; 线性表是具有相同数据类型的n(n > 0)个数据元素的有限序列&#xff0c;当n 0时线性表为一个空表。 若用L命名为线性表&#xff0c;则数据集合为L {a1,a2,…,an}&#xff0c;其中a1称为表头元素&#xff0c…

从零开始搭建Springboot项目脚手架1:新建项目

1、技术栈 SpringBoot 3.2.5&#xff1a; 2、 新建项目 使用SpringInitializr 选择Lombok、Configuration Processor、Spring Web&#xff0c;同时IDEA也要安装Lombok插件 删除多余的Maven目录、Maven文件&#xff0c;把HELP.md改成README.md。 当然前提是已经安装好Maven和配…

力扣70 爬楼梯 C语言 动态规划 递归

题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方法可以爬到楼顶。 1. 1 阶 1 阶 2. 2 阶 示例 2…

Java多线程:常见的线程的创建方法及Thread类详解

目录 一.并发编程相关概念 线程与进程 多线程 Java中线程的状态 二.线程的创建方法 方法一&#xff1a;继承Thread类 方法二&#xff1a;实现Runnable接口 其他方法 三.Thread类详解 Thread常见构造方法 Thread常见属性 Thread常见方法 start() 与 run() sleep(…

Redis教程——主从复制

在上篇文章我们学习了Redis教程——管道&#xff0c;这篇文章学习Redis教程——主从复制。 主从复制 为了数据更加安全可靠&#xff0c;在实际的项目中&#xff0c;肯定是有多个Redis服务&#xff0c;主机Redis以写为主&#xff0c;从机Redis以读为主&#xff0c;当主机Redis…

长难句打卡5.7

In December 2010 America’s Federal Trade Commission (FTC) proposed adding a “do not track” (DNT) option to Internet browsers, so that users could tell advertisers that they did not want to be followed. 2010年12月&#xff0c;美国美国联邦贸易委员会(FTC)提…

在数字化转型的浪潮中,CBDB百数服务商如何破浪前行?

在信息化时代&#xff0c;传统咨询企业面临着数字化转型的挑战与机遇。如何利用数字化技术提升业务效率、增强客户黏性&#xff0c;成为了行业关注的焦点。云南析比迪彼企业管理有限公司&#xff08;CBDB&#xff09;作为云南地区的企业咨询服务提供商&#xff0c;率先与百数展…

Springai入门

一、概述 1.1发展历史 1.2大模型 大模型&#xff0c;是指具有大规模参数和复杂计算结构的机器学习模型。这些模型通常由深度神经网络构建而成&#xff0c;拥有数十亿甚至数千亿个参数。其设计目的在于提高模型的表达能力和预测性能&#xff0c;以应对更加复杂的任务和数据&…

虚幻引擎5 Gameplay框架(二)

Gameplay重要类及重要功能使用方法&#xff08;一&#xff09; 配置LOG类及PlayerController的网络机制 探索验证GamePlay重要函数、类的执行顺序与含义 我们定义自己的日志&#xff0c;专门建立一个存放自己日志的类&#xff0c;这个类继承自BlueprintFunctionLibrary 然后…

零基础怎么学鸿蒙开发?

对于零基础的学习者来说&#xff0c;掌握鸿蒙开发不仅是迈向新技术的第一步&#xff0c;更是开拓职业道路的重要机遇。随着鸿蒙系统在各行各业的应用逐渐扩展&#xff0c;对于掌握这一项技术的开发人员需求也随之增长。下文将为大家提供针对零基础学习鸿蒙开发的逻辑&#xff0…

提高曝光率与点击率:海外KOL推广与社交媒体算法的完美结合

在当今数字化时代&#xff0c;社交媒体已经成为了企业和品牌推广的重要渠道之一&#xff0c;海外KOL也在各个领域拥有着庞大的粉丝群体和影响力。然而&#xff0c;想要在众多内容中脱颖而出&#xff0c;提高推广内容的曝光率和点击率&#xff0c;仅仅依靠KOL的影响力是不够的&a…

论文阅读-THE GENERALIZATION GAP IN OFFLINE REINFORCEMENT LEARNING(ICLR 2024)

1.Motivation 本文希望比较online RL、offline RL、序列决策和BC等方法的泛化能力(对于不同的初始状态、transition functions、reward functions&#xff0c;现阶段offline RL训练的方式都是在同一个环境下的数据集进行训练)。实验发现offline的算法相较于online算法对新环境…