0

У меня есть три блока , как сделать так , чтобы можно было переключаться между ними, первый блок , в котором есть кнопка продать, при нажатии на нее , будет отображаться следующий блок: "Вы уверены что хотите продать?" и затем две кнопки: "Да" и "Нет" , если да , то перейдет к третьему блоку, если нет , то к первому ?

const app = new Vue({
   el: '#app',
   data() {
      return {
 
      }
   },
   methods: {

   },
});
 
body {
   background: blue;
}

.sell__right-up {
  width: 361px;
  height: 40px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 25px;
  display: flex;
}
 .sell__right-up-block {
  width: 18.7963vh;
  height: 5vh;
  margin-top: 1.11111vh;
  margin-left: 1.66667vh;
}

.sell__right-up-title {
  font-style: normal;
  font-weight: 600;
  font-size: 1.85185vh;
  line-height: 1.66667vh;
  display: flex;
  align-items: center;
  letter-spacing: -0.06em;
  color: #FFFFFF;
}

 .sell__right-up-subtitle {
  font-style: normal;
  font-weight: 600;
  font-size: 2.96296vh;
  line-height: 3.61111vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  letter-spacing: -0.07em;
  color: #FFFFFF;
}

 .sell__right-up-btn {
  width: 9.25926vh;
  height: 4.44444vh;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 1.48148vh;
  margin-top: 1.38889vh;
  margin-left: 0.92593vh;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-size: 1.66667vh;
  line-height: 1.48148vh;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}

 .sell__right-up-btn:hover {
  -webkit-transition: .7s;
  transition: .7s;
  background: linear-gradient(135deg, rgba(189, 255, 0, 0.5) 0%, rgba(3, 149, 0, 0.5) 100%);
}

.sell__right-offer {
  width: 31.85185vh;
  height: 7.22222vh;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2.22222vh;
  display: flex;
          flex-direction: column;
          align-items: center;
  text-align: center;
          justify-content: center;
}
.sell__right-title-offer {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-size: 2.22222vh;
  line-height: 2.03704vh;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}
.sell__right-offer-btn {
  margin-top: 0.74074vh;
}

 .sell__right-offer-btone {
  width: 13.88889vh;
  height: 2.77778vh;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2.31481vh;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-size: 1.66667vh;
  line-height: 1.48148vh;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  margin-right: 0.92593vh;
}

.sell__right-offer-btone:hover {
  background: rgba(255, 255, 255, 0.3);
}
.sell__right-offer-bttwo {
  width: 6.48148vh;
  height: 2.77778vh;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2.31481vh;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-size: 1.66667vh;
  line-height: 1.48148vh;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}
.sell__right-offer-bttwo:hover {
  background: rgba(255, 255, 255, 0.3);
}
.sell__right-sold {
  width: 31.85185vh;
  height: 7.22222vh;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2.22222vh;
  display: flex;
          flex-direction: column;
          align-items: center;
  text-align: center;
          justify-content: center;
}
 .sell__right-title-sold {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-size: 2.59259vh;
  line-height: 2.31481vh;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="sell__right-up" v-if="true">
      <div class="sell__right-up-block">
           <div class="sell__right-up-title">Продать за:</div>
           <div class="sell__right-up-subtitle">1000</div>
      </div>
      <button class="sell__right-up-btn">Продать</button>
 </div>
 <div class="sell__right-offer" v-if="true">
      <div class="sell__right-title-offer">Вы уверены?</div>
           <div class="sell__right-offer-btn">
                <button class="sell__right-offer-btone">Да</button>
                <button class="sell__right-offer-bttwo">Нет</button>
           </div>
 </div>
 <div class="sell__right-sold" v-if="true">
      <div class="sell__right-title-sold">Продано</div>                          </div>
  </div>

1 ответ 1

1
  1. оберните каждый блок в Transition(https://vuejs.org/guide/built-ins/transition.html) для плавной анимации
  2. настройте методы(https://v3.ru.vuejs.org/ru/guide/data-methods.html), например для первого шага к кнопке продолжить добавьте метод @click(secondStep()) и через v-if можете скрывать или показывать блоки, так же есть v-show. И не v-if="true", а например v-if="secondStep", а в методе будет this.secondStep = true (но перед этим в data() {return {secondStep: false,}})
  3. и так далее для каждого шага
1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.