前端学习(2275)vue造轮子之添加合并事件

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box
    }
    
     :root {
        --button-height: 32px;
        --font-size: 14px;
        --font-size: white;
        --border-radius: 4px;
        --button-active-bg: #eee;
        --color: #333;
        --border-color: #999;
        --border-color-hover: #666;
        --button-bg: white;
    }
    
    #app {
        margin: 2px;
    }
    
    body {
        font-size: var(--font-size)
    }
</style>
<style>

</style>

<body>
    <div id="app">
        <g-button :loading="loading1" @click="loading1=!loading1">按钮</g-button>
        <g-button icon="shezhi" :loading="loading2" @click="loading2=!loading2">按钮</g-button>
        <!--  <g-button><svg class="icon"><use xlink:href="#ishezhi"></use></svg>我爱js</g-button> -->
        <g-button icon="shezhi" icon-position="right" :loading="loading3" @click="loading3=!loading3">按钮</g-button>
    </div>

    <script src="../src/main.js"></script>
    <script src="//at.alicdn.com/t/font_2074513_yo1xmbzi3i.js"></script>

    <script>
    </script>
</body>

</html>

main.js

import Vue from '../node_modules/vue/dist/vue'
import Button from "./components/HelloWorld";
import Icon from "./components/Icon"
Vue.component('g-button', Button)
Vue.component('g-icon', Icon)
new Vue({
    el: '#app'
})

HelloWorld.vue

<template>
  <button class="g-button" :class="{[`icon-${iconPosition}`]:true}">

 <g-icon class="icon" v-if="icon" :name="icon"></g-icon>
  <g-icon class="loading" name="jiazai"></g-icon>
  <div class="content">
    <slot></slot></div>
  </button>

</template>
<script>
export  default {
props:{
  icon:[],
  iconPosition:{
    type:String,
    default:'left',
    validator(value){
      if(value!=='left'&&value!=='right'){
        return false
      }else{
        return true
      }
    }
  }
}
}
</script>
<style lang="scss">
@keyframes spin{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}
.g-button{
  font-size:var(--font-size);
  height:var(--button-height);
  padding: 0 1em;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  background: var(--button-bg);
  display:inline-flex;
  justify-content:center;
  align-items:center;
  vertical-align:middle;
&:hover{
  border-color:var(--border-color-hover);
}
&:active{
  background-color:var(--button-active-bg);
}
>.content{
  order:2
}
>.icon{
  order:1;
  margin-right:.3em;
}

 &.icon-right{
  >.icon{
    order:2;
  }
  >.content{
    order:1;
      margin-left:.3em;
      margin-right:0;
  }
  
}
.loading{
  animation:spin 1s infinite linear
} 
}

</style>

Icon.vue

<template>
<svg class="g-icon">
  <use :xlink:href="`#i${name}`"></use>
  </svg>
</template>
<script>
export  default{
    props:['name']
}
</script>
<style lang="scss">
 .g-icon {
        width: 1em;
        height: 1em;
    }
</style>

Button.vue

<template>
<div class="g-button-group">
<slot></slot>
</div>

</template>
<script>
export  default{
  
}
</script>
<style lang="scss">
 .g-button-group{
     display:inline-flex;
     vertical-align:middle;

 >.g-button{
     border-radius:0;
    margin-left:-1px;
 }
 &:first-child{
     boder-top-left-radius:var(--border-radius);
     border-bottom-left-radius:var(--border-radius)
 }
 &:last-child{
     boder-top-right-radius:var(--border-radius);
     border-bottom-right-radius:var(--border-radius)
 }
  }
</style>

 运行结果

 

©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页