Vue.jsでスクロール、モーダルウインドウを使う場合

11053 ワード
Vue.js スクロール モーダル スクロール テキストリンク

スクロールを使用する場合以下をコピペ

scroll.vue
<template>
  <button class="btn-primary" @click="scrollToAnchorPoint('scroll')">
    このボタンを押下すると
  </button>
  <div ref="scroll">
    ここに遷移する
  </div>
</template>
<script>
export default {
  name: 'App',
  methods: {
        scrollToAnchorPoint(refName) {
            const el = this.$refs[refName]
            el.scrollIntoView({ behavior: 'smooth'})
        }
    }
}
</script>

モーダルウインドウを使用する場合以下をコピペ

Modal.vue
<template>
  <div>
        <button 
          class="link"
          @click="openModal(num)"
        >モーダルボタン</button>
    <div 
      class="modal-overlay"
      v-show="modalContent"
    >
      <div class="modal-content">
        <p>qqqqqq</p>
        <div class="modal-content-adjust">
        <div class="modal-text-area">
          <div class="modal-text-left">
            ZZZZ
          </div>
          <div class="modal-text-right">
            XXXXX<br>
            XXXXX<br>
            XXXXXXXX
            <br>
          </div>
        </div>
        </div>
        <br>
        <button 
          @click="closeModal"
        >閉じる</button>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      modalContent:false,
    }
  },
  methods:{
    openModal:function(){
      this.modalContent = true;
    },
    closeModal:function(){
      this.modalContent = false;
    }
  }
}
</script>

<style>
.modal-overlay{
  z-index:1;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content{
  z-index:2;
  width:80%;
  padding: 1em;
  background:#fff;
  overflow-y:auto;
  max-height:80vh;
  text-align:center;
}
.modal-text-area{
  display:flex;
  justify-content:left;
}
.modal-text-left{

  float:right;
}
.modal-text-right{
  float:left;
}
.modal-content-adjust{
  display:inline-block;
  text-align: left;
}
</style>