wangqing
4 years ago
17 changed files with 236 additions and 80 deletions
@ -0,0 +1,58 @@ |
|||||
|
<script> |
||||
|
import Emitter from 'element-ui/src/mixins/emitter' |
||||
|
|
||||
|
export default { |
||||
|
name: 'ImageSelect1', |
||||
|
|
||||
|
componentName: 'ImageSelect1', |
||||
|
|
||||
|
mixins: [Emitter], |
||||
|
|
||||
|
inject: { |
||||
|
elFormItem: { |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
props: { |
||||
|
value: {}, |
||||
|
options: Array, |
||||
|
disabled: Boolean, |
||||
|
min: Number, |
||||
|
max: Number, |
||||
|
size: String, |
||||
|
fill: String, |
||||
|
textColor: String |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
_elFormItemSize() { |
||||
|
return (this.elFormItem || {}).elFormItemSize |
||||
|
}, |
||||
|
checkboxGroupSize() { |
||||
|
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
value(value) { |
||||
|
this.dispatch('ElFormItem', 'el.form.change', [value]) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="el-checkbox-group" role="group" aria-label="checkbox-group"> |
||||
|
<div v-for="option in options" :key="option.value" class="img-radio-item"> |
||||
|
<el-image |
||||
|
class="image" |
||||
|
:src="option.image" |
||||
|
fit="scale-down" |
||||
|
:preview-src-list="[option.image]" |
||||
|
/> |
||||
|
<el-radio :label="option.value">{{ option.label }}</el-radio> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
@ -1,8 +1,10 @@ |
|||||
const ImageSelect = require('./ImageSelect/index').default |
const ImageSelect = require('./ImageSelect/index').default |
||||
|
const ImageSelect1 = require('./ImageSelect1/index').default |
||||
const DescText = require('./DescText/index').default |
const DescText = require('./DescText/index').default |
||||
export default { |
export default { |
||||
install: Vue => { |
install: Vue => { |
||||
Vue.component(ImageSelect.name, ImageSelect) |
Vue.component(ImageSelect.name, ImageSelect) |
||||
|
Vue.component(ImageSelect1.name, ImageSelect1) |
||||
Vue.component(DescText.name, DescText) |
Vue.component(DescText.name, DescText) |
||||
} |
} |
||||
} |
} |
||||
|
|||||
@ -0,0 +1,34 @@ |
|||||
|
const state = { |
||||
|
// 是否折叠
|
||||
|
isCollapse: false |
||||
|
} |
||||
|
|
||||
|
const getters = { |
||||
|
isCollapse: state => { |
||||
|
return state.isCollapse |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const actions = { |
||||
|
setIsCollapse(context, payload) { |
||||
|
return new Promise(resolve => { |
||||
|
// 模拟登录成功，写入 token 信息
|
||||
|
context.commit('setIsCollapse', payload) |
||||
|
resolve() |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const mutations = { |
||||
|
setIsCollapse(state, status) { |
||||
|
state.isCollapse = status |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
namespaced: true, |
||||
|
state, |
||||
|
actions, |
||||
|
getters, |
||||
|
mutations |
||||
|
} |
||||
Loading…
Reference in new issue