Вынес таб в компонент

master
Sipachev Igor 3 years ago
parent 6b45516d94
commit ea4fcae1b9
  1. 4
      popup/src/components/mocks-tab/main.vue
  2. 14
      popup/src/components/mocks-tab/script.ts
  3. 65
      popup/src/components/mocks-tab/style.scss
  4. 10
      popup/src/components/mocks-tab/template.html
  5. 2
      popup/src/components/person-tab/template.html
  6. 4
      popup/src/components/script.ts
  7. 9
      popup/src/components/template.html

@ -0,0 +1,4 @@
<template src="./template.html"></template>
<script lang="ts" src="./script.ts"></script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" src="./style.scss"></style>

@ -0,0 +1,14 @@
import { Component, Vue } from 'vue-property-decorator'
import VueClipboard from 'vue-clipboard2'
import Mocks from '@/components/mocks/main.vue'
Vue.use(VueClipboard)
@Component({
components: {
Mocks
}
})
export default class MocksTab extends Vue {
personalId = ''
}

@ -0,0 +1,65 @@
.container {
max-width: 400px;
min-width: 400px;
border: solid 2px gray;
.wrapper {
padding: 10px;
.tab-panel {
display: flex;
&__item {
flex-grow: 1;
padding: 5px;
cursor: pointer;
border-bottom: solid 2px #cae5fa;
&_active {
border-bottom: solid 2px #298df8;
}
&:hover {
border-bottom: solid 2px #298df8;
}
}
}
.tab-page {
padding-top: 10px;
&__item {
display: none;
&_show {
display: block;
}
.form-row {
display: flex;
margin-bottom: 5px;
&__item {
flex-grow: 1;
margin-right: 10px;
&-input {
width: 100%;
}
}
&:last-child {
margin-bottom: 0;
}
}
}
}
.memory-panel {
text-align: left;
padding: 5px;
margin-top: 10px;
}
}
}

@ -0,0 +1,10 @@
<div>
<label>
Personal id
<input type="text" v-model="personalId"/>
</label>
<div v-if="personalId">
<hr />
<Mocks :personalId="personalId"></Mocks>
</div>
</div>

@ -1,4 +1,4 @@
<div class="tab-page__item tab-page__item_show"> <div>
<div class="form-row"> <div class="form-row">
<div class="form-row__item"> <div class="form-row__item">
<input title="Day" class="form-row__item-input" type="text" v-model="person.birthday.day" placeholder="Day"> <input title="Day" class="form-row__item-input" type="text" v-model="person.birthday.day" placeholder="Day">

@ -7,13 +7,15 @@ import { Action } from '@/classes/Enum/Action'
import notificationCleaner from '@/classes/Service/NotificationCleaner' import notificationCleaner from '@/classes/Service/NotificationCleaner'
import Mocks from '@/components/mocks/main.vue' import Mocks from '@/components/mocks/main.vue'
import PersonTab from '@/components/person-tab/main.vue' import PersonTab from '@/components/person-tab/main.vue'
import MocksTab from '@/components/mocks-tab/main.vue'
Vue.use(VueClipboard) Vue.use(VueClipboard)
@Component({ @Component({
components: { components: {
Mocks, Mocks,
PersonTab PersonTab,
MocksTab
} }
}) })
export default class HelloWorld extends Vue { export default class HelloWorld extends Vue {

@ -16,14 +16,7 @@
<PersonTab/> <PersonTab/>
</div> </div>
<div class="tab-page__item" :class="{'tab-page__item_show': tab === 'mocks'}"> <div class="tab-page__item" :class="{'tab-page__item_show': tab === 'mocks'}">
<label> <MocksTab/>
Personal id
<input type="text" v-model="personalId"/>
</label>
<div v-if="personalId">
<hr />
<Mocks :personalId="personalId"></Mocks>
</div>
</div> </div>
<div class="tab-page__item" :class="{'tab-page__item_show': tab === 'ember'}"> <div class="tab-page__item" :class="{'tab-page__item_show': tab === 'ember'}">
<div class="form-row"> <div class="form-row">

Loading…
Cancel
Save