<template>
  <div>
    <bxs-cell-group>
      <bxs-cell
        title="从上弹出"
        is-link
        @click="showPopup('top')"
        />
      <bxs-cell
        title="从右弹出"
        is-link
        @click="showPopup('right')"
        />
      <bxs-cell
        title="从下弹出"
        is-link
        @click="showPopup('bottom')"
        />
      <bxs-cell
        title="从左弹出"
        is-link
        @click="showPopup('left')"
        />
      <bxs-cell
        title="从中弹出"
        is-link
        @click="showPopup()"
        />
    </bxs-cell-group>
    <bxs-popup
      class="demo-popup"
      v-model="show"
      :position="position"
      >
      <p>这是正文内容，不包含任何样式</p>
      <p>这是正文内容，不包含任何样式</p>
      <p>这是正文内容，不包含任何样式</p>
      <p>这是正文内容，不包含任何样式</p>
      <p>这是正文内容，不包含任何样式</p>
      <p>这是正文内容，不包含任何样式</p>
    </bxs-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: null,
      show: false,
    }
  },
  methods: {
    showPopup(position) {
      this.position = position
      this.show = true
    },
  },
}
</script>

<style lang="css">
.demo-popup {
  font-size: 15px;
  padding: 15px 15px;
}
</style>
