1234567891011121314151617181920212223242526272829303132333435363738 |
- <template>
- <div class="config-tab" :class="{'config-tab--active':isActive}" @click="emitClick">
- <slot></slot>
- </div>
- </template>
- <script>
- export default {
- props: {
- name: String,
- isActive: Boolean
- },
- emits: ['onClick'],
- setup (props, { emit }) {
- const emitClick = () => {
- emit('onClick', props.name)
- }
- return {
- emitClick
- }
- }
- }
- </script>
- <style lang="less">
- .config-tab{
- flex-grow: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- font-size: 14px;
- font-weight: 400;
- border-bottom: 3px solid transparent;
- &.config-tab--active{
- border-bottom-color: @primary;
- }
- }
- </style>
|