Element彈窗使用詳解

在前端開發中彈窗是不可少的組件之一，ElementUI作為一套非常流行的前端UI框架，其彈窗組件也備受開發者的青睞。本文將從Element彈窗的實現、常用功能和二次封裝等多個方面對其進行詳細闡述。

一、Element彈窗滑塊

Element彈窗滑塊通常用於彈窗中需要選擇一段區間值的場景。該組件的使用方法如下：

<el-slider v-model="value" :min="1" :max="100"></el-slider>

其中value是綁定數據，min和max是設置最小值和最大值的屬性。

同時，Element還提供了多種滑塊的樣式可供選擇，可以通過修改class來實現，比如想使用顏色為warning的滑塊，可以這樣寫：

<el-slider v-model="value" :min="1" :max="100" class="warning"></el-slider>

二、ElementUI彈窗組件

ElementUI彈窗組件是ElementUI中最常用的組件之一，也是我們最常使用的彈窗。其使用方法如下：

<el-dialog title="彈窗標題" :visible.sync="dialogVisible">
    <span>這是一段內容</span>
</el-dialog>

其中visible.sync是實現數據綁定的方式，dialogVisible是綁定的數據，只需要修改dialogVisible的值即可控制彈窗的顯示與隱藏。在el-dialog標籤中可以放置任何HTML元素。

三、Element彈窗組件

Element彈窗組件是一種輕量級的彈窗組件，可以快速地實現彈窗的功能。其使用方法和el-dialog類似，如下所示：

<el-popover
      placement="top"
      width="200">
    <p>這是一段內容</p>
    <div slot="reference">觸發元素</div>
</el-popover>

其中placement是確定彈窗位置的屬性，可以選擇top、bottom、left、right等方向。width是彈窗寬度。

四、Element彈窗里放echarts

在Element彈窗中嵌入echarts圖表是開發中非常常見的需求，下面是實現方法：

<el-dialog :visible.sync="showChart" title="echarts圖表">
    <div ref="chart" style="height: 400px"></div>
</el-dialog>

mounted() {
  this.$nextTick(() => {
    const chartDom = this.$refs.chart;
    const myChart = echarts.init(chartDom);
    myChart.setOption({
      ...option
    });
  });
}

其中option是echarts的配置項，可以根據需求修改。

五、Element彈窗位置

Element彈窗的位置可以通過設置popper-class屬性來實現。popper-class是彈出框根節點的 class，在初始化 popper.js 之前將其添加到 DOM 中。如下所示：

.popper-class .popper__arrow {
  bottom: -8px;
}

可以通過修改CSS來實現彈窗位置的調整。

六、Element彈窗關閉事件

Element彈窗提供了兩種關閉方式，分別是點擊遮罩層關閉和點擊右上角的關閉按鈕關閉。可以通過設置它們的屬性來實現不同的關閉方式：

    <el-dialog
      title="彈窗標題"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :show-close="false">
      <span>這是一段內容</span>
    </el-dialog>

其中：close-on-click-modal屬性可以設置是否可以通過點擊遮罩層關閉彈窗；show-close屬性可以設置是否顯示右上角的關閉按鈕。

七、Element彈窗二次封裝

為了實現功能的復用和提高開發效率，我們可以對Element彈窗進行二次封裝。代碼如下：

<template>
  <div>
    <my-dialog v-model="dialogVisible">
      <span>這是一段內容</span>
    </my-dialog>
  </div>
</template>

<script>
import MyDialog from './MyDialog.vue'

export default {
  components: {
    'my-dialog': MyDialog
  },
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>

其中MyDialog.vue是我們自己定義的彈窗組件，可以自由擴展和修改。

八、Element彈窗可以拖拽嗎

ElementUI本身並沒有提供彈窗拖拽的功能，但我們可以使用拖拽插件來實現。下面是一種實現方法：

<el-dialog :visible.sync="dialogVisible" title="拖拽彈窗">
    <span>內容</span>
</el-dialog>

<script>
import drag from 'v-drag'

export default {
  mounted() {
    this.$nextTick(() => {
      drag.init(this.$refs.dialog.$el, {
        handle: this.$refs.dialog.$el.querySelector('.el-dialog__header'),
        container: this.$el.querySelector('.el-container') // 容器為彈窗父級元素
      })
    })
  }
}
</script>

其中v-drag是拖拽插件，在使用前需要先安裝。

九、Element彈窗外文字複製

有時候我們需要實現彈窗中的文字可以複製到外面，可以通過設置ElementUI的el-input組件的append屬性來實現。代碼如下：

<el-input
  v-model="copyText"
  ref="copyInput"
  placeholder="請輸入要複製的內容">
  <el-button slot="append" @click="copy"><i class="el-icon-document"></i></el-button>
</el-input>

<script>
export default {
  data() {
    return {
      copyText: ''
    }
  },
  methods: {
    copy() {
      this.$refs.copyInput.$refs.input.select(); // 選中文本
      document.execCommand("copy"); // 執行複製操作
      this.$message.success('複製成功'); // 提示複製成功
    }
  }
}
</script>

十、Element彈窗如何設置遮罩選取

為了避免在彈窗出現時，用戶還可以在界面上進行其他的操作，我們可以在彈窗出現後，可以加一層蒙層使用戶無法對界面上的其他元素進行操作。ElementUI中的el-dialog組件提供了mask-click-close屬性和mask屬性來實現這一功能。代碼如下：

<el-dialog
      title="遮罩"
      :visible.sync="visible"
      :mask="true"
      :mask-click-close="false">
      <span>這是一段內容</span>
    </el-dialog>

其中mask屬性可以設置是否有遮罩層，mask-click-close屬性可以設置點擊遮罩層是否關閉彈窗。

總結

本文詳細闡述了Element彈窗的多個方面，包括彈窗滑塊、ElementUI彈窗組件、Element彈窗組件、彈窗中嵌入echarts圖表等。並且介紹了二次封裝、拖拽插件、文字複製以及如何設置遮罩選取等技巧。希望這些內容可以對你日常開發中的工作有所幫助。