vue實作按鈕彈框【彈出圖檔、視訊、表格、表單等】

劍閣峥嵘而崔嵬,一夫當關,萬夫莫開 🏆 @蜀道難

🔎 了解部落客

1. 📢 個人簡介: 哈喽！小夥伴們，我是水香木魚，水瓶座一枚 😜 來自于黑龍江 慶安
2. 🏡 本站首頁:水香木魚
3. 📖 人生格言:生活是一面鏡子。 你對它笑， 它就對你笑； 你對它哭， 它也對你哭。
4. 🌏 小目标: 成為前端布道師

期待已久的 vue 彈框​

​(el-button+el-dialog組合)​

​,今天 它來啦!炸雷、炸雷、炸雷,崩塌卡茨…

📑 文章内容

内容特點：少量代碼 又不難，是你喜歡的類型。

1、按鈕

<el-button @click="playVideo"> 案例視訊 </el-button>      

2、對話框

• visible:(是否顯示 Dialog，支援 .sync 修飾符)
• close:(Dialog 關閉的回調)
• width:(彈出框的寬度大小)
• title:(顯示的标題)

<el-dialog
  :visible.sync="videoVisible"
  width="80%"
  title="案例視訊"
  @close="closeDialog"
>
  <div style="height:500px;text-align:center">
    <!--需要彈出的内容部分-->
    <video
      width="100%"
      height="100%"
      :src="minioBaseUrl + '/demo-video/system.mp4'"
      controls="controls"
      ref="video"
    ></video>
  </div>
</el-dialog>      

3、定義狀态

data() {
    return {
      //預設false 彈框隐藏狀态    
       videoVisible: false,
    }
},
methods: {
    //點選按鈕時,觸發彈出效果
    playVideo() {
        //觸發點選時,讓其顯示
        this.videoVisible = true
    },
    //事件操作 (表格、表單 同理 需要執行的事件 在此處)
    closeDialog() {
      //點選播放視訊
      this.$refs.video.pause()
    },
}      

​​

​​部落客緻謝

非常感謝小夥伴們閱讀到結尾，本期的文章就分享到這裡，總結了​

​(vue實作按鈕彈框[視訊、圖檔、表單、表格等])​

​，希望可以幫到大家，謝謝。