随笔记录一些的前端需求

一、要求通过按钮复制一段文字

<script type="text/javascript">
    function copyUrl2() {
        var Url2 = document.getElementById("A").innerText;
        var oInput = document.createElement('input');
        oInput.value = Url2;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        document.body.removeChild(oInput);
        alert('复制成功');
    }
</script>
<div id="A">复制的内容</div>
<input type="button" onClick="copyUrl2()" value="点击复制代码" />
  • 通过创建一个input标签,选中其中内容,复制文本

二、element-ui 怎么在表格头部添加一个Tooltip

  • 通过vue-jsx来渲染表头:
    1.npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx --s
    2.之后在你的.babelrc文件里面修改"plugins": ["transform-runtime", "transform-vue-jsx"]
    3.
  <el-table-column   label-class-name="一个渠道设置好锁定库存 , 其他渠道不能使用该库存"  label="锁定库存" width="150" align="center" :render-header="handleHelp">
</el-table-column>
handleHelp(h,{column}){
        return(
        <el-tooltip class="tooltip" 
        effect="light" 
        placement="top">
        <span slot="content">
           {column.labelClassName}
        </span>
         <span>
            {column.label}
         </span>
        </el-tooltip>
        )
      }
  • 效果图


    image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • babel官网 babel 介绍 Babel 是一个通用的多用途 JavaScript 编译器。通过 Babel ...
    锋享前端阅读 1,863评论 0 10
  • babel官网 babel 介绍 Babel 是一个通用的多用途 JavaScript 编译器。通过 Babel ...
    不得不爱XIN阅读 1,180评论 0 9
  • babel 7 的使用的个人理解 最近看了很多关于babel的使用方法,大部分在一些点上都没有说明白,同时给出的代...
    zshawk1982阅读 21,090评论 14 43
  • 本次我们要做的是编写一个 vue 的 Tag 组件,使用 parcel 结合 tree-shaking 进行打包。...
    BluesCurry阅读 1,957评论 3 2
  • 你会不会心里一直有一个艺术梦? 想象自己, 钢琴十级, 舞蹈惊人, 歌喉了得, 画技超群? 你要的是这些吗? 其实...
    叶小胖阅读 331评论 2 1