精华内容
下载资源
问答
  • vue随机生成二维码

    2019-08-31 17:07:30
    vue随机生成二维码 今天接到一个任务就是在页面加入一个二维码,不同的用户有不同的二维码,搜了很多的资料最后搜到一个比较适合我的业务的 1. npm install qrcodejs2 2.引入代码 html <div id="qrcode" >&...

    vue随机生成二维码

    今天接到一个任务就是在页面加入一个二维码,不同的用户有不同的二维码,搜了很多的资料最后搜到一个比较适合我的业务的

    1. npm install qrcodejs2
    
    2.引入代码 html
    
    <div
       id="qrcode"
    ></div>
    
    3.引入js代码
    
    import QRCode from "qrcodejs2"
    export default {
      data () {
        return {
    
        }
      },
      mounted () {
        this.$nextTick(function () {
          this.qrcode();
        })
      },
      methods: {
        //  生成二维码
        qrcode () {
          var qrcode = new QRCode("qrcode", {
            width: 180,
            height: 180,
          });
          function makeCode () {
            qrcode.makeCode(localStorage.getItem('phone'));
          }
          makeCode();
        }
      },
    
    }
    
    4.css代码
    
    <style lang="less">
    #qrcode {
      margin-top: 15px;
    }
    //二维码居中
    img {
      margin: 0 auto;
    }
    </style>
    
    5.在想要引入的页面进行注册
    
     components: {
        Qrcode
      },
    
    6.组件的完整代码
    
    <template>
      <div>
        <div
          id="qrcode"
          style="margin: 0 auto;"
        ></div>
      </div>
    </template>
    <script>
    /* eslint-disable */
    import QRCode from "qrcodejs2"
    export default {
      data () {
        return {
    
        }
      },
      mounted () {
      //防止报错
        this.$nextTick(function () {
          this.qrcode();
        })
      },
      methods: {
        //  生成二维码
        qrcode () {
          var qrcode = new QRCode("qrcode", {
            width: 180,
            height: 180,
            // text: 'http://localhost:8080/#/index'
          });
          function makeCode () {
          //
            qrcode.makeCode("http://192.168.0.102:80/#/index?code=" + localStorage.getItem('phone'));
          }
          makeCode();
        }
      },
    
    }
    </script>
    <style lang="less">
    #qrcode {
      // width: 160px;
      // height: 160px;
      margin-top: 15px;
    }
    img {
      margin: 0 auto;
    }
    </style>
    
    
    展开全文
  • vue随机生成颜色块

    2021-04-28 16:53:07
    vue随机生成颜色块: 下面展示一些 内联代码片。 // An highlighted block <div :style="{ 'background-color': randomColor(), 'width': '10px', 'height': '10px', 'border-radius': '5px 5px 5px 5px' }"/>

    vue随机生成颜色块:

    下面展示一些 内联代码片

    <div :style="{ 'background-color': randomColor(), 'width': '10px', 'height': '10px', 'border-radius': '5px 5px 5px 5px' }"/>
    
    

    randomColor()

    randomColor () {
      return '#' + Math.random().toString(16).slice(-6)
    }
    

    效果 :

    在这里插入图片描述

    展开全文
  • vue 随机生成uuid

    2021-08-23 17:39:48
    1、安装 npm install uuid 2、在需要使用的页面引入入口文件 import { uuid } from 'vue-uuid'; 3、最后就是使用了 localStorage.setItem('uuid',uuid.v1()) 直接取uuid.v1 就OK了

    1、安装

     npm install uuid

    2、在需要使用的页面引入入口文件

    import { uuid } from 'vue-uuid'; 

    3、最后就是使用了

    localStorage.setItem('uuid',uuid.v1()) 

    直接取uuid.v1  就OK了

    展开全文
  • <script> import SIdentify from '@/components/identify/identify.vue' export default{ data() { return { identifyCode: '', // 生成的验证码 } }, components: { SIdentify }, methods...

    一、验证码组件

    <template>
      <div>
        <div id="codeBox">
          <canvas width="112" height="38" id="verifyCanvas"></canvas>
        </div>
        <img id="code_img" @click="refreshCode">
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          // 验证码加入的随机总内容,可自行加入英文字母
          nums: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
          code: ''
        }
      },
      created() {
      },
      mounted() {
        this.drawCode()
        // 监听父组件触发子组件事件
        this.$on('bridge', (val) => {
          this.refreshCode()
        })
      },
      methods: {
        // 绘制验证码
        drawCode() {
          // 获取HTML端画布
          var canvas = document.getElementById('verifyCanvas')
          // 获取画布2D上下文
          var context = canvas.getContext('2d')
          // 画布填充色
          context.fillStyle = 'cornflowerblue'
          context.fillRect(0, 0, canvas.width, canvas.height)
          // 创建渐变
          var gradient = context.createLinearGradient(0, 0, canvas.width, 0)
          gradient.addColorStop('0', 'magenta')
          gradient.addColorStop('0.5', 'blue')
          gradient.addColorStop('1.0', 'red')
          // 清空画布
          // 设置字体颜色
          context.fillStyle = gradient
          // 设置字体
          context.font = '25px Arial'
          // 生成的验证码数组
          var rand = []
          // 验证码位置
          var x = []
          var y = []
          for (let i = 0; i < 4; i++) {
            rand[i] = this.nums[Math.floor(Math.random() * this.nums.length)]
            x[i] = i * 16 + 20
            y[i] = Math.random() * 20 + 20
            context.fillText(rand[i], x[i], y[i])
          }
          this.code = rand.join('')
          // 触发getCode事件,传值验证码给父组件
          this.$emit('getCode', this.code)
          // 画3条随机线
          for (let i = 0; i < 3; i++) {
            this.drawline(canvas, context)
          }
    
          // 画30个随机点
          for (let i = 0; i < 30; i++) {
            this.drawDot(canvas, context)
          }
          this.convertCanvasToImage(canvas)
        },
        // 随机线
        drawline(canvas, context) {
          // 随机线的起点x坐标是画布x坐标0位置,y坐标是画布高度的随机数
          context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height))
          // 随机线的终点x坐标是画布宽度,y坐标是画布高度的随机数
          context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height))
          // 随机线宽
          context.lineWidth = 0.5
          // 随机线描边属性
          context.strokeStyle = 'rgba(50,50,50,0.3)'
          // 描边,即起点描到终点
          context.stroke()
        },
        // 随机点(所谓画点其实就是画1px像素的线,方法不再赘述)
        drawDot(canvas, context) {
          var px = Math.floor(Math.random() * canvas.width)
          var py = Math.floor(Math.random() * canvas.height)
          context.moveTo(px, py)
          context.lineTo(px + 1, py + 1)
          context.lineWidth = 0.2
          context.stroke()
        },
        // 绘制图片
        convertCanvasToImage(canvas) {
          document.getElementById('verifyCanvas').style.display = 'none'
          var image = document.getElementById('code_img')
          image.src = canvas.toDataURL('image/png')
          return image
        },
        // 刷新验证码
        refreshCode() {
          var parent = document.getElementById('codeBox')
          var codeObj = document.getElementById('verifyCanvas')
          parent.removeChild(codeObj)
          var canvas = document.createElement('canvas')
          canvas.width = '112'
          canvas.height = '38'
          canvas.id = 'verifyCanvas'
          parent.appendChild(canvas)
          this.drawCode()
        }
      }
    }
    </script>
    <style lang="scss" scoped>
    #code_img {
      width: 112px;
      height: 38px;
      cursor: pointer;
      vertical-align: top;
    }
    </style>
    

    二、父组件使用验证码

    <template>
    	<div class="identifybox">
    		<div>
    		  <s-identify @getCode="getIdentifyCode" ref="code"></s-identify>
    		</div>
    		<el-button @click="refreshCode" type='text'>看不清,换一张</el-button>
    	</div>
    </template>
    
    <script>
    	import SIdentify from '@/components/identify/identify.vue'
    	export default{
    		data() {
    			return {
    				identifyCode: '', // 生成的验证码
    			}
    		},
    		components: {
    		    SIdentify
    		},
    		methods: {
    			// 获取验证码
    			getIdentifyCode(val) {
    			  this.identifyCode = val
    			},
    			// 切换验证码(点击文字切换)
    			refreshCode() {
    			  this.identifyCode = ''
    			  // 触发子组件刷新验证码事件
    			  this.$refs.code.$emit('bridge')
    			}
    		}
    	}
    </script>
    
    <style>
    </style>
    

    三、效果图
    在这里插入图片描述

    展开全文
  • 背景  写项目时,每个人的都需要有自己的技能标签,需要将技能标签的背景颜色每一次查看... //添加style为item.color为随机生成的颜色 <li class="lable_item" v-for="(item,index) in skillTagArr" :style
  • vue 随机生成

    千次阅读 2019-04-17 16:38:38
    把标题的颜色设置成随机色 <h4 v-rainbow>标题随机色</h4> 在script写局部自定义指令(如果想要写全局的需要在main.js里面书写) 局部 directives:{ 'rainbow':{ bind(el,binding,vnode){ el....
  • 基于VUE + JS + element-ui制作网页版随机密码生成器工具代码。包含英文、数字、特殊符号、字符、生成长度、生成个数等选择功能。
  • 主要介绍了vue-cli随机生成port源码的方法,文中给大家介绍了vue 随机色生成方法,需要的朋友可以参考下
  • 本篇文章主要介绍了vue生成随机验证码的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 生成随机颜色

    2021-03-22 10:37:24
    getColor() { var str = “#”; //一个十六进制的值的数组 var arr = [“0”,“1”,“2”,“3”... //随机产生0-15之间的一个数 str += arr[num]; //产生的每个随机数都是一个索引,根据索引找到数组中对应的值,拼接到一
  • vue3 随机生成验证码

    2021-09-11 21:52:36
    随机产生字符串,并且随机旋转 for (let i = 0; i ; i++) { // 随机的四个字 const text = state.pool[randomNum(0, state.pool.length)] imgCode += text // 随机的字体大小 const fontSize = randomNum(18, 40) //...
  • vue.js随机密码生成器插件是一款基于VUE+JS+element-ui制作的网页版随机密码生成器工具代码。
  • vue随机头像与昵称

    2021-01-18 17:12:50
    一、随机头像 1.组件 identicon.js(哈希头像生成器) Identicon 在很多地方都可以看到,比如Github,Stackoveflow … 当给定相同的哈希值时,它将产生与GitHub相同的形状和(几乎)相同的颜色。支持PNG和SVG输出格式...
  • vue 生成随机密码 密码生成器 (password-generator) A simple password generator app made with Vue. 用Vue制作的简单密码生成器应用。 View Demo 查看演示 View Github 查看Github 项目设置 (Project setup) ...
  • vue随机姓名

    2019-11-07 15:19:09
    getName(event) { let colors = [‘red’, ‘orange’, ‘green’, ‘blue’, ‘pink’, ‘purple’]; let k = parseInt(Math.random() * colors.length); let color = colors[k]; let names = this.userNameLists;...
  • vue自定义生成随机

    千次阅读 2019-07-17 08:51:23
    // 生成一个随机的颜色 randomColor(min, max) { // let r = this.randomNum(min, max) // let g = this.randomNum(min, max) // let b = this.randomNum(min, max) return 'rgb(' + this.randomNum(min, max)...
  • vue 生成随机密码 Vue骰子 (Vue Diceware) This is simple diceware password generator built using Vue and plain JavaScript. It generates passwords consisting 4 up to 10 words using 4 different word lists...
  • vue-生成随机颜色

    2021-06-28 10:47:32
    生成随机颜色代码为 this.color = rgb(${Math.round(Math.random()*255)},${Math.round(Math.random()*255)},${Math.round(Math.random()*255)}); <!DOCTYPE html> <html lang="en"> <head> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,402
精华内容 3,760
关键字:

vue随机生成

vue 订阅