Skip to content

Instantly share code, notes, and snippets.

@yokotak0527
Last active May 26, 2019 12:06
Show Gist options
  • Save yokotak0527/a84dca7ac12016e47b3c3e3bd199f90b to your computer and use it in GitHub Desktop.
Save yokotak0527/a84dca7ac12016e47b3c3e3bd199f90b to your computer and use it in GitHub Desktop.
inputタグのradio,checkbox,text(etc.), submit,buttonをまとめたvueテンプレート
<template>
<div>
<v-radio v-if="type === 'radio'" />
<v-checkbox v-else-if="type === 'checkbox'" />
<v-button v-else-if="type === 'button' || type === 'submit'" />
<v-text v-else />
</div>
</template>
<script>
export default {
components : {
// -------------------------------------------------------------------------
// text
//
vText : {
functional : true,
render(h, ctx) {
const { parent } = ctx
return (
<div class="type-text">
{
h('input', {
attrs : {
type : parent.$props.type,
...parent.$attrs
},
domProps : {
value : parent.$props.modelValue
},
on : Object.assign({}, parent.$listeners, {
input(e) {
parent.$emit('modelEvent', e.target.value, e)
}
})
})
}
</div>
)
}
},
// -------------------------------------------------------------------------
// radio
//
vRadio : {
functional : true,
render(h, ctx) {
const { parent } = ctx
return (
<div class="type-radio">
{
h('input', {
attrs : {
type : 'radio',
...parent.$attrs
},
domProps : {
value : parent.$attrs.value
},
on : Object.assign({}, parent.$listeners, {
change(e) {
parent.$emit('modelEvent', e.target.value, e)
}
})
})
}
<i />
</div>
)
}
},
// -------------------------------------------------------------------------
// checkbox
//
vCheckbox : {
functional : true,
render(h, ctx) {
const { parent } = ctx
return (
<div class="type-checkbox">
{
h('input', {
attrs : {
type : 'checkbox',
checked : parent.$props.modelValue,
...parent.$attrs
},
on : Object.assign({}, parent.$listeners, {
change(e) {
parent.$emit('modelEvent', e.target.checked, e)
}
})
})
}
</div>
)
}
},
// -------------------------------------------------------------------------
// button
//
vButton : {
functional : true,
render(h, ctx) {
const { parent } = ctx
// console.log(ctx.parent)
return (
<div class="type-button">
{
h('input', {
attrs : {
type : parent.$props.type,
...parent.$attrs
},
on : Object.assign({}, parent.$listeners, {
})
})
}
</div>
)
}
}
},
inheritAttrs : false,
model : {
prop : 'modelValue',
event : 'modelEvent'
},
props : {
type : { type : String, required : true },
modelValue : { type : [String, Boolean, Number], required : false, default : '' }
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment