<template>
    <itv-container class="page-dialog">
        <itv-header>dialog</itv-header>
        <itv-main>
            <div class="h10"></div>
            <section>
                
                <itv-cell :showIcon="true" title="中间弹出" @click="show=true"  desc="中间弹出">
                </itv-cell>

                <itv-cell :showIcon="true" title="在下方弹出" @click="bottomShow=true"  desc="向下弹出">
                </itv-cell>

                <itv-cell :showIcon="true" title="从上方弹出" @click="topshow=true"  desc="从上弹出">
                </itv-cell>

                <itv-cell :showIcon="true" title="从左弹出" @click="leftshow=true"  desc="从左弹出">
                </itv-cell>
                <itv-cell :showIcon="true" title="从右弹出" @click="rightshow=true"  desc="从右弹出">
                </itv-cell>
                <itv-cell :showIcon="true" title="从右弹出" @click="onPlugin"  desc="从右弹出">
                </itv-cell>
            
            </section>
        </itv-main>
        <itv-dialoger v-model="show" type="center" :hideOnClick="true">
            <div class="dialog-center">
                中间弹出的内容
            </div>
            
            </itv-dialoger>
        <itv-dialoger v-model="bottomShow" type="bottom" :hideOnClick="true">
            <div class="slide-bottom">
                我是向下弹出来的内容
            </div>
           
        </itv-dialoger>

        <itv-dialoger v-model="topshow" type="top" :hideOnClick="true">
            <div class="slide-bottom">
                我是向上弹出来的内容
            </div>
        </itv-dialoger>

        <itv-dialoger v-model="leftshow" type="left" :hideOnClick="true">
            <div class="slide-left">
                我是向左弹出来的内容
            </div>
        </itv-dialoger>

        <itv-dialoger v-model="rightshow" type="right" :hideOnClick="true">
            <div class="slide-right">
                我是向上弹出来的内容
            </div>
        </itv-dialoger>
        <div class="text" ref="plugin">
            plugin
        </div>
    </itv-container>

</template>

<script>
export default {
  data() {
    return {
        show:false,
        bottomShow: false,
        topshow: false,
        leftshow:false,
        rightshow: false
        
    };
  },
  methods: {
      open() {
          this.show = true
      },
      plugin(value) {
          if(value){
              this.$itv.dialog.show({
                  html: 'weg'
              })
          }else{
              this.$itv.dialog.show({
                  html: this.$refs.page
              })
          }

      },
      onPlugin() {
            this.$itv.dialoger.show({
                html: this.$refs.plugin
            })
      },
      page() {
      }
  },
  mounted() {

  }
};
</script>

<style lang="less" scoped>
.page-dialog {
    user-select:none;
    .page-content{
        display: none;
    }
}
.demo {
  padding-left: 0;
  padding-right: 0;
}
h4 {
  padding: 0 10px;
}
.slide-bottom{
    background-color: #fff;
    height: 400ipx;
    width: 100%;
}

.slide-left{
    background-color: #fff;
    height: 100%;
    width: 150pt;
}

.slide-right{
    background-color: #fff;
    height: 100%;
    width: 150pt;
}
.dialog-center{
    width: 200ipx;
    height: 200ipx;
    background-color: #fff;
    display: flex;
    align-content: center;
    justify-content: center;
}
</style>
