精华内容
下载资源
问答
  • vue-copy.zip

    2021-07-01 11:15:25
    vue-copy.zip
  • 指令 (Directives) 是带有 v- 前缀的特殊特性。这篇文章主要介绍了Vue 自定义指令实现一键 Copy的功能,需要的朋友可以参考下
  • 1. 创建v-copy.js文件 import Vue from "vue";...Vue.directive("copy", { bind(el, { value }) { el.$value = value; el.handler = () => { el.style.position = 'relative'; if (!el.$value) { /

    使用自定义指令创建一个点击复制文本功能

    1. 创建v-copy.js文件
    import Vue from "vue";
    // 注册一个全局自定义复制指令 `v-copy`
    Vue.directive("copy", {
      bind(el, { value }) {
        el.$value = value;
        el.handler = () => {
          el.style.position = 'relative';
          if (!el.$value) {
            // 值为空的时候,给出提示
            alert('无复制内容');
            return
          }
          // 动态创建 textarea 标签
          const textarea = document.createElement('textarea');
          // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域
          textarea.readOnly = 'readonly';
          textarea.style.position = 'absolute';
          textarea.style.top = '0px';
          textarea.style.left = '-9999px';
          textarea.style.zIndex = '-9999';
          // 将要 copy 的值赋给 textarea 标签的 value 属性
          textarea.value = el.$value
          // 将 textarea 插入到 el 中
          el.appendChild(textarea);
          // 兼容IOS 没有 select() 方法
          if (textarea.createTextRange) {
            textarea.select(); // 选中值并复制
          } else {
            textarea.setSelectionRange(0, el.$value.length);
            textarea.focus();
          }
          const result = document.execCommand('Copy');
          if (result) alert('复制成功');
          el.removeChild(textarea);
        }
        el.addEventListener('click', el.handler); // 绑定点击事件
      },
      // 当传进来的值更新的时候触发
      componentUpdated(el, { value }) {
        el.$value = value;
      },
      // 指令与元素解绑的时候,移除事件绑定
      unbind(el) {
        el.removeEventListener('click', el.handler);
      },
    });
    
    
    2. 引入v-copy
    //  main.js 根据文件的相关路径引入v-copy.js文件
    import "xx/v-copy.js"; // v-copy 指令
    
    3. 在标签使用v-copy
     <span v-copy="复制内容">复制</span>
    
    展开全文
  • 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view...
  • npm i vuepress-plugin-one-click-copy -D # or use yarn yarn add vuepress-plugin-one-click-copy -D 用法 编写vuepress配置 module . exports = { plugins : [ 'one-click-copy' ] } 选项 该插件支持以下配置。 ...
  • Vue深度复制深度copy

    千次阅读 2019-03-27 12:28:24
    JSON.stringify(value [, replacer] [, space]) 现将引用类型的数据转成字符串类型,然后copy字符串之后转成引用类型
    JSON.stringify(value [, replacer] [, space]) 
    

    现将引用类型的数据转成字符串类型,然后copy字符串之后转成引用类型

    展开全文
  • paste-copy 一个基于vue的ui
  • vue.js实现一键copy功能

    千次阅读 2019-09-16 16:13:37
    1,首先建一个copyComm.js的文件 const vCopy = { // 名字爱取啥取啥 /* bind 钩子函数,第一次绑... value: 传给指令的值,也就是我们要 copy 的值 */ bind(el, { value }) { el.$value = value; // 用一个...

    在这里插入图片描述
    1,首先建一个copyComm.js的文件

    const vCopy = { // 名字爱取啥取啥
      /*
        bind 钩子函数,第一次绑定时调用,可以在这里做初始化设置
        el: 作用的 dom 对象
        value: 传给指令的值,也就是我们要 copy 的值
      */
      bind(el, { value }) {
        el.$value = value; // 用一个全局属性来存传进来的值,因为这个值在别的钩子函数里还会用到
        el.handler = () => {
          if (!el.$value) {
            // 值为空的时候,给出提示,我这里的提示是用的 ant-design-vue 的提示,你们随意
           console.log('无复制内容');
            return;
          }
          // 动态创建 textarea 标签
          const textarea = document.createElement('textarea');
          // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域
          textarea.readOnly = 'readonly';
          textarea.style.position = 'absolute';
          textarea.style.left = '-9999px';
          // 将要 copy 的值赋给 textarea 标签的 value 属性
          textarea.value = el.$value;
          // 将 textarea 插入到 body 中
          document.body.appendChild(textarea);
          // 选中值并复制
          textarea.select();
          textarea.setSelectionRange(0, textarea.value.length);
          const result = document.execCommand('Copy');
          if (result) {
            console.log('复制成功');
          }
          document.body.removeChild(textarea);
        };
        // 绑定点击事件,就是所谓的一键 copy 啦
        el.addEventListener('click', el.handler);
      },
      // 当传进来的值更新的时候触发
      componentUpdated(el, { value }) {
        el.$value = value;
      },
      // 指令与元素解绑的时候,移除事件绑定
      unbind(el) {
        el.removeEventListener('click', el.handler);
      },
    };
    
    export default vCopy;
    
    

    2,在建一个directives.js文件来注册所有的全局指令

    import copy from './copyComm.js';
    // 自定义指令
    const directives = {
      copy,
    };
    // 这种写法可以批量注册指令
    export default {
      install(Vue) {
        Object.keys(directives).forEach((key) => {
          Vue.directive(key, directives[key]);
        });
      },
    };
    
    

    3,在main.js注册

    import Vue from 'vue';
    import Directives from './directives';
    
    Vue.use(Directives);
    

    4,vue文件使用

    <template>
      <div >
        <button v-copy="copyText">拷贝</button>
      </div>
    </template>
    
    <script>
      export default {
        data(){
          return {
            copyText:'要copy的内容'
          }
        },
        methods: {
          init () {
          },
        },
        watch: {},
        props: [],
        components: {},
        computed: {},
        mounted () {
          _this = this;
          _this.init();
        },
      }
    </script>
    
    
    展开全文
  • springboot 整合vue遇到的坑 @GetMapping({ "{appId:^(?:(?!assets).)*$}/{device}" }) public String index1() { return "index"; } 由于/{appId}/{device}/{phase} 加载静态文件/assets/css/app.af723687.css ...

    springboot 整合vue遇到的坑

    @GetMapping({ "{appId:^(?:(?!assets).)*$}/{device}" })
    public String index1() {
    	return "index";
    }
    

    在这里插入图片描述
    由于/{appId}/{device}/{phase} 加载静态文件/assets/css/app.af723687.css 与这个路由匹配所以 返回的都是index.html
    所以用{appId:^(???!assets).)*$}/{device}/{phase}将assets的路由过滤掉

    还需配置这个
    @EnableWebMvc
    @Configuration
    public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
    

    // registry.addResourceHandler("/assets/").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX+ “//assets/”);
    registry.addResourceHandler("/assets/
    ").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX+ “/templates/assets/”).setCacheControl(CacheControl.noCache());
    registry.addResourceHandler("/img/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX+ “/templates/img/”);
    super.addResourceHandlers(registry);
    }
    }

    .setCacheControl(CacheControl.noCache());是必须加的

    展开全文
  • 老项目业务代码写的自定义指令,想在指令里面获取vue实例,来提示国际化字段。直接打印this是不行的。需要在bing()里写上第三个参数 const copy = { bind(el, { value }, vNode) { el.$value = value; el....
  • vue import VueClipboard from 'vue-...button v-clipboard:copy="text" v-clipboard:success="onCopy">复制</button> 如果想要复制的内容保留原格式或换行,这里复制的text就要用模板字符串 mp wx.set...
  • -vue-trello-copy-源码

    2021-04-20 00:14:59
    特雷洛维 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
  • ant-design-vue-pro 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 运行单元测试 yarn test:unit 整理和修复文件 yarn lint 自定义配置 请参阅。
  • 刚学vue的时候,对这个指令(directives)很陌生,然后通过文档和项目的积累,想必大家对指令(directives)也有了一定的了解,今天就带大家学习一下自定义指令。 指令是啥 官网是这么说的 指令 (Directives) 是带...
  • 可以引用到input标签中自带的copy方法。 如图所示,当我们点击复制按钮就可以赋值到我们的电脑缓存中,在execl表格中crtl+v就可以做到粘贴。 复制到execl的结果如图所示: 那么问题来了,怎么通过代码实现呢? ...
  • 1、npm install copy-webpack-plugin@5.0.0 (其他版本可能不适用) 2、build/webpack.prod.conf.js 添加: const CopyPlugin=require('copy-webpack-plugin') plugins:[ ... new CopyPlugin([ { form:'...
  • Vue 点击复制(copy)功能

    2021-02-24 16:46:06
    'success': 'primary'" @click="copyLink('http://xxx.com')"> <span>复制</span> <i v-if="successCopy" class="el-icon-circle-check"></i> </el-button> <!-- select()...
  • class="el-icon-copy-document" @click="copyId(item0.tid)" ></i> //复制父订单号 copyId(id) { //创建input标签 var input = document.createElement('input') //将input的值设置为需要复制的内容...
  • vue

    千次阅读 2018-12-01 14:12:53
    ### 什么是Vue.js + Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex) + Vue.js 是前端的**主流...
  • vue-clipboard2在vue的created生命周期中直接调用copyText方法报错 先说现象:在created生命周期中会进入reject状态(被catch到),不在生命周期的方法中调用而通过click事件来调用会正常进入resolved状态(成功进入...
  • Vue vue生命周期

    万次阅读 多人点赞 2019-01-07 22:14:50
    + 什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! + [生命周期钩子]( https://cn.vuejs.org/v2/api/ #选项-生命周期钩子):就是生命周期事件的别名而已...
  • 大家好,在网上看到过很多vue源码的解析,大多是copy和摘抄的,少有自己的理解,所以下决心花时间整理一遍自己对vue源码的理解。我只是一个普普通通的码农,如果本文有写的不对之处,希望各路大神指正,谢谢! vue...
  • 下载MongoVUE http://yunpan.cn/csSvdRKkzf5Kg  提取码 6fb7
  • vue build报copy-webpack-plugin] unable to locate异常的解决方法
  • // 绑定点击事件,就是所谓的一键 copy 啦 el . addEventListener ( 'click' , el . handler ) ; } , // 当传进来的值更新的时候触发 componentUpdated ( el , { value } ) { el . $value = ...
  • Vue 自定义指令合集 (文本内容复制指令 v-copy) 我们常常在引入全局功能时,主要都是写于 js 文件、组件中。不同于他们在使用时每次需要引用或注册,在使用上指令更加简洁。 今天主要实现的是一个复制文本指令*v-...
  • vue/cli 3集成Cesium使用copy-webpack-plugin插件报错报错内容尝试修改解决办法界面效果 报错内容 ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,444
精华内容 6,177
关键字:

copy事件vue

vue 订阅