zoukankan      html  css  js  c++  java
  • elementui 二次封装系列 button

    elementUI是一个vue.js的ui框架, 在做后台管理系统等方面非常出色,然而面对重复的后台管理系统,大量重复的代码, 这里我们将使用elemnt ui做二次封装,以扩展element ui的属性 来简化代码.

    本文以 el-button为例el-button是最简单的组件了,所有操作都需要用到它, 它仅对外提供click事件. 在平时工作中,我们经常遇到一个 重复点击的问题,点太快了接口没有返回会导致多次重复请求,这时我们会想到使用防抖或节流,或者使用el-buttonloading属性, 如果使用loading 属性, 通常 我们会在vuedata中定义一个loading变量,然后调用ajax之前将loading设置为true, ajax返回后将loading设置为false. 这是比较合理的办法,但是如果一个系统非常多这种情况, 那我们需要每一个页面都去定义一个loading变量,作为一个合格的程序员,我们当然想不要写这么多重复的代码,这时候就需要对el-button做二次封装了, 如下代码,我们封装一个pl-button组件

     
     
     

    https://juejin.cn/post/6916474993635229704

    如果要全部输入框都支持“不允许输入纯空格”,就将它封装成全局组件,看似完美,但是你会发现,el-input组件除了可以进行值的双向绑定,它还支持size、readonly、disabled...等18个属性,7个事件,于是接着写一大堆“中间代码”来继承原有el-input的各种属性、事件。
    <template>
      <el-input v-bind="$attrs" v-on="$listeners" @change="handleChange"></el-input>
    </template>
    
    <script>
      export default {
        methods: {
          handleChange(value) {
            if (Object.prototype.toString.call(value) === '[object String]' && value.trim() === '') {
              this.$emit('input', '')
            }
          }
        }
      }
    </script>

    https://www.jianshu.com/p/1cecb13add26

  • 相关阅读:
    LoadRunner系统资源监视
    Loadrunner web_url函数学习(转贴)
    Chrome的开发者工具(Chrome Developer Tools)
    浏览器对同一域名进行请求的最大并发连接数(转贴)
    转贴---Performance Counter(包含最全的Windows计数器解释)
    去掉html代码中多余琐碎的标签
    你永远不知道什么地方有笔误
    office2016开发者选项在哪?
    [VBA]检测一个中文字符串是否包含在另一个字符串中
    电子发票怎么开
  • 原文地址:https://www.cnblogs.com/porter/p/15795180.html
Copyright © 2011-2022 走看看