33 lines
1.4 KiB
Vue
33 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<button v-on:click="update('left')">
|
||
|
|
<svg class="inline border-gray-400 rounded-md" :class="{border: modelValue === 'left'}" height="40" viewBox="0 0 21 21" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 6.5h12"/><path d="m4.498 10.5h5.997"/><path d="m4.5 14.5h9.995"/></g></svg>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button v-on:click="update('center')">
|
||
|
|
<svg class="inline border-gray-400 rounded-md" :class="{border: modelValue === 'center'}" height="40" viewBox="0 0 21 21" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 6.5h12"/><path d="m7.498 10.5h5.997"/><path d="m5.5 14.5h9.995"/></g></svg>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button v-on:click="update('right')">
|
||
|
|
<svg class="inline border-gray-400 rounded-md" :class="{border: modelValue === 'right'}" height="40" viewBox="0 0 21 21" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 6.5h12"/><path d="m10.498 10.5h5.997"/><path d="m6.5 14.5h9.995"/></g></svg>
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
modelValue: {
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
type: String,
|
||
|
|
required: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
emits: ['update:modelValue'],
|
||
|
|
methods: {
|
||
|
|
update(value) {
|
||
|
|
this.$emit('update:modelValue', value)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|