vue 页面分享功能

    <!-- 分享弹窗 -->
    <el-dialog title="分享：数据大屏" :visible.sync="shareDialogVisible" width="30%">
      <el-checkbox v-model="shareInfo.usePassword">启用密码：</el-checkbox>

      <br>
      <el-input
        v-if="shareInfo.usePassword"
        style="width:70%;"
        size="small"
        v-model="shareInfo.password"
        placeholder="请输入密码"
        clearable
      ></el-input>

      <br>
      <el-checkbox v-model="shareInfo.useTime">有效期限：</el-checkbox>

      <br>
      <el-date-picker
        v-if="shareInfo.useTime"
        type="datetime"
        placeholder="过期时间"
        v-model="shareInfo.expiryTime"
        size="small"
        style="width:70%;"
      ></el-date-picker>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="shared()" size="small">创建链接</el-button>
      </div>
    </el-dialog>

    <!-- url弹窗 -->
    <el-dialog title="url地址" append-to-body :visible.sync="appendDialog" width="30%">链接：
      <el-input size="small" style="width:80%" id="aaa" readonly v-model="shareCopyUrl"></el-input>
      <br>

      <br>
      <br>
      <el-button
        size="small"
        type="primary"
        @click="copyUrl"
        style="margin-left:30%;;margin-right:20px;"
      >复制链接</el-button>
      <a :href="shareCopyUrl" target="_blank" rel="noopener noreferrer">
        <el-button size="small" type="primary">打开链接</el-button>
      </a>
      <div slot="footer" class="dialog-footer">
        <el-button @click="appendDialog = false" size="small">关 闭</el-button>
      </div>
    </el-dialog>

js:
/* 分享方法 */
    share () {
      if (this.bigSelectTree !== undefined&&this.bigSelectTree!==null) {
        this.shareDialogVisible = true
      } else {
        Message.warning("请选择分享的模板！")
        return
      }
    },
    /* 复制功能 */
    copyUrl () {
      var Url2 = document.getElementById("aaa")
      Url2.select()
      let aaas = document.execCommand("Copy")
      Message.success("复制成功，可粘贴！")
      this.shareDialogVisible = false
    },
    /* 创建链接 */
    shared () {
      if (this.bigSelectTree !== null) {
        this.createURL(this.bigSelectTree.id, "", "", this.bigScreenType)
        this.shareInfo.usePassword = ""
        this.shareInfo.password = ""
        this.shareInfo.useTime = ""
        this.shareCopyUrl = ""
        this.shareInfo.expiryTime = ""
      }
      return
    },
    /* 总的分享链接 */
    createURL (id, type) {
      let password = ""
      let expiryTime = ""
      var url = window.location.href
      var arrUrl = url.split("//")
      var start = arrUrl[1].indexOf("/")
      var relUrl = arrUrl[1].substring(0, start)
      if (this.shareInfo.usePassword) {
        password = this.shareInfo.password
      } else {
        password = ""
      }
      if (this.shareInfo.useTime) {
        expiryTime = this.dateToStr(this.shareInfo.expiryTime)
      } else {
        expiryTime = ""
      }
      let shareUrl = {
        id: id,
        type: this.bigScreenType
      }
      this.$http
        .post(url, {}).then(res => {
          this.shareCopyUrl =
            "http://" + relUrl + "id=" + res.data.data.linkInfoId
          this.shareDialogVisible=false
          this.appendDialog = true
        })
    },
dateToStr(dateTime){
//获取日期的方法
}