设计模式在vue中的应用

外观模式、工厂模式在vue中应用

formCom文件

<template>
    <div>
        <form>
            <login
                v-for='item of comInp'
                :name = 'item'
                :key='item'
            ></login>
        </form>
    </div>
</template>
<script>
import login from './login';
const inputList = {
    login: ['Username', 'Password', 'ImgCode'],
    mobile: ['mobile', 'Password']
}
export default {
    name: 'Form',
    data() {
        return {
            type: 'login'
        }
    },
    components: {
        login
    },
    computed: {
        comInp(){
            console.log(inputList)
            return inputList[this.type]
        }
    },
    
}
</script>

login文件

<template>
    <component :is='comInput' />
</template>
<script>
import Username from './input/Username'
import Password from './input/Password'
import ImgCode from './input/ImgCode'
import Mobile from './input/mobile'

const inpMap = {
    Username,
    Password,
    ImgCode,
    Mobile
}
export default {
    name: 'login',
    data() {
        return {
            codeStatus: 'img'
        }
    },
    components: inpMap,
    props: ['name'],
    computed: {
        comInput(){
            return inpMap[this.name]
        }
    },
}
</script>
<style scope>
    
</style>

状态模式在vue中应用

stepHome文件

<template>
    <div>
        <div>
            <div>步骤一<span>{{state > 1 && '完成' || '未完成'}}</span></div>
            <div>步骤二<span>{{state > 2 && '完成' || '未完成'}}</span></div>
            <div>步骤三<span>{{state > 3 && '完成' || '未完成'}}</span></div>
            <div>步骤四<span>{{state > 4 && '完成' || '未完成'}}</span></div>
        </div>
        <button v-if="canGoBack" @click="goBack">返回上一步</button>
        <component :is="stepName"  @getChildData = 'changeState' />
    
    </div>
    

</template>

<script>
import step1 from './step/step1'
import step2 from './step/step2'
import step3 from './step/step3'
import step4 from './step/step4'
export default {
    name: 'stepHome',
    data() {
        return {
            state: 1,
            cache: []
        }
    },
    computed: {
        stepName(){
            const stepList = {
                1: step1,
                2: step2,
                3: step3,
                4: step4,
            }
            return stepList[this.state]
        },
        canGoBack(){
            return this.cache.length > 0
        }
    },
    methods: {
        changeState(state){
            this.cache.push(state)
            this.$set(this, 'state', state)
        },
        goBack(){
            this.cache.pop()
            this.state = this.cache[this.cache.length - 1]
        }
    }, 
}
</script>

<style>
    span{
        margin-left: 10px;
        color: red;
    }
</style>

step1文件

<template>
    <div>
        <button @click='finshOne'>点击完成步骤一</button>
    </div>
</template>
<script>
export default {
    methods: {
        finshOne(){
            this.$emit('getChildData', 2)
        }
    },
}
</script>

step2文件

<template>
    <div>
        <button @click='finshOne'>点击完成步骤二</button>
    </div>
</template>
<script>
export default {
    methods: {
        finshOne(){
            this.$emit('getChildData', 3)
        }
    },
}
</script>

step3文件

<template>
    <div>
        <button @click='finshOne'>点击完成步骤三</button>
    </div>
</template>
<script>
export default {
    methods: {
        finshOne(){
            this.$emit('getChildData', 4)
        }
    },
}
</script>

step4文件

<template>
    <div>
        <button @click='finshOne'>点击完成步骤四</button>
    </div>
</template>
<script>
export default {
    methods: {
        finshOne(){
            this.$emit('getChildData', 5)
        }
    },
}
</script>