element-ui 根据开发或者生产环境生成不同的推广链接

谁践踏了优雅 2021-07-25 12:59 299阅读 0赞

## element-ui 生成链接 ##

最近公司的后台管理系统，需要做一个渠道管理，点击按钮生成一个推广链接，用于渠道的推广。

比如：百度的链接点击次数可以统计到百度渠道中，依次类似。

页面如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
点击“生成链接”按钮后，弹窗出现链接内容。这个链接内容是一个baseurl+编码的一种形式。

由于vue开发的话，有开发环境和生产环境的区分，不同的环境下生成的链接如果要有所区分的话，需要进行环境的判断。

判断条件如下：

var baseUrl = "";
    if (process.env.NODE_ENV == "development") { 
      baseUrl = "https://ceshi.test.zjddwl.net"
    } else { 
      baseUrl = "https://shengchan.zjddwl.com"
    }
    this.dialogurlVisible = true;
    this.urlForm.url = baseUrl + "/h5/invite.html?channel=" + row.code;

通过`process.env.NODE_ENV`的判断，可以区分开发和生产环境，然后通过字符串拼接的方式来生成独有的渠道推广链接即可。

## 将链接复制到剪切板 ##

浏览器端（h5）将内容复制到剪切板的函数如下：

copyText: (text) => { 
          const textString = text.toString();
          let input = document.querySelector('#copy-input');
          if (!input) { 
            input = document.createElement('input');
            input.id = "copy-input";
            input.readOnly = "readOnly";
            input.style.position = "absolute";
            input.style.left = "-1000px";
            input.style.zIndex = "-1000";
            document.body.appendChild(input)
          }
    
          input.value = textString;
          selectText(input, 0, textString.length);
          if (document.execCommand('copy')) { 
            document.execCommand('copy');
          } else { 
            console.log('不兼容');
          }
          input.blur();
          function selectText(textbox, startIndex, stopIndex) { 
            if (textbox.createTextRange) { //ie
              const range = textbox.createTextRange();
              range.collapse(true);
              range.moveStart('character', startIndex);//起始光标
              range.moveEnd('character', stopIndex - startIndex);//结束光标
              range.select();//不兼容苹果
            } else { //firefox/chrome
              textbox.setSelectionRange(startIndex, stopIndex);
              textbox.focus();
            }
          }
        },

## 复制链接的方法调用 ##

handleCopy() { 
      this.copyText(this.urlForm.url);
      setTimeout(res => { 
        this.$notify({ 
          title: "成功",
          message: `复制成功`,
          type: "success",
          duration: 2000
        });
        // 关闭弹窗
        this.dialogurlVisible = false;
        // 清空参数，每次点击生成链接按钮都是重新生成的。因为数据表中没有这个字段，不能实时保存。
        this.urlForm.url = undefined;
      }, 300)
    },

## 最终实现效果截图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/11a6f0fecac844be8732007638015596.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/c65785ff7d964f40a3ccc119476e4821.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/e4fefe83e5f048df8d8ef156c592270d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/de126e4c903e48b887614774d574744c.png