Dialog 对话框 #

<template>
  <div>
    <bf-button status="normal" @click="showDialog1">标题左对齐</bf-button>
    <bf-button status="normal" @click="showDialog2">标题居中</bf-button>

    <bf-dialog v-model:visible="visible1" title="标题" :z-index="100">
      <template v-slot:main> 默认对话框标题文字左对齐 </template>
    </bf-dialog>

    <bf-dialog v-model:visible="visible2" title="标题" center :z-index="100">
      <template v-slot:main> 通过 center 属性可设置对话框标题居中对齐 </template>
    </bf-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BfButton, BfDialog } from '@bf-teams/bfui-vue';

// data
const visible1 = ref(false)
const visible2 = ref(false)

// methods
const showDialog1 = () => {
  visible1.value = true
}
const showDialog2 = () => {
  visible2.value = true
}
</script>

<template>
  <div>
    <bf-button status="normal" @click="showDialog1">small</bf-button>
    <bf-button status="normal" @click="showDialog2">medium</bf-button>
    <bf-button status="normal" @click="showDialog3">large</bf-button>

    <bf-dialog v-model:visible="visible1" title="文章删除" size="small" :z-index="100">
      <template v-slot:main> 此操作将不可逆，您确定要删除该文章？ </template>
      <template v-slot:footer>
        <bf-button type="outline" @click="onCancel">取消</bf-button>
        <bf-button status="danger" @click="onConfirm">删除</bf-button>
      </template>
    </bf-dialog>

    <bf-dialog v-model:visible="visible2" title="用户信息" size="medium" :z-index="100">
      <template v-slot:headerRight>
        <bf-button status="normal" round>编辑</bf-button>
      </template>
      <template v-slot:main>
        豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
        时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
        披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。
        遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？
        嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！
        勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？
        呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：
        滕王高阁临江渚，佩玉鸣鸾罢歌舞。 画栋朝飞南浦云，珠帘暮卷西山雨。
        闲云潭影日悠悠，物换星移几度秋。 阁中帝子今何在？槛外长江空自流。
      </template>
    </bf-dialog>

    <bf-dialog v-model:visible="visible3" title="文章详情" size="large" :z-index="100">
      <template v-slot:main>
        <div style="line-height: 60px;">
          <div>愿你生如星辰一般，在天璀璨，在地从容，担得起倾慕仰望，经得住黯淡平凡。</div>
          <div>愿你生如星辰一般，在天璀璨，在地从容，担得起倾慕仰望，经得住黯淡平凡。</div>
          <div>愿你生如星辰一般，在天璀璨，在地从容，担得起倾慕仰望，经得住黯淡平凡。</div>
          <div>愿你生如星辰一般，在天璀璨，在地从容，担得起倾慕仰望，经得住黯淡平凡。</div>
          <div>愿你生如星辰一般，在天璀璨，在地从容，担得起倾慕仰望，经得住黯淡平凡。</div>
          <div>愿你生如星辰一般，在天璀璨，在地从容，担得起倾慕仰望，经得住黯淡平凡。</div>
          <div>愿你生如星辰一般，在天璀璨，在地从容，担得起倾慕仰望，经得住黯淡平凡。</div>
          <div>愿你生如星辰一般，在天璀璨，在地从容，担得起倾慕仰望，经得住黯淡平凡。</div>
          <div>愿你生如星辰一般，在天璀璨，在地从容，担得起倾慕仰望，经得住黯淡平凡。</div>
          <div>愿你生如星辰一般，在天璀璨，在地从容，担得起倾慕仰望，经得住黯淡平凡。</div>
          <div>愿你生如星辰一般，在天璀璨，在地从容，担得起倾慕仰望，经得住黯淡平凡。</div>
          <div>愿你生如星辰一般，在天璀璨，在地从容，担得起倾慕仰望，经得住黯淡平凡。</div>
        </div>
      </template>
    </bf-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BfButton, BfDialog } from '@bf-teams/bfui-vue';

// data
const visible1 = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)

// methods
const showDialog1 = () => {
  visible1.value = true
}
const onCancel = () => {
  console.log('已取消')
  visible1.value = false
}
const onConfirm = () => {
  console.log('删除成功')
  visible1.value = false
}

const showDialog2 = () => {
  visible2.value = true
}

const showDialog3 = () => {
  visible3.value = true
}
</script>

<template>
  <div>
    <bf-button status="normal" @click="showDialog">顶部距离</bf-button>

    <bf-dialog v-model:visible="visible" title="标题" :z-index="100" top="10vh">
      <template v-slot:main> 主体内容 </template>

      <template v-slot:footer>
        <bf-button type="outline" @click="onCancel">取消</bf-button>
        <bf-button status="normal" @click="onConfirm">确定</bf-button>
      </template>
    </bf-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BfButton, BfDialog } from '@bf-teams/bfui-vue';

// data
const visible = ref(false)

// methods
const showDialog = () => {
  visible.value = true
}
const onCancel = () => {
  console.log('已取消')
  visible.value = false
}
const onConfirm = () => {
  console.log('操作成功')
  visible.value = false
}
</script>

<template>
  <div>
    <bf-button status="normal" @click="showOverlay">模糊滤镜</bf-button>

    <bf-overlay v-model:visible="visible" :blur="2" @click.self="hideOverlay"></bf-overlay>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BfButton, BfOverlay } from '@bf-teams/bfui-vue';

// data
const visible = ref(false)

// methods
const showOverlay = () => {
  visible.value = true
}
const hideOverlay = () => {
  visible.value = false
}
</script>

<template>
  <div>
    <bf-button status="normal" @click="showDialog">使用插槽</bf-button>

    <bf-dialog v-model:visible="visible" title="标题" :z-index="100">
      <template v-slot:headerRight>
        <bf-button status="normal">按钮</bf-button>
      </template>

      <template v-slot:main> 主体内容 </template>

      <template v-slot:footer>
        <div style="text-align: left;">对话框底部区域，可以放置操作按钮等</div>
      </template>
    </bf-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BfButton, BfDialog } from '@bf-teams/bfui-vue';

// data
const visible = ref(false)

// methods
const showDialog = () => {
  visible.value = true
}
</script>