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.hqwc.cn/news/675784.html

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

相关文章

web 基础之 HTTP 请求

web 基础 网上冲浪 就是在互联网(internet)上获取各种信息&#xff0c;进行工作&#xff0c;或者娱乐&#xff0c;他的英文表示surfing the Internet&#xff0c;因 “surfing”d的意思是冲浪&#xff0c;即成为网上冲浪&#xff0c;这是一种形象说法&#xff0c; 也是一个非…

市场营销的酒店营销策略研究意义

在市场经济条件下&#xff0c;市场营销策略已成为企业经营管理中最重要的组成部分&#xff0c;其在企业管理中的地位日益显现出来。 然而&#xff0c;由于酒店营销环境的特殊性&#xff0c;酒店营销策略研究一直是咱们从业者研究的热点之一。 对于酒店营销策略的研究&#xf…

MySQL中JOIN连接的实现算法

目录 嵌套循环算法&#xff08;NLJ&#xff09; 简单嵌套循环&#xff08;SNLJ&#xff09; 索引嵌套循环&#xff08;INLJ&#xff09; 块嵌套循环&#xff08;BNLJ&#xff09; 三种算法比较 哈希连接算法&#xff08;Hash Join&#xff09; 注意事项&#xff1a; 工…

VS2022快捷键修改

VS2022快捷键修改 VS2022快捷键修改 VS2022快捷键修改

【LAMMPS学习】八、基础知识(5.11)磁自旋

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语&#xff0c;以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各…

如何使用 iOS系统恢复软件修复 iPhone 问题

苹果公司向世界推出了他们可以拥有的最智能的手机。但即使是 iPhone 也无法避免智能手机常见的损坏和问题。您将熟悉最常见的问题。屏幕黑屏或卡在 Apple 徽标上&#xff1b;冻结或卡在恢复模式的 iPhone。但这样的问题不胜枚举&#xff0c;每天都有 iOS 用户在他们的设备中遇到…

STM32-DAC

DAC 前言一、理论介绍二、DAC代码三、实验结果总结 前言 前言写个参考吧 STM32 DAC串口 一、理论介绍 DAC是数字模拟转换器&#xff08;Digital to Analog Converter&#xff09;的缩写&#xff0c;它是一种将数字信号转换为模拟信号的设备。 RC有2个通道。 DAC的初始化 #…

【idea-sprongboot项目】在linux服务器上纯远程开发方式

继上一篇博客【idea-sprongboot项目】SSH连接云服务器进行远程开发-CSDN博客 目录 五、远程开发方式 2&#xff09;纯远程开发方式 步骤 五、远程开发方式 2&#xff09;纯远程开发方式 实现原理&#xff0c; 步骤 &#xff08;1&#xff09;首先&#xff0c;关闭当前正在…

【k8s多集群管理平台开发实践】八、client-go实现service读取列表、创建service、读取yaml配置并更新

文章目录 简介 一.k8s的service列表1.1.controllers控制器代码1.2.models模型代码 二.创建service2.1.controllers控制器代码2.2.models模分代码 三.读取和更新service的yaml配置3.1.controllers控制器代码3.2.models模型代码 四.路由设置4.1.路由设置 五.前端代码5.1.列表部分…

向各位请教一个问题

这是菜鸟上的一道题目&#xff0c;单单拿出来问问大家&#xff0c;看看能不能解惑 &#xff0c;谢谢各位&#xff01; 题目25&#xff1a;求12!3!...20!的和 解题思路&#xff1a;这个题不知道为什么我用DEV C 5.11显示出来为0.000000&#xff0c;可能版本有问题&#xff1f;&a…

人工智能|机器学习——强大的 Scikit-learn 可视化让模型说话

一、显示 API 简介 使用 utils.discovery.all_displays 查找可用的 API。 Sklearn 的utils.discovery.all_displays可以让你看到哪些类可以使用。 from sklearn.utils.discovery import all_displays displays all_displays() displays Scikit-learn (sklearn) 总是会在新版本…

小滴大课训练营-微服务架构-海量数据商用短链平台项目大课

小滴大课训练营-微服务架构-海量数据商用短链平台项目大课【2023最新升级版】 一、海量数据大课架构课程简介 海量数据项目大课&#xff0c;是小滴课堂准备耗时近1年的综合性实战项目&#xff0c;从0~1开发商用短链平台&#xff1b; 从产品需求文档定制出发&#xff0c;掌握核…