精华内容
下载资源
问答
  • .home为当前模板根元素类名,如下 <template>  <div class="home">  </div> </template>   <style scoped&.../style

    .home为当前模板根元素类名,如下

    <template>

        <div class="home">

        </div>

    </template>

     

    <style scoped>

    .home  >>>  .el-button {

    color:red;

    }

    </style>

    展开全文
  • 老是遇到一些朋友问一些element-ui组件使用相关的基础问题,因为官方文档上并没有提供所有琐碎的功能代码demo。从这里开始我会根据我实际遇到的问题记录一些常见的官方文档没有详述的功能代码,供给大家拓展思路。 ...

    vue+elementui 提高开发效率,以下为form表单验证例子。包含自定义验证等。

    1. 以中国大陆手机号验证为例

    // 这是组价的代码
    <el-form-item prop="mobile">
        <el-input type="text" v-model="ruleForm.mobile" auto-complete="off" placeholder="请输入手机号"></el-input>
    </el-form-item>
    
    // 这是rules的代码
    mobile: [
        { validator: validateMobile, trigger: 'blur' },
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
    ],

    在element-ui的源码中搜索blur,你会很容易看到除了blur 还有focus、input,多个使用“,”分隔

    2. 表单局部提交后端验证

    在一些输入项目较多的表单提交中,比如说注册时填写的用户名,通常我们会对用户名是否重复进行验证,这是就需要调用服务来验证,这种略显复杂的验证,就需要自定义验证规则来实现。看下面的代码:

     
    function validateMobile(rule, value, callback) {
                           var MobileRegex = /^1[0-9]{10}$/;
                             if (!MobileRegex.test(value)) {
                                 callback(new Error('手机号码格式不正确!'))
                             } else {
                                 callback();
                             }
                         }

    注意:自定义规则中每个执行流程中都必须附带callback(),这样才能明确通过验证的情况下去掉输入框上的loading。要显示的错误提示则可以new Error(“xxxx”)即可。

    3. 综合来看

    通常可以把所有规则都写在自定义的规则中,即可实现较为复杂的验证,实际上我们可以再validatePass里面调用根实例下所有data methods...,一个很简单的例子是实现两次输入的密码是否相同的验证,看下面的代码:

         <div id="app">
                 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                      <el-form-item label="活动名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                     <el-form-item label="手机号码"  prop="mobile">
                         <el-input v-model="ruleForm.mobile"></el-input>
                     </el-form-item>
                      <el-form-item label="活动区域" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                          <el-option label="区域一" value="shanghai"></el-option>
                          <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="活动时间" required>
                        <el-col :span="11">
                          <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                          </el-form-item>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                          <el-form-item prop="date2">
                            <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                          </el-form-item>
                        </el-col>
                      </el-form-item>
                      <el-form-item label="即时配送" prop="delivery">
                        <el-switch v-model="ruleForm.delivery"></el-switch>
                      </el-form-item>
                      <el-form-item label="活动性质" prop="type">
                       <el-checkbox-group v-model="ruleForm.type">
                          <el-checkbox label="1"  name="type">美食/餐厅线上活动</el-checkbox>
                          <el-checkbox label="2" name="type">地推活动</el-checkbox>
                          <el-checkbox label="3" name="type">线下主题活动</el-checkbox>
                          <el-checkbox label="4" name="type">单纯品牌曝光</el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                      <el-form-item label="特殊资源" prop="resource">
                        <el-radio-group v-model="ruleForm.resource">
                          <el-radio label="线上品牌商赞助"></el-radio>
                          <el-radio label="线下场地免费"></el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <el-form-item label="活动形式" prop="desc">
                        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                      </el-form-item>
              </el-form>
    
    
            </div>
            <script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>
    
    
    <script src="//unpkg.com/element-ui@2.0.2/lib/index.js"></script>
    <script  type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                ruleForm: {
                    name: '',
                    mobile: "",
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                rules: {
                    name: [
                      { required: true, message: '请输入活动名称', trigger: 'blur' },
                      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    mobile: [
                      { required: true, message: '请输入手机号码', trigger: 'blur' },
                     {
                         validator: function (rule, value, callback) {
                             var MobileRegex = /^1[0-9]{10}$/;
                             if (!MobileRegex.test(value)) {
                                 callback(new Error('手机号码格式不正确!'))
                             } else {
                                 callback();
                             }
                         }, trigger: 'blur'
                     }
                    ],
                    region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
                    ],
                    date1: [
                { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    date2: [
                      { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    type: [
                      { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                    ],
                    resource: [
                      { required: true, message: '请选择活动资源', trigger: 'change' }
                    ],
                    desc: [
                      { required: true, message: '请填写活动形式', trigger: 'blur' }
                    ]
                }
            }, methods: {
                submitForm: function (formName) {
                    var Self = this;
                    this.$refs[formName].validate(function (valid) {
                        if (valid) {
                            alert(JSON.stringify(Self.ruleForm));
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm: function (formName) {
                    this.$refs[formName].resetFields();
                }
    
    
            }
        });
    </script>

    就这么简单就可以实现非vuejs情况下是非啰嗦的验证。而且样式也不会很丑,当然了任然可以选择自定义样式。这个以后再记录。

    效果图如下:


    展开全文
  • 老是遇到一些朋友问一些element-ui组件使用相关的基础问题,因为官方文档上并没有提供所有琐碎的功能代码demo。从这里开始我会根据我实际遇到的问题记录一些常见的官方文档没有详述的功能代码,供给大家拓展思路。 1...
        

    前言

    老是遇到一些朋友问一些element-ui组件使用相关的基础问题,因为官方文档上并没有提供所有琐碎的功能代码demo。从这里开始我会根据我实际遇到的问题记录一些常见的官方文档没有详述的功能代码,供给大家拓展思路。

    1. 以中国大陆手机号验证为例

    // 这是组价的代码
    <el-form-item prop="mobile">
        <el-input type="text" v-model="ruleForm.mobile" auto-complete="off" placeholder="请输入手机号"></el-input>
    </el-form-item>
    
    // 这是rules的代码
    mobile: [
        { validator: validateMobile, trigger: 'blur' },
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
    ],

    在element-ui的源码中搜索blur,你会很容易看到除了blur 还有focus、input,非常贴心基本满足了表单验证的入门需求。

    2. 表单局部提交后端验证

    在一些输入项目较多的表单提交中,比如说注册时填写的用户名,通常我们会对用户名是否重复进行验证,这是就需要调用服务来验证,这种略显复杂的验证,就需要自定义验证规则来实现。看下面的代码:

    // 注意validatePass是属于data的,但不在return中。
    data () {
    let validatePass = (rule, value, callback) => {
        if (value.length >= 8) {
                    let params = {
                        'account': value
                    }
                    axios.post('localhost:8080/verifyUserAccount', params)
                    .then(function (response) {
                        if (response.data.err) {
                            callback(response.data.msg)
                        } else {
                            callback()
                        }
                    })
                    .catch(function () {
                        callback(new Error('服务异常'))
                    })
                } else {
                    callback()
                }
    }
    
    //这是验证规则,当然了你也可以同时使用基本的验证规则
    account: [
        { validator: validatePass , trigger: 'blur' }
    ]

    注意:validatePass 自定义规则中每个执行流程中都必须附带callback(),这样才能明确通过验证的情况下去掉输入框上的loading。要显示的错误提示则可以new Error(“xxxx”)即可。

    3. 综合来看

    通常可以把所有规则都写在自定义的规则中,即可实现较为复杂的验证,实际上我们可以再validatePass里面调用根实例下所有data methods...,一个很简单的例子是实现两次输入的密码是否相同的验证,看下面的代码:

    let validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'))
                } else if (value !== this.ruleForm.password) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback()
                }
            }

    就这么简单就可以实现非vuejs情况下是非啰嗦的验证。而且样式也不会很丑,当然了任然可以选择自定义样式。这个以后再记录。

    4. 写在最后的

    以上三点已经完全覆盖了所有表单验证的情况,可以实现非常复杂的验证。正式基于这些原因,我坚信element-ui是正确的选择。我将会继续写一些剪短的文章补充文档的遗漏。同时如果你也跟我一样喜欢element-ui欢迎跟我探讨,我们新建了一个qq群478694438![图片描述][1],方便大家交流。最后喊一下口号:不拘泥于原理,完全立足于实现!

    5. 另
    文中涉及到的源码我将会上传到讨论群中,不足之处持续更进,共同探讨。

    展开全文
  • 涉及到路由,权限等等相关内容的部分,跟本文主旨关系不大,所以我将会在另外一篇文章中详述,混在一起的话内容太多了 基于element-ui的左侧可伸缩的菜单通过vuejs来开发支持展开收缩的菜单是非常简单的,只需要v-...
        

    涉及到路由,权限等等相关内容的部分,跟本文主旨关系不大,所以我将会在另外一篇文章中详述,混在一起的话内容太多了


    基于element-ui的左侧可伸缩的菜单
    通过vuejs来开发支持展开收缩的菜单是非常简单的,只需要v-if v-else即可简单实现,下面我分步骤详细讲解过程,并在后续的系列文章中详细讲解权限菜单、路由过滤等等一些实用的技巧。当然还包括完整实现后台管理页面所要重点关注的细节。

    如何把权限菜单展示出来呢?
    首先,这是一个动态菜单,该显示什么样的菜单需要从后端获取,规则方面如下:

    [
        {
            'label': '这个菜单',
            'id': 001,
            'parntid': 0
        },
        {
            'label': '那个菜单',
            'id': 002,
            'parntid': 0
        },
        {
            'label': '二个菜单',
            'id': 003,
            'parntid': 001
        },
        {
            'label': '三个菜单',
            'id': 003,
            'parntid': 001
        },
        {
            'label': '四个菜单',
            'id': 003,
            'parntid': 002
        },
        {
            'label': '吴个菜单',
            'id': 003,
            'parntid': 002
        }
    ]

    注意:我这里是用的两级菜单,同样的原理可以很简单的生成多级的。json中通过id来实现父子关联,也可以改成多级的json,用child来表示子级,子级的子级。这样也可以很容易的生成多级的多级菜单。不过通常也就两级或者三级。原理相同很容易扩展,如果不知道怎么扩展欢迎加入qq群:478694438来探讨。
    下面看一下菜单的展示,需要aside标签,aside标签是html5的标签,没见过aside ?不要紧换成div也行。先看效果,再看代码(代码看上去有点长,别被吓着,我后面详细讲解):
    这是收缩的状态:
    clipboard.png

    这是展开的状态:
    clipboard.png

    <aside :class="collapsed?'menu-expanded':'menu-collapsed'">
                    <el-menu default-active="/ManageRole" v-if="collapsed" class="el-menu-vertical-demo"  router>
                        <template v-for="(item,index) in authMenu">
                            <el-submenu :index="index+''" v-if="item.parentPermissionCode==0">
                                <template slot="title">&nbsp;&nbsp;&nbsp;<i :class="getIcon(item.permissionName)">&nbsp;&nbsp;&nbsp;</i>{{item.permissionName}}</template>
                                <el-menu-item v-for="child in authMenu" :index="child.uri" :key="child.permissionMark" v-if="item.permissionCode==child.parentPermissionCode">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i :class="getIcon(child.permissionName)">&nbsp;&nbsp;&nbsp;</i>{{child.permissionName}}</el-menu-item>
                            </el-submenu>    
                        </template>
                    </el-menu>
                    <ul class="el-menu collapsed" ref="menuCollapsed" v-else>
                        <li v-for="(item,index) in authMenu" v-if="item.parentPermissionCode==0" class="el-submenu item">
                            <template>
                                <div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="getIcon(item.permissionName)"></i></div>
                                <ul class="el-menu tipMenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"> 
                                    <li v-for="child in authMenu" :key="child.uri" v-if="item.permissionCode==child.parentPermissionCode" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.uri)"><i :class="getIcon(child.permissionName)"></i>&nbsp;&nbsp;&nbsp;{{child.permissionName}}</li>
                                </ul>
                            </template>
                        </li>
                    </ul>
                    <div class="changeState" @click="collapsed=!collapsed">
                        <i v-if="collapsed" class="iconfont icon-zuoyou1"></i>
                        <i v-else class="iconfont icon-zuoyou"></i>
                    </div>    
                </aside>

    来分析一下这些乱糟糟的代码(这是我从源码中截出来的所以看起来有点乱):
    <el-menu>、<ul>、changeState这三个都是aside标签下的同级的标签,分别对应:展开状态下的菜单、收缩状态下的菜单、切换状态的箭头。
    先看el-menu:

    <el-menu default-active="/ManageRole" v-if="collapsed" class="el-menu-vertical-demo"  router>
                        <template v-for="(item,index) in authMenu">
                            <el-submenu :index="index+''" v-if="item.parentPermissionCode==0">
                                <template slot="title">&nbsp;&nbsp;&nbsp;<i :class="getIcon(item.permissionName)">&nbsp;&nbsp;&nbsp;</i>{{item.permissionName}}</template>
                                <el-menu-item v-for="child in authMenu" :index="child.uri" :key="child.permissionMark" v-if="item.permissionCode==child.parentPermissionCode">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i :class="getIcon(child.permissionName)">&nbsp;&nbsp;&nbsp;</i>{{child.permissionName}}</el-menu-item>
                            </el-submenu>    
                        </template>
                    </el-menu>

    collapsed这个值即为判断显示展开还是收缩状态的开关。对照ul下的v-else看。通过一个v-for 循环除所有的父级菜单,再次循环寻找子级菜单中parentId==id的子菜单,作为该父级菜单下的子菜单。这样就实现了展开状态下的菜单。
    注意:图标的问题,图标可以选择从后端返回class,这样做起来起来更简单,我这里是通过预设一个getIcon()函数在本地设置显示,由于图标和路由面临的是相同的实现,所以我会在路由跳转相关的地方详细解释一下,应该在何种场景下选择何种方式。

    再看ul:

       <ul class="el-menu collapsed" ref="menuCollapsed" v-else>
                        <li v-for="(item,index) in authMenu" v-if="item.parentPermissionCode==0" class="el-submenu item">
                            <template>
                                <div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="getIcon(item.permissionName)"></i></div>
                                <ul class="el-menu tipMenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"> 
                                    <li v-for="child in authMenu" :key="child.uri" v-if="item.permissionCode==child.parentPermissionCode" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.uri)"><i :class="getIcon(child.permissionName)"></i>&nbsp;&nbsp;&nbsp;{{child.permissionName}}</li>
                                </ul>
                            </template>
                        </li>
                    </ul>

    这根element-ui就没有关系了,简单的ul li 实现。(路由相关的可以展示忽略,我会在下一篇文章中详细描述)

    最后看:

    <div class="changeState" @click="collapsed=!collapsed">
                        <i v-if="collapsed" class="iconfont icon-zuoyou1"></i>
                        <i v-else class="iconfont icon-zuoyou"></i>
                    </div>    

    通过collapsed 在v-if v-else中绑定视图简单实现了,开关功能。

    写在最后
    这个功能看似简单却包含了vuejs的十几个知识点。难倒了很多人,我之所有写这篇文章,也是因为很多朋友,在此之前不断的询问我如何才能优雅的实现这个功能。当然了这只一个完整的后台管理的开始,我将会在后面的文章中继续讲解关于大家最关心的要不要使用addRoutes,如何使用addRoutes,不使用addRoutes的情况下如何使用路由拦截来有没的实现路由与权限的匹配,包括系统内部不同权限展示不同的操作界面的问题,当然了这是后话。如果有时间的话,我会把这个系列写完,知道朋友们能独立开发一个完整的vuejs的单页面后台管理程序。


    文中设计的代码我将会上传到讨论群中(478694438),不足之处优化共同探讨。

    展开全文
  • 饿了么Element 组件库Axure Components Element 是一套 Vue.js 后台组件库,它能够帮助你更轻松更快速地开发后台项目。
  • 我们在开发一些Vue项目的时候经常会引入Element这个组件库,简洁美观又好用。有时候我们自己会根据项目的需要自己写一些公共的组件(造轮子),有很多组件都会用到CSS的过渡、动画效果使得组件的展示更加美观、平滑...
  • 最近接触到elementUI的上传组件,一路顺畅,就是在上传之后总是发现有闪动的现象,博主对其进行深入研究后发现,其闪动原因,是因为使用的file-list并不会自动添加上传了的图片,而需要由我们来人工来添加,而添加则...
  • 使用过elementUI组件库中的Image组件基本都知道,其组件会自带一个图片预览功能,仅需要通过preview-src-list传入需要预览的图片url列表即可实现点击预览。 博主使用了此功能,进行数组的循环渲染,具体渲染代码如下...
  • 最近在用饿了么的el-upload组件时候,需要用到表单校验,但是遇到了一个问题,如图所示: (点击提交时候触发了表单校验提示:“请上传身份证正面照”,但是上传之后表单校验提示信息无法清除。) 解决办法如下...
  • vue项目中,组件是项目的基石,每个页面都是组件来组装起来,我司没有自己的组件库,选用的是ElementUI组件库,在它的基础上再次封装。在线预览地址 可编辑表格 由于是后台管理项目,各种单据漫天飞,而且单据列表要...
  • 饿了么 - 大数据部门很多产品都是基于 element-ui 开发的,但是不同产品间往往会有功能相似的组件
  • 目录 1.Element-UI介绍 2.Element-UI使用 2.1 命令行方式安装 2.2Vue-CLI工程改造 2.3 安装axios ...3.1 Dialog对话框组件 ...3.2 创建login.vue 组件 ...element-ui 是饿了么前端出品的基于 Vue...
  • Element 1.3.5 已发布,更新内容: ...修复 InputNumber 与其他表单组件同行显示时不能对齐的问题 修复行内 FormItem 对复合型 Input 失效的问题 修复 FormItem 在 Firefox 中的高度与其他浏览器不一致的问题 ...
  • Element 1.3.6 已发布,更新内容: ...Element 是由饿了么公司前端团队开源,是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。
  • Element 1.3.4 已发布,Element 是由饿了么公司前端团队开源,是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。 更新内容: 修复带展开行的 Table 在...
  • 在使用element ui的select组件时,我们想修改这个组件的背景色: 想修改成透明的: ...然后其它的组件也是一样的方法,想修改第三方组件库组件的样式,先用查看器查看该组件的结构,找到对应的类名
  • 仿饿了么官网制作可视化组件库,包含展示效果 / 属性 / 方法
  • 如果对sass不熟的朋友,建议看本博客之前先去看下sass教程,...子组件向父组件传参即可 < button @click = " handleClick " > jed < button > handleClick ( e ) { $emit ( "click" , e ) } ok完事

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 755
精华内容 302
关键字:

饿了么组件库