Demo
fighting Ably!
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Demo_canvas通过矩形虚线框设计立体图形
1. 实现效果2. 实现代码<template> <div> <canvas id="canvas" :width="1000" :height="1000"></canvas> </div></template><script>export default { data() { return { offsetVal: 0, startX: 0, s原创 2021-09-14 09:53:50 · 431 阅读 · 0 评论 -
Demo_使用canvas在Vue中绘制蚂蚁线(Ps中选择图形时出现的可动的虚线)
1. 需求效果需要一个蚂蚁线,周围边框可动,效果如下:2. 实现代码<template> <div> <canvas id="canvas" width="200" height="200"></canvas> </div></template><script>export default { data() { return { offsetVal: 0, };原创 2021-09-13 17:10:21 · 1147 阅读 · 0 评论 -
Vue实例——使用canvas封装polyline组件绘制一个五角星
1. 需求在看高德API时,发现有一个polyline组件,通过接收点的坐标数组,来绘制折线,正在看canvas API,就让我们一起试试吧。2. 实施思路:首先子组件需要接收父组件传递进来的点的数组,根据canvas API中的moveTo/lineTo/stroke来进行绘制2.1 封装子组件<template> <div class="polylinecanvas"> <canvas id="polyline" :width="ctxWidth" :原创 2021-09-13 10:40:34 · 927 阅读 · 0 评论 -
js_滚动播放
写的挺好哒,留着大佬的代码观摩学习原文转载 2021-05-12 18:02:55 · 105 阅读 · 0 评论 -
扫码预览—根据预览地址生成二维码
1. 需求根据请求获得到的预览地址,生成一个二维码,用户可以扫码跳转至相应地址2. 实现-qrcodejs22.1 第一步:安装yarn add qrcodejs22.2 第二步:在页面中引入import QRCode from 'qrcodejs2'2.3 第三步:使用我在vue中使用,引入后,在mounted中打印了一下QRCode,结果如下ƒ (el, vOption) { this._htOption = { width : 256, height : 256,原创 2021-05-11 15:49:50 · 697 阅读 · 0 评论 -
Vue3-封装table组件
在使用ant-design-vue中曾经使用过table组件,所以想着自己封装一个组件尝试一下,这是一个简易版本1. 相关知识点组件传值插槽(具名插槽、作用域插槽)vue3 setup2.封装子组件,按照要求规定参数封装一个名为Ttablede组件,该组件接收两个参数,分别是columns和dataSource2.1 子组件:接收参数,按数据提取动态具名插槽名子组件:接收父组件传入的参数,并将传入的参数进行处理,提取出slot插槽值,用于动态设置具名插槽import {compute原创 2021-04-25 14:38:12 · 6774 阅读 · 1 评论 -
Demo_Vue+JavaScript实现轮播图功能
1.背景开发需求,需要在某个位置放置轮播图1.1 要求每3秒自动播放可以点击切换上下页2.实现2.1 普通类型2.1.1 实现思路封装成一个轮播图组件,在多个位置引用时可以直接使用接收轮播图数组 banners默认显示第一张图片只保留一个img,切换src属性,变量curBanner用于赋值给src监听当前所在的图片索引curIndex,执行轮播图方法startNormalPlay定时器播放,每3s切换图片,将数组索引的图片地址赋值给curBanner,并将索引curInde原创 2021-04-08 16:56:09 · 344 阅读 · 0 评论 -
Demo_Flex布局中遇到的问题
1.使用场景:左右布局使用flex布局,想要实现右侧宽度固定,左侧宽度自适应2.实现方式:flex布局eg:简单html<div class="parent"> <div class="left-child" /> <div class="right-child" /></div>简单css.parent{ display:flex;}.right-child{ width:60px; flex-shrink:0;}.left原创 2021-01-22 15:21:44 · 133 阅读 · 1 评论 -
Demo_Vue中某个页面部分内容实现滚动播放功能
1.简述在开发过程中,有这样一个需求,A页面中有一个列表,列表的内容可以滚动播放。1.1 第一步:因为列表中每个元素等高固定,所以可以给列表设置overflow:scroll属性,并且列表有一个固定的高度,所有的内容在其中滚动。代码如下:HTML: <ul class="botDesc-right-consult-list" @scroll.passive="getListScroll($event)"原创 2021-01-14 14:30:17 · 1139 阅读 · 2 评论
分享