----------------------------------------华丽丽的分割线----------------------------------------

iview4如何把form表单里的input输入框和点击输入框之后的边框去掉？

iview 的form表单

    <Form :model="form" :label-width="80"><FormItem label="地址"><!--地址--><Input v-model="form.input" placeholder="Enter something..."/></FormItem></Form>

ps: 那个小手是鼠标的那个小手

 .ivu-input {border: 0;cursor: pointer; // 小手}.ivu-input:focus {border:none;box-shadow: 0 0 0 2px transparent; // 这个是去除标签的最主要styledisplay: none;}

上面页面Form的样式↓
外面包的是个box 然后加个Divider (iview的分割线) 隔开

iview 菜单+滑动出children菜单 (ul+li)

这个是侧边主菜单的ul+li方式简单代码后续加上后台数据会再来

       /*开始菜单*/.side-menu.menu-wrapper {width: 100%;height: 100%;overflow: auto;.menu-list {border-bottom-color: #191a23;.menu-item {position: relative;padding: 14px 0;text-align: center;font-size: 12px;color: #ededed;cursor: pointer;.menu-name {padding: 2px 0;}.sub-menu-wrapper {position: fixed;}}}}/*结束菜单*/

此处↓是主菜单滑动鼠标后对应的子菜单(下面是假数据固定的设置的子菜单数据)

    /*children菜单 start*/.main-drawer {width: 200px;height: 100%;position: absolute;left: 60px;z-index: 1;font-size: 14px;.ul-menu-list {height: 100%;background-color: #ffffff;padding: 20px 15px;list-style-type: none;.ul-list-item {padding: 8px 0px;margin-left: 8px;cursor: pointer;letter-spacing: 1px;.main-font {margin-left: 10px;}.menu-list-wer {padding: 5px 0 0 30px;list-style-type: none;.li-list-wer {padding: 3px;}}}}}/*children菜单 end*/

一些js方法

VUE 花路之iview（一）相关推荐

透过Bigbang《花路》销量战绩看QQ音乐的压倒性优势
3月13日,BIGBANG新歌<花路>在QQ音乐上首发,销量20小时突破了67万张,销售额达到200万:3月17日凌晨6点,销量突破100万张,85小时破百万打破了所有韩国艺人在QQ音乐平 ...
创建Vue项目以及引入Iview
创建Vue项目以及引入Iview 官方文档 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue i ...
vue动态路由加载组件，找不到module问题
vue动态路由加载组件,找不到module问题 vue动态加载路由并挂载到vue.路由信息由后端给出,同时component的路径也是后端给出,但是动态加载该路径会报错. 原因:webpack 编译e ...
vue花括号和php冲突,vue的花括号怎么使用
这次给大家带来vue的花括号怎么使用,vue花括号使用的注意事项有哪些,下面就是实战案例,一起来看一下. {{}}的使用 {{msg}} {{cart.brand}} 3 + 5 = {{ 3 + 5 ...
【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架iview
今晚看了一下基于vuejs的ui框架iview,感觉UI挺好看的,那么在vue项目中应该如何使用iview呢?以下做简单的记录. 首先安装iview: $ npm install iview --sa ...
Vue上传文件 iview Upload UI 组件上传组件
Vue上传文件 input支持上传文件定义type类型,隐藏样式第三定义change事件拿到file 的相关信息,accept限制支持的文件类型然后给button增加点击事件 template部 ...
VUE(四)：引入iview
环境基础 vue-cli 3.x搭建环境安装 npm安装 NPM安装 iView npm i -S iview 全局引入一般在 webpack 入口页面 main.js 中如下配置: import ...
人气TOP｜当红炸子鸡「小明机器人」，出道走花路啦
在全球新一轮技术革命的时代背景下,越来越多的企业走上了数字化之路.伴随着企业对数字化转型的持续关注,各行各业对"数字化员工"即RPA(机器人流程自动化,Robotic Proces ...
孙空空的Vue之路-Day07-事件处理
事件处理 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...

VUE 花路之iview（一）

iview4如何把form表单里的input输入框和点击输入框之后的边框去掉？

iview 菜单+滑动出children菜单 (ul+li)

一些js方法

VUE 花路之iview（一）相关推荐

最新文章

热门文章