jquery和vue复制功能

jquery

html

1.1奖品列表复制某一行物流单号信息

1.1.1引入

<!-- copy -->
<script type="text/javascript" src="js/prize/clipboard.js"></script>

<c:if test="${ prize.isExpress }">
	<button type="button" title="复制物流单号" class="am-btn am-btn-secondary copyLogist" id="copyLogist">
	<i class="fa fa-copy"></i>
	</button>
	<p><strong>快递：</strong><span>${ prize.expressName }</span></p><br>
	<p class="logistCode"><strong>快递编号：</strong><span class="logistSpan" id="${ prize.expressId }" data-id="${ prize.expressId }">${ prize.expressCode }</span></p>
</c:if>

$(".copyLogist").on("click",function(){
	$(".prizeLogisticsModal").removeClass("in");
	const range = document.createRange();
	var id = $(this).siblings(".logistCode").children(".logistSpan").data('id');
	range.selectNode(document.getElementById(id));

	const selection = window.getSelection();
	if(selection.rangeCount > 0) selection.removeAllRanges();
	selection.addRange(range);
	document.execCommand('copy');
	var msg="快递编号复制成功";
	succTipMsg(msg);
	$("#my-alertTwo #infoSure").click(function(){
		$("#exampleModal").css("display","none");
	});
})

若是单个复制

<div class="modal-footer line">
  <button type="button" class="btn btn-primary" id="invitationCode" data-dismiss="modal" data-am-modal="{target: '#my-alertTwo'}" onClick="jsCopy();">复制邀请码</button>
</div>

//邀请码
function jsCopy(){
	var e=document.getElementById("inviteUrl");//对象
	e.select(); //选择对象
	tag=document.execCommand("Copy"); //执行浏览器复制命令
	if(tag){ 
		var msg="复制邀请码成功";
		//提示弹框
		succTipMsg(msg);
		$("#my-alertTwo #infoSure").click(function(){
			$("#exampleModal").css("display","none");
		});
	}
}

index.js

import vMenus from '@/components/changeMenus/menus'

export {vMenus}

menus.js

import '@/components/changeMenus/menus.scss'
import {scan} from '@/components/changeMenus/scan'

export default {
  name: 'v-menus',
  props: {
    contentId: {
      type: String,
      default: null
    },
    contentFlag: {
      type: String,
      default: 'content_tag'
    },
    menuFlag: {
      type: String,
      default: 'menu_link'
    },
    canToggle: {
      type: Boolean,
      default: false
    },
    opened: {
      type: Boolean,
      default: true
    },
    scanLevel: {
      type: Number,
      default: 2
    },
    scanAll: {
      type: Boolean,
      default: true
    },
    defalutMenuName: {
      type: String,
      default: '文章开头'
    }
  },
  data () {
    return {
      menuList: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.loadMenus()
    })
    window.addEventListener('scroll', this.listenScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.listenScroll)
  },
  render (h) {
  //生成目录
    const genMenu = (menu, level) => {
      let self = this
      let iClasses = ''
      let liClasses = ''
      if (menu.menus && menu.menus.length > 0) {
       iClasses = this.canToggle
      } else {
        liClasses = 'listStyle'
      }
      return h('li', {class: ['menu_level menu_level_' + level, liClasses]}, [
        h('a', {
          class: [this.menuFlag + ' menu_item_' + level, menu.current ? 'current' : ''],
          attrs: {
            href: 'javascript:void(0)',
            link: '#' + menu.id
          },
          on: {click: () => self.jumpToTarget('#' + menu.id)}
        }, [
          h('i', {class: iClasses}),
          menu.text
        ]),
        genMenuList(menu.menus, level + 1)
      ])
    }

    const genMenuList = (menus, level) => {
      const menuLis = []
      if (menus && level < this.scanLevel + 1) {
        menus.forEach(menu => {
          menuLis.push(genMenu(menu, level))
        })
      }
      return h('ul', {class: 'menu_list menu_list_' + level}, menuLis)
    }

    return genMenuList(this.menuList, 1)
  },
  
  methods: {
    loadMenus () {
      this.menuList = scan({
        contentId: this.contentId,
        contentFlag: this.contentFlag,
        scanAll: this.scanAll,
        firstMenu: this.defalutMenuName
      })
      this.$emit('is-empty-menu', this.menuList && this.menuList.length > 0)
    },
    //点击跳转到相应的目录区域
    jumpToTarget (linkTarget) {
      let menuObj = $('a[link="' + linkTarget + '"]')
      if (this.canToggle) {
        menuObj.find('i.fa').toggleClass('fa-caret-down').toggleClass('fa-caret-right')
        menuObj.next().toggleClass('hide')
      }
      $('.' + this.menuFlag + '.current').removeClass('current')
      menuObj.addClass('current')
      $('html, body').animate({scrollTop: $(linkTarget).offset().top - 68}, 500)
      //禁止滚动事件，0.8秒后重新启用
      window.removeEventListener('scroll', this.listenScroll)
      setTimeout(()=>{
        window.addEventListener('scroll', this.listenScroll)
      },800)
    },
    //滚动文章内目录标题时，右侧目录选中当前的标题，如果右侧目录过多，滚动到的目录不在可视区域，使其滚动到可视区域显示
    listenScroll () {
      let that = this
      let scrollTop = $(window).scrollTop()
      let menuItems = $('.' + that.menuFlag)
      let currentLi = $('.menusBox li').find('a.current')
      let lis = $('.menusBox li').find('a')
      let fixDivScrollTop = fixDivIndex * 30;//这个元素正好在可视区域上方的scrollTop值
      let addFixDivScrollTop = fixDivScrollTop - 140 //滚动到的位置，因我是需要显示到中间，所以减了接近5个li的高度
      // console.log(fixDivScrollTop)
      //选中的目录是否在可视区域
      if(fixDivScrollTop > 270 ){
        //不在可视区域
        $('.masg_menus').scrollTop(addFixDivScrollTop);
      } else if(fixDivScrollTop < 270){
        //在可视区域内
        $('.masg_menus').scrollTop(0);
      }
      $('#' + that.contentId + ' .' + that.contentFlag + ', #' + that.contentId + '.' + that.contentFlag).each(function (n, ct) {
        let tagTop = $(ct).offset().top
        let distance = tagTop - scrollTop
        if (distance >= 68) {
          $('.' + that.menuFlag + '.current').removeClass('current')
          // let ind = n === 0 ? n : n - 1
          // console.log(ind)
          // console.log($(menuItems[ind]).html())
          $(menuItems[n]).addClass('current')
          return false
        }
      })
    }
  }
}

menus.css

ul.menu_list_1 {
  padding: 0px 0px 15px 3px;
  li {
    //list-style-type: disc;
    list-style-type: none;
    line-height: 28px;
    list-style-position:inside;
    border-left: 1px solid #E8E8E8;
  }
  li.menu_level_1 {
    color: #B5B5B5;
  }
  li.menu_level_1.current {
    color: #6D59B8;
  }
  a.menu_item_1 {
    //color: #333333;
    color: #666666;
    font-size: 12px;
    font-weight: 500;
    i{
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #B5B5B5;
      position: relative;
      top: -2px;
      margin-left: -3px;
      margin-right: 0px;
      box-shadow: 0px 0px 10px 6px #F3F3F6;
    }
    .menusName{
      display: inline-block;
      width: 84%;
      margin-left: 15px;
      vertical-align: top;
      word-break:keep-all;/*不换行*/
      white-space:nowrap;/*不换行*/
      overflow:hidden;/*内容超出宽度时隐藏超出部分的内容*/
      text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记(...)；需与overflow:hidden;一起使用。*/
    }
  }
  a.current {
    //color: #61649F;
    color: #6D59B8;
    font-weight: bold;
    i{
      display: inline-block;
      width: 9px;
      height: 4px;
      margin-left: -4px;
      margin-right: 0;
      box-shadow: 0px 0px 10px 6px #F3F3F6;
      background: url("~@/images/menus/towMenus.svg") no-repeat;
      border-radius: 0;
    }
    .menusName{
      display: inline-block;
      width: 84%;
      margin-left: 12px;
      vertical-align: top;
      word-break:keep-all;/*不换行*/
      white-space:nowrap;/*不换行*/
      overflow:hidden;/*内容超出宽度时隐藏超出部分的内容*/
      text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记(...)；需与overflow:hidden;一起使用。*/
    }
  }
  ul.menu_list_2 {
    //padding: 0px 0px 0px 20px;
    padding: 0;
    li.menu_level_2 {
    }
    a.menu_item_2 {
      //color: #333333;
      color: #999999;
      font-size: 12px;
      font-weight: 400;
      i{
        display: inline-block;
        width: 9px;
        height: 4px;
        //margin-right: 16px;
      }
      .menusName{
        display: inline-block;
        width: 84%;
        margin-left: 16px;
        vertical-align: top;
        word-break:keep-all;/*不换行*/
        white-space:nowrap;/*不换行*/
        overflow:hidden;/*内容超出宽度时隐藏超出部分的内容*/
        text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记(...)；需与overflow:hidden;一起使用。*/
      }
    }
    a.current {
      //color: #61649F;
      color: #6D59B8;
      font-weight: bold;
      i{
        display: inline-block;
        width: 9px;
        height: 4px;
        position: relative;
        top: -2px;
        margin-left: -4px;
        box-shadow: 0px 0px 10px 6px #F3F3F6;
        background: url("~@/images/menus/towMenus.svg") no-repeat;
      }
      .menusName{
        display: inline-block;
        width: 84%;
        margin-left: 20px;
        vertical-align: top;
        word-break:keep-all;/*不换行*/
        white-space:nowrap;/*不换行*/
        overflow:hidden;/*内容超出宽度时隐藏超出部分的内容*/
        text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记(...)；需与overflow:hidden;一起使用。*/
      }
    }
  }
  i.fa-caret-right, i.fa-caret-down {
    color: #61649F;
    font-size: 16px;
    margin-right: 10px;
  }
  ul.menu_list li.listStyle {
    //list-style: circle;
    list-style-type: none;
    color: #61649F;
    list-style-position: inside;
    border-left: none;
  }
  .hide {
    display: none;
  }
}

scan.js

export const scan = ({contentId, contentFlag = 'content_tag', scanAll = false, firstMenu = '文章开头'}) => {
  let h1s = $('#' + contentId).find('h1')
  let h2s = $('#' + contentId).find('h2')
  let h3s = $('#' + contentId).find('h3')
  let h4s = $('#' + contentId).find('h4')
  let h5s = $('#' + contentId).find('h5')
  let h6s = $('#' + contentId).find('h6')

  let headCounts = [h1s.length, h2s.length, h3s.length, h4s.length, h5s.length, h6s.length]
  let h1Tag = null
  let h2Tag = null
  $.each(headCounts, function (n, value) {
    if (value > 0) {
      if (h1Tag === null) {
        h1Tag = 'h' + (n + 1)
      } else if (h2Tag === null) {
        h2Tag = 'h' + (n + 1)
      } else {
        return false
      }
    }
  })
  if (h1Tag === null) {
    return []
  }
  let hTags = h1Tag
  if (h2Tag !== null) {
    hTags += (',' + h2Tag)
  }

  let menus = []
  let h1Index = 0
  let h2Index = 0
  $('#' + contentId).removeClass(contentFlag)
  $('#' + contentId).find(hTags).each(function (n, item) {
    let hTag = $(item).get(0).tagName.toLowerCase()
    if (hTag === h1Tag) {
      h1Index++
      h2Index = 0
      let menu1 = {}
      menu1.id = 'menu' + h1Index
      menu1.num = '' + h1Index
      menu1.text = $(item).text()
      menu1.current = false
      menu1.menus = []
      menus.push(menu1)
      $(item).attr('id', menu1.id)
      $(item).addClass(contentFlag)
    } else if (hTag === h2Tag) {
      if (h1Index === 0) {
        if (scanAll) {
          h1Index++
          let menu1 = {}
          menu1.id = contentId
          menu1.num = '' + h1Index
          menu1.text = firstMenu
          menu1.current = false
          menu1.menus = []
          menus.push(menu1)
          $('#' + contentId).addClass(contentFlag)
        } else {
          return true
        }
      }
      h2Index++
      let menu2 = {}
      menu2.id = 'menu' + h1Index + '_' + h2Index
      menu2.num = h1Index + '.' + h2Index
      menu2.text = $(item).text()
      menu2.current = false
      menus[h1Index - 1].menus.push(menu2)
      $(item).attr('id', menu2.id)
      $(item).addClass(contentFlag)
    }
  })
  menus[0].current = true

  return menus
}

效果图