2.vue造轮子-icon

前言

前面的button做的差不多，但是现在要做一个效果就是 点击按钮会出现 loading 这个icon 再点击就消失

image.png

到这一步如何做？

icon

发现重新使用了好多 icon，那么就做一个icon的组件

<template>
    <svg class="g-icon" aria-hidden="true">
        <use :xlink:href="`#i-${name}`"></use>
    </svg>
</template>

<script>
    export default {
        props: ['name']
    }
</script>

<style lang="scss">
    .g-icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

其中 props 接收参数名，替换 template中的 name

将button.vue中的原来的写法替换下

image.png

<template>
    <button class="g-button" :class="{[`icon-${iconPosition}`]:true}">
        <g-icon class="icon" v-if="icon " :name="icon"></g-icon>
        <div class="content">
            <slot/>
        </div>
    </button>
</template>

添加loading

<template>
    <button class="g-button" :class="{[`icon-${iconPosition}`]:true}" @click="$emit('click')">
        <g-icon class="icon" v-if="icon" :name="icon"></g-icon>
        <g-icon class="loadding" name="loading"></g-icon>
        <div class="content">
            <slot/>
        </div>
    </button>
</template>

<style>
 @keyframes spin {
    0%{transform: rotate(0deg)}
    100%{transform: rotate(360deg)}
}
.loadding{
    animation:spin 1s infinite linear;
 }
</style>

上面代码中下方的css是 添加动画效果

image.png

处理细节

当loading 出现的时候 其他的就不要出现

<template>
    <button class="g-button" :class="{[`icon-${iconPosition}`]:true}" @click="$emit('click')">
        <g-icon class="icon" v-if="icon && !loading " :name="icon"></g-icon>
        <g-icon class="loadding icon" v-if="loading" name="loading"></g-icon>
        <div class="content">
            <slot/>
        </div>
    </button>
</template>

<script>
    export default {
        // props: ['icon', 'iconPosition']
        // iconPosition : left right
        props: {
            icon:{},
            loading:{
              type:Boolean,
              default: false
            },
            iconPosition:{
                type:String,
                default:'left',
                validator(value){
                    return value === 'left' || value === 'right';
                }
            }
        }
    }
</script>

接收父组件传来的值

<div id="app">
    <g-button :loading="true">按钮</g-button>
</div>

点击事件

当点击按钮的时候 出现loading 再点击就消失

image.png image.png

index.html

<div id="app">
    <g-button :loading="loading1" @click="loading1 = !loading1">按钮</g-button>
    <g-button icon="setting" icon-position="left" :loading="loading2" @click="loading2 = !loading2">按钮</g-button>
    <g-button icon="setting" icon-position="right" :loading="loading3" @click="loading3 = !loading3">按钮</g-button>
</div>

其中loading1就是app.js中设置的值

import Vue from 'vue'
import  Button from './button'
import  Icon from './icon'

Vue.component('g-button',Button);
Vue.component('g-icon',Icon);

new Vue({
    el: "#app",
    data:{
        loading1:false,
        loading2:true,
        loading3:false
    }
});

button.vue

<template>
    <button class="g-button" :class="{[`icon-${iconPosition}`]:true}" @click="$emit('click')">
        <g-icon class="icon" v-if="icon && !loading " :name="icon"></g-icon>
        <g-icon class="loadding icon" v-if="loading" name="loading"></g-icon>
        <div class="content">
            <slot/>
        </div>
    </button>
</template>