Vue自定义指令示例

最新推荐文章于 2024-06-16 13:00:26 发布

爪蛙没有爪

最新推荐文章于 2024-06-16 13:00:26 发布

阅读量377

点赞数

分类专栏： Vue 文章标签： vue 自定义指令多行文本溢出省略光标聚焦于文本末尾点击空白处关闭

本文链接：https://blog.csdn.net/qq_32013641/article/details/89238787

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

光标聚焦于文本末尾
适用:中高版本的常用浏览器
使用方式：<input type='text' v-focus-cursor-end>

/**
 * 文本框聚焦，且光标定位于文本末尾
 * 适用于v-if组件下的文本框
 */
Vue.directive('focus-cursor-end', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
        const pos=el.value.length;
        if (el.createTextRange) {//IE浏览器 IE浏览器中有TextRange  对body,textarea,button有效
            const range = el.createTextRange(); //创建textRange
            range.moveStart("character", pos); //移动开始点（应移动到末尾），以字符为单位
            range.collapse(true);//没有移动结束点直接 折叠到一个点
            range.select();//选择这个点
        } else {//非IE浏览器,如firefox,chrome
            el.setSelectionRange(el.value.length, pos);
        }
        el.focus();
    }
});

点击空白处关闭
使用方式:<div v-click-outside-close='func-name'>内容</div>

//点击空白处关闭
Vue.directive('click-outside-close',{
  bind:function(el,binding) {
    function handleClick(e){
      if(el.contains(e.target)){

        return false;
      }
      if(binding.expression){
        binding.value(e);
      }
    }
    el.__vueClickClose=handleClick;
    document.addEventListener('click',el.__vueClickClose);
  },
  unbind:function(el,binding){
    document.removeEventListener('click',el.__vueClickClose);
  }
});

多行文本溢出省略
使用方式:<div v-auto-elli>非常多的内容非常多的内容非常多的内容非常多的内容非常多的内容</div>

/**
 * 多行文本换行省略
 */
Vue.directive('auto-elli',{
    inserted: function (el) {
        const s = el.textContent|| el.innerText,
            n = el.offsetHeight;
        for(let i=0; i<s.length; i++) {
            el.innerHTML = s.substr(0, i+1);
            if(n < el.scrollHeight) {
                el.style.overflow = 'hidden';
                el.innerHTML = s.substr(0, i-3) + '...';
                break;
            }
        }
    }
});