- 博客(13)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 使用 style-resources-loader 在vue项目中使用css预处理器
一. 安装vue add style-resources-loader二. 使用安装完成后会自动生成一个 vue.config.js 文件module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [] } }}然后写入你css预处理器的文件const path = require("path")modu
2022-01-07 15:51:44
697
原创 使用vue-cli创建一个vue3项目
1. cmd打开命令窗口2. 输入命令vue create 项目名称3. 自定义创建4. 选择你需要选项5. 选择vue3版本6. 选择路由模式7. 选择css预处理器8. 依赖插件或者工具的配置文件怎么保存9. 是否记录以上操作10. 等待安装11. 安装成功 cd到项目里面 启动即可...
2021-12-30 15:40:15
628
原创 解决浏览器输入框在记住密码后改变颜色问题
谷歌浏览器在记住密码之后然后输入框的颜色会改变在main.js引入的css文件中写入/*解决浏览器输入框在记住密码后改变颜色问题*/input:-webkit-autofill { /* 自动填充文字颜色 */ -webkit-text-fill-color: #ffe1b9 !important; transition: background-color 5000s ease-in-out 0s;}然后的效果...
2021-12-27 10:11:31
1328
原创 使用 qrcodejs2 和 html2canvas 生成二维码并且下载
一. 安装npm i qrcodejs2npm i html2canvas二. 在使用的页面中引入import QRCode from "qrcodejs2";import html2canvas from "html2canvas";三. html <!-- 二维码 --> <div class="erweima" ref="qrCodeWrapper" id="qrcode"></div> <a-button type="primar
2021-12-10 13:44:49
446
原创 使用 qrcodejs2 创建二维码
一. 安装npm i qrcodejs2二. 页面<template> <div class="about"> <!-- 二维码容器 --> <div class="erweima" ref="qrCodeWrapper" id="qrcode" style="width: 210px; margin: 15px auto" ></div> </div&g
2021-12-10 12:16:11
166
原创 使用 vue-awesome-swiper 制作简单的轮播图
一. 安装 vue-awesome-swipernpm install vue-awesome-swiper@3 --save-dev // 安装指定版本二. 封装轮播组件1. HTML<template> <div class="swipe"> <div class="title">主讲人</div> <div class="recommendPage"> <swiper :options=
2021-09-08 14:34:06
254
原创 使用 html2canvas 制作图片
一. 引入 html2canvasnpm i html2canvas二. 在页面中引入import html2canvas from "html2canvas";三. 在页面中使用1. HTML<div class="qr_code" v-if="img"> <img :src="img" /></div><div id="qianduanwz" v-if="!img"> <img class="bgi" src="../
2021-09-08 14:17:09
153
原创 vue图片点击放大预览v-viewer
1. 安装npm install v-viewer --save2. 全局引入在 main.js 中引入import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tool
2021-08-17 13:54:06
118
原创 工作中遇到的bug收集
1. AntDesign 组件报错1.1 warning.js?2149:7 Warning: [antdv: DatePicker] value provides invalidate moment time. If you want to set empty value, use null instead.原因是使用AntDesign a-range-picker 组件传入带时分秒时间格式需要使用moment()转化一下<a-range-picker :value="rangePi
2021-08-05 15:27:00
110
原创 AntDesign vue 结合 vuedraggable 实现拖拽排序功能
1. 首先引入 vuedraggable 第三方插件npm i -S vuedraggable2. 在需要使用的页面引入import draggable from "vuedraggable";3. 在页面中使用<template> <!-- 章节管理组件 --> <div> <div class="list" v-for="(item, index) in catalogueArr" :key="item.id">
2021-08-04 11:26:59
2732
原创 Ant Design 结合 vue-cropper 实现上传图片裁剪功能
1. 引入 vue-cropper 第三方插件npm install vue-cropperyarn add vue-cropper2. 在 main.js 全局进入import VueCropper from 'vue-cropper'Vue.use(VueCropper)3. 封装成组件3.1 上传组件<template> <div class="ant-upload-preview"> <div class="avatatImg">
2021-08-03 11:25:53
1915
1
原创 Antdesig 配合 Qiniu-JavaScripe-SDK 上传音视频
1. 引入 Qiniu 第三方插件npm install qiniu-js2. 在组件中引入import * as qiniu from "qiniu-js";3. 封装成组件<template> <div class="ft-plant-upload-button"> <button v-if="!showProgress" class="upload-btn" type="ghost" :disabl
2021-08-03 10:29:24
202
原创 vue 使用 clipboard 复制粘贴文字
首先安装第三方插件clipboardnpm i clipboard --save 点击按钮复制文字然后在需要的页面引入import Clipboard from "clipboard";在页面中使用html<a id="copy_courseNo" :data-clipboard-text="record.courseNo" type="primary" class="margin_right20" @click="cop..
2021-08-02 17:49:01
333
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人