Web开发小知识点(一)

embedded/2024/9/23 20:52:48/
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.ppmy.cn/embedded/39218.html

相关文章

Oracle-一次TX行锁堵塞事件

问题背景&#xff1a; 接用户问题报障&#xff0c;应用服务出现大量会话堆积现象&#xff0c;数据库锁堵塞严重&#xff0c;需要协助进行问题定位和排除。 问题分析&#xff1a; 登录到数据库服务器上&#xff0c;首先查看一下数据库当前的等待事件情况&#xff0c;通过gv$ses…

STC8增强型单片机开发【定时器Timer⭐】

目录 一、引言 二、定时器基础知识 三、STC8定时器配置 四、代码示例 五、总结 一、引言 在单片机开发中&#xff0c;定时器&#xff08;Timer&#xff09;是一个极其重要的组件&#xff0c;它允许开发者基于时间触发各种事件或任务。STC8增强型单片机作为一款功能丰富的…

Java引入第三方库JLaTeXMath处理Latex特殊字符的公式

本文主要是为了处理大模型返回输出的Latex 结构的特殊字符 展示为熟知的正常公式 例如&#xff1a;我输入一条Latex公式 然后输出成正常的可见公式 $\frac{990}{500} \frac{99}{50} \frac{29.7}{25} \frac{29.7}{27} \approx \frac{2}{27}$ 1. pom.xml文件中引入JLaTeXM…

基于SSM的文化遗产的保护与旅游开发系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的文化遗产的保护与旅游开发系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;…

vue导出大量数据的表格方法

我目前的项目导出4万7数据没问题 先安装 npm install -S file-saver npm install xlsx0.16.0 -S npm install -D script-loader 我使用的版本是"file-saver": “^2.0.5”, “xlsx”: “^0.16.0” 新建Export2Excel.js //Export2Excel.js /* eslint-disable */ requ…

Mybatis高效批量插入实战:五种策略全面解析

在现代应用开发中&#xff0c;数据处理常常涉及大量数据的插入操作&#xff0c;特别是在数据迁移、日志记录、统计分析等场景中。Mybatis作为Java领域广泛使用的持久层框架&#xff0c;其批量插入功能对于提升数据插入效率至关重要。本文将深入探讨Mybatis实现批量插入的五种策…

PHPStudy 访问网页 403 Forbidden禁止访问

涉及靶场 upload-labd sqli-labs pikachu dvwa 以及所有部署在phpstudy中的靶场 注意&#xff1a;一定要安装解压软件 很多同学解压靶场代码以后访问报错的原因是&#xff1a;电脑上没有解压软件。 这个时候压缩包看起来就是黄色公文包的样子&#xff0c;右键只有“全部提取…

C/C++基础-变量类型

在C/C中&#xff0c;变量是用于存储数据的容器&#xff0c;并且每个变量都有一个特定的类型&#xff0c;该类型决定了变量可以存储的数据种类以及变量在内存中所占用的空间大小。以下是C中一些基本的变量类型&#xff1a; 整型&#xff08;Integer Types&#xff09; int: 通常…