外观模式、工厂模式在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>
