Staying safe and staying productive at home with some coding!
I've been working on creating a customized component for personal use that is essentially integrating the functionalities of the UI Kit framework when it comes to buttons.
Here's the code snippet:
BaseButton.vue
<template>
<button v-if="!modal" :class="start + bType + bSize + displayBlock" :disabled="disable">
<span v-show="icon !== ''" :uk-icon="'icon: ' + icon"></span> <slot></slot>
</button>
<a v-else :class="start + bType + bSize + displayBlock" :disabled="disable" href="#base-modal" uk-toggle>
<span v-show="icon !== ''" :uk-icon="'icon: ' + icon"></span> <slot></slot>
</a>
</template>
<script>
export default {
props: {
type: {
type: String,
default: "",
},
size: {
type: String,
default: "",
},
icon: {
type: String,
default: "",
},
disable: {
type: Boolean,
default: false,
},
block: {
type: Boolean,
default: false,
},
modal: {
type: Boolean,
default: false,
},
},
data() {
return {
start: "uk-button",
displayBlock: this.block === true ? " uk-width-1-1" : "",
bType:
this.type === "" ? " uk-button-default " : " uk-button-" + this.type,
bSize: this.size === "" ? "" : " uk-button-" + this.size,
};
},
};
</script>
App.vue
<tg-btn :block="true" :type="'primary'" :size="'large'" :icon="'cog'">Test button</tg-btn>Currently, I can only pass string props by using double quotes and then single quotes around the string. This method is not very time-efficient for me, so I am looking for a solution to simplify this process. Specifically, I would like to address the following questions:
- Is there a way to pass strings without having to use double quotes twice, like this:
<tg-btn :block="true" :type="primary" :size="large" :icon="cog">Test button</tg-btn>- Additionally, is there a way to achieve something like the following example? If so, what technology should I explore:
<tg-btn block large primary icon="trash">Test button</tg-btn>Thank you for your assistance! Stay safe and happy coding!
Best regards, T.