作者:张艳涛

日期:2020-07-29


CSS设置俩个标签的间距 及 Input Slots

    <div>
<div class="m-b-20 ovf-hd"> <div class="fl w-200 ">
<el-input placeholder="请输入用户名" v-model="realname">
<el-button slot="append" icon="search" @click="search()"></el-button>
</el-input>
</div>
<div class="fl m-l-30" v-show="addShow">
<router-link class="btn-link-large add-btn" to="add">
<i class="el-icon-plus"></i>  添加用户
</router-link>
</div>
</div>

 global.css中设置

.m-l-30 {
margin-left: 30px !important;
}

 

Input Slots


 参考:https://element.eleme.cn/#/zh-CN/component/input

 

<div class="demo-input-suffix">
slot 方式:
<el-input
placeholder="请选择日期"
v-model="input3">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
placeholder="请输入内容"
v-model="input4">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>

Input Slots

name 说明
prefix 输入框头部内容,只对 type="text" 有效
suffix 输入框尾部内容,只对 type="text" 有效
prepend 输入框前置内容,只对 type="text" 有效
append 输入框后置内容,只对 type="text" 有效
                <el-input placeholder="请输入用户名" v-model="realname">
<el-button slot="append" icon="search" @click="search()"></el-button>
</el-input>

  

atzhang  

CSS 格式 设置标签间距 和 input slot的更多相关文章

  1. CSS设置标签、图片放大、缩小、旋转、移动(tranform)

    CSS设置标签.图片放大.缩小.旋转.移动(tranform) 1.缩小和放大属性(scale) 格式:tranform:缩小类型(数值): 注意:缩小和放大都是 scale : 其中的值(0~1)代 ...

  2. css块级标签,行内标签,行内块标签的转换(2)

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

  3. HTML css 格式布局

    CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/   注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...

  4. html 常用标签 a form input 标签 等等等

    前端HTML   HTML介绍 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk ...

  5. 前端学习笔记之CSS属性设置

    CSS属性设置   阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准 ...

  6. Html/CSS 初步介绍html和css部分重要标签

    &初步介绍html和css部分重要标签& 注:开头书写:<!DOCTYPE html>表明对应标准html代码 先行总结重点 下方给出具体 CSS: 1. position ...

  7. [CSS属性设置,盒子模型,网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  8. 解决img标签间距问题

    解决img标签间距问题 关于img标签间距问题:多个img之间有间距,包含img标签的div之间有间距. 代码如下: 1 <!doctype html> 2 <html lang=& ...

  9. html标签,格式控制标签,内容容器标签,超链接标签,图片标签,表格

    打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin  上边距 leftm ...

随机推荐

  1. Linux中测试网络命令

    ping IP -t 是持续性查看网络状态

  2. CosId 1.1.0 发布,通用、灵活、高性能的分布式 ID 生成器

    CosId 通用.灵活.高性能的分布式 ID 生成器 介绍 CosId 旨在提供通用.灵活.高性能的分布式系统 ID 生成器. 目前提供了俩大类 ID 生成器:SnowflakeId (单机 TPS ...

  3. zset如何解决内部链表查找效率低下

    zset作为有序集合,内部基于跳表或者说索引的方式实现了数据的快速查找.解决了链表查询效率低下的痛点 前言 紧接前文我们学习了Redis中Hash结构.在里面我们梳理了字典这个重要的内部结构并分析了h ...

  4. Docker:Centos7更新yum源下载docker

    前言: Docker 要求 CentOS 系统(6.5及以上)的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker . 通过 uname -r 命令查看你 ...

  5. 21 shell Here Document/String

    Here Document 的用法 Here Document可以将它理解为"嵌入文档""内嵌文档""立即文档",它将命令需要处理的数据或者 ...

  6. redis广播/订阅模式演示

    参考博客 http://www.pianshen.com/article/7183315879/ 1.首先在本地启动redis服务 2.启动4个客户端 redis-cli 3.将其中三个客户端设置监听 ...

  7. leetcode第156场周赛5207

    当时做的时候,一直理解想搞dp,后面可能思路有点乱了,写不出来... 看了评论区的大佬,才发现是滑动窗口的题目,学习到了. 思路分析: 1.这题可以转化成求数组最大子数组的和不超过maxCost的长度 ...

  8. Window server 2016 搭建Java Web环境

    系统下载 下载种子(迅雷下载): ed2k://|file|cn_windows_server_2016_updated_feb_2018_x64_dvd_11636703.iso|629426585 ...

  9. 【重学Java】IO流

    IO流的UML类图 File类 File类概述和构造方法[应用] File类介绍 它是文件和目录路径名的抽象表示 文件和目录是可以通过File封装成对象的 对于File而言,其封装的并不是一个真正存在 ...

  10. 打开设置windows10内置linux功能-启用linux子系统

    第一步设置开发者模式 步骤:windows+s打开娜娜,输入设置,并点击. 点击更新与安全 点击开发者选项,选择开发者模型,弹出的对话框选确定之后等待安装完毕. 第二步:安装linux 点击确定后等待 ...