前端学习案例-手动封装element-ui里面的button组件

首先我们知道vue里面包含有父子组件

但是你知道如果要进行一个element的手动组件封装

怎么封装吗

1首先第一步

首先我们建立一个组件

最好设置在一个文件目录下比如components

只是一个普通的组件

叫做OneButton.vue

        <template>
          <button class="one-button">
           按钮组件
          </button>
        </template>
         
        <script>
         
        export default {
          name: 'oneButton'
        }
    </script>
         
        <style lang="scss">
    </style>

要想使用该组件

就需要进行全局注册

就是在main.js里面注册了

     import Vue from 'vue'
        import App from './App.vue'
        // 第一步：导入button组件
        import OneButton from './components/button.vue'
         
        Vue.config.productionTip = false
         
        // 第二步：注册组件,设置(组件名，组件)
        Vue.component(OneButton.name, OneButton)
         
        new Vue({
          render: h => h(App)
        }).$mount('#app')

注册完成以后就可以进行使用了

    <template>
      <div id="app">
        <one-button>按钮</one-button>
     
      </div>
    </template>
     
    <script>
    export default {
      name: 'App',
      components: {}
    }
    </script>
     
    <style lang="scss">
    </style>

到这里

我们可以看到 就会显示一个普通按钮了

但是吧 这样的封装过于简单

能不能实现更加复杂的操作呢

于是

我们需要封装一个有element-ui风格的组件

好 那我们继续实现

我们先让文字可以自由的输入

那就要利用插槽了

     <template>
          <button class="one-button">
           <span><slot></slot></span>
          </button>
        </template>

我们的文件需要做以上处理

     <template>
          <div>
            <one-button>歌谣</one-button>
            <one-button>帅气</one-button>
            <one-button>关注我</one-button>
          </div>
        </template>

加上基本样式

     <style lang="scss">
          .one-button{
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            background: #ffffff;
            border: 1px solid #dcdfe6;
            color: #606266;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            margin: 0;
            transition: 0.1s;
            font-weight: 500;
            //禁止元素的文字被选中
            -moz-user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
            &:hover,
            &:hover{
              color: #409eff;
              border-color: #c6e2ff;
              background-color: #ecf5ff;
            }
          }
        </style>

这样文字的效果就实现了

到了这里 你又想element里面可以控制type属性控制按钮样式

怎么可以实现呢

父元素传递type值

        <template>
          <div id="app">
            <div class="row">
            <one-button>按钮</one-button>
            <one-button type="primary">primary按钮</one-button>
            <one-button type="success">success按钮</one-button>
            <one-button type="info">info按钮</one-button>
            <one-button type="danger">danger按钮</one-button>
            <one-button type="warning">warning按钮</one-button>
            </div>
          </div>
        </template>

子元素接收当然props了

     export default {
          name: 'oneButton',
          // 此时对props进行校验，值接收string类型的type值
          props: {
            type:{
              type: String，
              // 设置默认值：如果不传值，那么使用default
              default: 'default'
            }
          },
          created () {
            console.log(this.type)//defalut primary success info danger warning
          }
        }

做过处理以后根据type就可以实现数据的操作了

动态绑定样式

      <template>
          <button class="one-button" :class="`one-button-${type}`">
           <span><slot></slot></span>
          </button>
        </template>

最后定义好样式

      .one-button-primary{
          color:#fff;
          background-color: #409eff;
          border-color: #409eff;
          &:hover,
          &:focus{
            background: #66b1ff;
            background-color: #66b1ff;
            color: #fff;
            }
          }
          .one-button-success{
          color:#fff;
          background-color: #67c23a;
          border-color: #67c23a;
          &:hover,
          &:focus{
            background: #85ce61;
            background-color: #85ce61;
            color: #fff;
            }
          }
          .one-button-info{
          color:#fff;
          background-color: #909399;
          border-color: #909399;
          &:hover,
          &:focus{
            background: #a6a9ad;
            background-color: #a6a9ad;
            color: #fff;
            }
          }
          .one-button-warning{
          color:#fff;
          background-color: #e6a23c;
          border-color: #e6a23c;
          &:hover,
          &:focus{
            background: #ebb563;
            background-color: #ebb563;
            color: #fff;
            }
          }
          .one-button-danger{
          color:#fff;
          background-color: #f56c6c;
          border-color: #f56c6c;
          &:hover,
          &:focus{
            background: #f78989;
            background-color: #f78989;
            color: #fff;
            }
          }

运行

nice呀 有没有

这个时候你可能会想

如果设置plain属性怎么设置呢

和type类型相同，我们只要将样式先设置好，然后通过父组件传递过来的值进行判断，就可以设置plain属性了。

    和type类型相同，我们只要将样式先设置好，然后通过父组件传递过来的值进行判断，就可以设置plain属性了。
     
    第一步:父组件组件传递plain值
     
        <template>
          <div id="app">
            <div class="row">
            <one-button plain>按钮</one-button>
            <one-button plain type="primary">primary按钮</one-button>
            <one-button plain type="success">success按钮</one-button>
            <one-button plain type="info">info按钮</one-button>
            <one-button plain type="danger">danger按钮</one-button>
            <one-button plain type="warning">warning按钮</one-button>
            </div>
          </div>
        </template>
     
    第二步：子组件接收负组件传递的数据，同样进行props校验，并且设置默认值为false
     
          props: {
            plain: {
              type: Boolean,
              default: false
            }
          }
     
    第三步:通过绑定类名的方法动态控制样式，由于plain类型是布尔值，所以在类型中我们使用对象的形式来控制样式
     
        <template>
          <button class="one-button" :class="[`one-button-${type}`,{
            'is-plain':plain
          }]">
           <span><slot></slot></span>
          </button>
        </template>
     
    第四步：设置不同类型的样式，由于plain类型是以对象的形式在类中定义的，所以使用获取属性的方法定义样式
     
        // 朴素按钮样式
        .one-button.is-plain{
          &:hover,
          &:focus{
            background: #fff;
            border-color: #489eff;
            color: #409eff;
          }
        }
        .one-button-primary.is-plain{
          color: #409eff;
          background: #ecf5ff;
          &:hover,
          &:focus{
            background: #409eff;
            border-color: #409eff;
            color: #fff;
          }
        }
        .one-button-success.is-plain{
          color: #67c23a;
          background: #c2e7b0;
          &:hover,
          &:focus{
            background: #67c23a;
            border-color: #67c23a;
            color: #fff;
          }
        }
        .one-button-info.is-plain{
          color: #909399;
          background: #d3d4d6;
          &:hover,
          &:focus{
            background: #909399;
            border-color: #909399;
            color: #fff;
          }
        }
        .one-button-warning.is-plain{
          color: #e6a23c;
          background: #f5dab1;
          &:hover,
          &:focus{
            background: #e6a23c;
            border-color: #e6a23c;
            color: #fff;
          }
        }
        .one-button-danger.is-plain{
          color: #f56c6c;
          background: #fbc4c4;
          &:hover,
          &:focus{
            background: #f56c6c;
            border-color: #f56c6c;
            color: #fff;
          }
        }

nice呀 有没有

round属性也是一样

    button组件的round属性
     
    设置round属性和之前的相似，只要在组件中定义好了样式，动态获取属性值即可。
     
    获取属性值：
     
            round: {
              type: Boolean,
              default: false
            }
     
    round样式：
     
        .one-button.is-round{
          border-radius: 20px;
          padding: 12px 23px;
        }

看看效果

nice有没有

到这里

我们看看字体图标怎么实现

字体图标也是要引入的

    第一步：在main.js中引入字体图标
     
    import './assets/fonts/iconfont.css'
     
    第二步：将下载的字体图标css文件中的类名做修改，我将icon全部改为了one-icon，并且将初始的iconfont类改为了[class*='one-icon']，当类名中有one-icon时使用，如下
     
        [class*='one-icon'] {
          font-family: "iconfont" !important;
          font-size: 16px;
          font-style: normal;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        .one-icon-bluetoothoff:before {
          content: "\e697";
        }
     
    第三步：父组件传递图标名，子组件接收并且放到图标中
     
    父组件传值：
     
            <div class="row">
              <one-button icon="bluetoothon"></one-button>
              <one-button type="primary" icon="camera">照相机</one-button>
              <one-button type="success" icon="course"></one-button>
              <one-button type="info" icon="bluetooth_link"></one-button>
              <one-button type="danger" icon="addto"></one-button>
              <one-button type="warning" icon="audio"></one-button>
            </div>
     
    子组件接收：
     
            icon: {
              type: String,
              default: ''
            }
     
    使用接收到的字体图标。在没有传入icon时隐藏<i>标签，在slot插槽没有传入值时，不显示<span>标签
     
        <template>
          <button class="one-button" :class="[`one-button-${type}`,{
            'is-plain':plain,
            'is-round':round,
            'is-circle':circle,
          }]">
          <i v-if="icon" :class="`one-icon-${icon}`"></i>
          <!-- 如果没传入文本插槽，则不显示span内容 -->
           <span v-if="$slots.default"><slot></slot></span>
          </button>
        </template>
     
    第四步：设置icon配套样式，使图标和文字之间有一定间隔
     
        .one-button [class*=one-icon-]+span{
          margin-left: 5px;
        }
     

查看效果

nice有没有

到这里

我们想一想element里面还有点击事件怎么实现

    button组件中的点击事件
     
    我们在使用组件时，直接给组件定义事件是不会被触发的。我们需要在组件中定义一个点击事件，这个点击事件不进行其他操作，只出发父组件中的点击事件。
     
    组件中的定义点击事件：
     
        <template>
          <button class="one-button" :class="[`one-button-${type}`,{
            'is-plain':plain,
            'is-round':round,
            'is-circle':circle,
          }]"
          @click="handleClick"
          >
          <i v-if="icon" :class="`one-icon-${icon}`"></i>
          <!-- 如果没传入文本插槽，则不显示span内容 -->
           <span v-if="$slots.default"><slot></slot></span>
          </button>
        </template>
     
     定义一个点击事件，这个点击事件的作用是调用父组件中的点击事件，并且回调
     
          methods: {
            handleClick (e) {
              this.$emit('click', e)
            }
          }
     
    父组件在使用时定义自己的点击事件，其本质是子组件中的点击事件触发父组件中的点击事件。
     
        <div class="row">
          <one-button @click="getInfo">按钮</one-button>
        </div>
     
          methods: {
            getInfo () {
              console.log('获取信息！！')//获取信息！！
            }
          }

就很nice

按钮中会设置是否禁用

我们可以通过父子传值

给子组件设置样式实现

    button组件中的disabled属性
     
    和之前相似，只要父子组件传值并且动态获取这个值并且赋给disabled属性,并且设置一个disabled样式即可。
     
        <div class="row">
          <one-button @click="getInfo" disabled>按钮</one-button>
        </div>
     
        <template>
          <button class="one-button" :class="[`one-button-${type}`,{
            'is-plain':plain,
            'is-round':round,
            'is-circle':circle,
            'is-disabled':disabled
          }]"
          @click="handleClick"
          :disabled="disabled"
          >
          <i v-if="icon" :class="`one-icon-${icon}`"></i>
           <span v-if="$slots.default"><slot></slot></span>
          </button>
        </template>
     
            disabled: {
              type: Boolean,
              default: false
            }
     
     disabled样式：
     
        .one-button.is-disabled{
           cursor: no-drop;
        }

至此 element中的button组件就封装完成了 是不是很nice

下次有时间继续封转其他的

看看封装的总代码

    <template>
      <button class="one-button" :class="[`one-button-${type}`,{
        'is-plain':plain,
        'is-round':round,
        'is-circle':circle,
        'is-disabled':disabled
      }]"
      @click="handleClick"
      :disabled="disabled"
      >
      <i v-if="icon" :class="`one-icon-${icon}`"></i>
      <!-- 如果没传入文本插槽，则不显示span内容 -->
       <span v-if="$slots.default"><slot></slot></span>
      </button>
    </template>
     
    <script>
     
    export default {
      name: 'oneButton',
      // 此时对props进行校验，值接收string类型的type值
      props: {
        type: {
          type: String,
          // 设置默认值：如果不传值，那么使用default
          default: 'defalut'
        },
        plain: {
          type: Boolean,
          default: false
        },
        round: {
          type: Boolean,
          default: false
        },
        circle: {
          type: Boolean,
          default: false
        },
        icon: {
          type: String,
          default: ''
        },
        disabled: {
          type: Boolean,
          default: false
        }
      },
      created () {
        // 显示所有插槽
        // console.log(this.$slots)
      },
      methods: {
        // 定义一个点击事件，这个点击事件的作用是调用父组件中的点击事件，并且回调
        handleClick (e) {
          this.$emit('click', e)
        }
      }
    }
    </script>
     
    <style lang="scss" scoped>
      .one-button{
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #ffffff;
        border: 1px solid #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: 0.1s;
        font-weight: 500;
        //禁止元素的文字被选中
        -moz-user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
        &:hover,
        &:focus{
          color: #409eff;
          border-color: #c6e2ff;
          background-color: #ecf5ff;
        }
      }
    .one-button-primary{
      color:#fff;
      background-color: #409eff;
      border-color: #409eff;
      &:hover,
      &:focus{
        background: #66b1ff;
        background-color: #66b1ff;
        color: #fff;
        }
      }
      .one-button-success{
      color:#fff;
      background-color: #67c23a;
      border-color: #67c23a;
      &:hover,
      &:focus{
        background: #85ce61;
        background-color: #85ce61;
        color: #fff;
        }
      }
      .one-button-info{
      color:#fff;
      background-color: #909399;
      border-color: #909399;
      &:hover,
      &:focus{
        background: #a6a9ad;
        background-color: #a6a9ad;
        color: #fff;
        }
      }
      .one-button-warning{
      color:#fff;
      background-color: #e6a23c;
      border-color: #e6a23c;
      &:hover,
      &:focus{
        background: #ebb563;
        background-color: #ebb563;
        color: #fff;
        }
      }
      .one-button-danger{
      color:#fff;
      background-color: #f56c6c;
      border-color: #f56c6c;
      &:hover,
      &:focus{
        background: #f78989;
        background-color: #f78989;
        color: #fff;
        }
      }
    // 朴素按钮样式
    .one-button.is-plain{
      &:hover,
      &:focus{
        background: #fff;
        border-color: #489eff;
        color: #409eff;
      }
    }
    .one-button-primary.is-plain{
      color: #409eff;
      background: #ecf5ff;
      &:hover,
      &:focus{
        background: #409eff;
        border-color: #409eff;
        color: #fff;
      }
    }
    .one-button-success.is-plain{
      color: #67c23a;
      background: #c2e7b0;
      &:hover,
      &:focus{
        background: #67c23a;
        border-color: #67c23a;
        color: #fff;
      }
    }
    .one-button-info.is-plain{
      color: #909399;
      background: #d3d4d6;
      &:hover,
      &:focus{
        background: #909399;
        border-color: #909399;
        color: #fff;
      }
    }
    .one-button-warning.is-plain{
      color: #e6a23c;
      background: #f5dab1;
      &:hover,
      &:focus{
        background: #e6a23c;
        border-color: #e6a23c;
        color: #fff;
      }
    }
    .one-button-danger.is-plain{
      color: #f56c6c;
      background: #fbc4c4;
      &:hover,
      &:focus{
        background: #f56c6c;
        border-color: #f56c6c;
        color: #fff;
      }
    }
    // round属性
    .one-button.is-round{
      border-radius: 20px;
      padding: 12px 23px;
    }
    // circle属性
    .one-button.is-circle{
      border-radius: 50%;
      padding: 12px;
    }
    // icon配套样式
    .one-button [class*=one-icon-]+span{
      margin-left: 5px;
    }
    // disabled属性
    .one-button.is-disabled{
       cursor: no-drop;
    }
    </style>