- 博客(39)
- 收藏
- 关注
RSS订阅原创 vue2项目兼容IE11及以上
因为测试使用的IE11，若需要支持IE10也可以试试此方法一、项目版本情况"vue": "^2.6.14",//vue版本"@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-eslint": "~5.0.0","@vue/cli-service": "~5.0.0",二、解决句法问题报错内容如下：怀疑是es6没有转译es5,使用的ant-design-vue框架的亦不兼容1.安装babel-polyfillnpm install b
2022-06-22 16:22:53
1501
原创 vue3+ts+webpack 搭建+环境配置+路由
一、搭建（vue.js+webpack的项目）1.vite//vue cli 版本在 4.5.0 以上--我用的5.0.4npm install -g @vue/clivue -V//创建项目vue create 项目名字//安装依赖运行项目cd 项目名//注意node版本，我用的v16.14.2npm install2.webpack//vue cli 版本在 4.5.0 以上--我用的5.0.4npm install -g @vue/clivue -V//创建项目
2022-05-18 10:55:51
4062
2
原创 ant design vue 表单在提交和编辑页面的使用
1使用因为考虑加载速度，框架不是全局引用，需要什么就引入需要的组件。1.1引入import Vue from 'vue'import {Row, Col, Input, Button, Icon, Form, Avatar, Skeleton, Empty, Alert, Popover, Checkbox} from 'ant-design-vue';Vue.use(Col);Vue.use(Input);Vue.use(Icon);Vue.use(Button);Vue.use
2021-07-11 13:21:30
1709
原创 使用vue-clipboard2复制的方法
1.NPMnpm install --save vue-clipboard22.页面引入import VueClipboard from 'vue-clipboard2'3.html+dom<img class="copyIconSvg" src="@/images/svgIcon/copyIcon.svg" alt="" ref="copyButton" v-clipboard:copy="detailPOC.poc_code" //需要复制的内容 v-clipbo
2021-06-30 17:07:15
197
原创 Vue-Codemirror代码块编辑器的使用方法
1.NPMnpm install vue-codemirror --save2.官方地址https://www.npmjs.com/package/vue-codemirror3.页面引入和使用方法有多种语言，我选择的是python主题3.1 html<codemirror @blur="inputChange($event)" v-model="defaultPocVal" :options="options"></codemirror>3.2
2021-06-30 16:47:55
1107
原创 vue中使用vditor（发布，编辑，详情回显、上传图片+粘贴图片回显问题，表情的处理）
1.使用方法1.html安装npm install vditor --savevue页面<div id="markdownContent"></div>2.dom引入import Vditor from "vditor"import "vditor/dist/index.css"mounted() { this.getToken() this.vditorFun()},methods: {//编辑器 vditorFun() {
2021-02-23 16:11:00
6686
4
原创 vue使用mavon-editor编辑器，外链保存到本地，且A标签外链和图片外链的处理
说明此篇文章是作为我以前的编辑器上传图片的基础上进行的图片外链的处理，及A标签外链和图片外链冲突的问题。因此，就不放引入的详细代码了，如有需要，请点击此连接查看以前的文章上传async $imgAdd(pos, $file, bool, type, index) { let self = this; self.saving = true; let fullImgPath; if (bool) { const res = await upl
2021-02-01 14:18:47
2629
转载 如何进行seo优化要点总结
一、搜索引擎工作原理当我们在输入框中输入关键词，点击搜索或查询时，然后得到结果。深究其背后的故事，搜索引擎做了很多事情。在搜索引擎网站，比如百度，在其后台有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的，这些程序称之为“搜索引擎蜘蛛”或“网络爬虫”。这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入数据
2021-01-11 14:46:32
3385
原创 jquery和vue复制内容功能（vue引用自其他文章）
文章目录jquery一、奖品列表复制某个奖品的物流单号（存在每行都有物流信息的可能）1.html1.dom二、单个信息复制1.html2.domvuejquery一、奖品列表复制某个奖品的物流单号（存在每行都有物流信息的可能）1.html<c:if test="${ prize.canShowExpress }"> <c:if test="${ prize.isExpress }"> <button type="button" title="复制物流单号" cl
2020-12-16 17:10:53
190
原创 amazeui.address结合单选，实现添加多个地址并设置默认地址
前言使用amazeui的地址插件和单选效果，实现添加多条地址，并设置默认的地址一、效果图二、html页面1.主页面1.1引入amazeui相关css和js<!--am--><link rel="stylesheet" type="text/css" href="css/dashboard/amazeui.css" /><link rel="stylesheet" type="text/css" href="css/dashboard/amazeui.addr
2020-12-16 15:25:47
437
原创 element UI 表格table多个数值进行排序筛选
效果图1.表格html部分<el-table v-loading="loading" element-loading-text="加载数据中" :data="tableData" border //状态筛选 @filter-change="handleFilterChange" //分数和时间筛选 @sort-change="changeTableSort" :row-class-name="addRowClass" //全选 @selection-c
2020-12-14 17:10:21
4181
原创 移动端滚动加载方法，及防止重复加载
在移动端滚动加载时，因为最开始用的Window.onscroll导致在不同手机滚动效果不同（分辨率大的滚动加载没有效果，分辨率小的滚动重复加载）mounted() { window.addEventListener('scroll', this.lazyLoading); // 滚动到底部，再加载的处理事件}beforeDestroy () { window.removeEventListener('scroll', this.lazyLoading); //离开页面时移除
2020-12-10 10:56:52
891
1
原创 vue使用html2canvas生成海报过程中遇到的坑，及生成二维码
html2canvas安装cnpm install html2canvas页面引入import html2canvas from "html2canvas";1：因需求要点击生成就已经成为的图片，而html2canvas对于display为none的生产不了解决方法：在需要生成海报的页面，布局好海报的html样式，并设置z-index: -12：使用上面那样的方式，当页面滚动一些距离后，生成的图片不完整解决方法：data() { return { dataImg:
2020-12-04 17:27:58
2513
原创 element-ui 组件DateTimePicker使用（选择今天及以后的范围+开始和结束时间分开传给后台+回显+编辑页面改变回显问题）
vue文件html<el-form-item class="" label="活动时间：" prop="activityTime"> <el-date-picker v-model="activityForm.activityTime" type="datetimerange" @change="timeChange" value-format="yyyy-MM-dd HH:mm:ss" :clearable="false" rang
2020-12-02 17:57:53
2978
转载 移动端踩坑之旅-IOS下FIXED、软键盘相关问题总结
一、背景先看一下要做什么，也就是一个文章评论的版块，下面依次有输入框，点赞，收藏等 。大概长下面这个样子：要求也很常规，吸底，输入评论提交。那么上来就输代码吧。二、ios下fixed布局关于这种吸底操作，上来就直接选用fixed了，这种场景舍他其谁。初步的布局就是这个样子了。（因为我是用的react，jsx的写法粘贴上来简直让人崩溃，就随手写一段代码代表下，勿怪）<body> <div class='top'></div> <div class=
2020-11-23 14:50:32
731
原创 vue使用element ui---Table 表格导出Excel功能
1.html页面<el-table ref="multipleTable" :data="tableData" border :row-key="getRowKeys" //状态条件筛选事件 @filter-change="handleFilterChange" //时间排序筛选事件 @sort-change="changeTableSort" //全选事件 @selection-change="handleSelecti
2020-10-12 14:44:59
2531
原创 vue使用element ui---Table 表格的全选、单选翻页亦是选中状态
1.页面<el-table ref="multipleTable" :data="tableData" border :row-key="getRowKeys" //状态条件筛选事件 @filter-change="handleFilterChange" //时间排序筛选事件 @sort-change="changeTableSort" //全选事件 @selection-change="handleSelectionCh
2020-10-12 13:50:41
2907
原创 tui.editor所见即所得编辑器的使用
1. 官网网址官网：https://nhn.github.io/tui.editor/latest/tutorial-example01-editor-basicgit: https://github.com/nhn/tui.editor/releases2. vue中使用cnpm下载及引用npm install --save @toast-ui/editor2.1 页面引用2.1.1 首先，您需要添加将在其中创建TOAST UI Editor（以下称为“ Editor”）的容器元素。<
2020-10-12 11:00:28
2571
转载 vue-cli如何添加多种环境变量
目前webpack(vue-cli) 打包有两种变量，development, productor, 如何添加一个 test的测试环境呢vue-cli 3.0vue-cli3.0简化了业务需求，没有那么多额外的配置，目前想改变环境变量，官方默认如此, 网友1官方默认两种类型 develpoment production,而我们实际开发过程中，会有本地开发，测试环境，正式环境等等，因而这两种环境变量是不够的，因而需要第三种乃至多种变量环境基于vue-cli3.0进行配置You can specify
2020-09-24 10:17:58
695
原创 jquery和vue复制功能
mavon-editor在详情页生成目录html新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入html你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以
2020-09-21 17:40:34
437
原创 vue自写全选和取消全选功能，带换一批功能
1.html<div class="inereContent_style"> <div class="box_check"> <div> <nut-checkbox v-model="checkedInterest" @change="checkAllChange" size="small" :animation="false">
2020-08-27 13:52:28
450
转载 vue-如何检查用户是否离线，并在用户恢复联机后立即显示div
目前，我正在使用定时循环中的一个函数来检查用户是否脱机：created() { setInterval(() => { this.checkOnline(); }, 30000);}方法：checkOnline(){ this.onLine = navigator.onLine ? true : false;}有没有一种不用计时器就能检测到这一点的方法？另外，我试图显示一个1秒的警报，以告诉用户，他们已恢复在线。如果这个.online为true，应该
2020-08-18 13:52:23
843
原创 vue自定义下拉菜单，除了指定按钮可以展开和关闭，点击其他地方隐藏
1.html<div class="input_box"> <span class="articleTypeBox">{{categoryCount}}</span> <div class="choiceTypeBox"> <span class="activeMenus" v-if="choiceType"> <img src="~@/images/article/typeDefualt.png" @click
2020-08-07 14:29:48
1533
原创 vue 写点击展开及收起隐藏需要隐藏的div
1.html<span class="screenSelfBox" :title="screenStatus ? '退出全屏':'全屏编辑'" :class="{'screenSelfBoxDown':screenStatus == true}" @click="fullScreen()"></span>2.dom<script>export default { data () { return{ screenStatus:false,
2020-08-06 11:33:42
1468
原创 纯CSS制作空心箭头,改mavon-editor编辑器工具栏图标
1.html我是改mavon-editor编辑器工具栏图标<button type="button" title="全屏编辑 (F10)" aria-hidden="true" class="op-icon fa fa-mavon-arrows-alt" style=""></button>2.css公用css.fa-mavon-arrows-alt:before,.fa-mavon-compress:before{ content: ''}.v-note-wr
2020-08-05 17:24:37
406
转载 纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）
1.三角形<div class="box"></div><style>.box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid red;}</style>
2020-08-05 17:16:55
944
转载 router-link 返回上页 和 新窗口打开链接
1、如果使用了Vue-router的话，就可以用this.$router.go（-1）实现返回；2、如果没使用vue-router，就可以用window.history.go（-1）实现返回效果。可以 定义方法 @click=“goback”methods:{ goback(){ this.$router.go(-1);//返回上一页 } }也可直接简写：@click="$router.back(-1)"3.跳转链接到新页面在te
2020-08-04 16:50:02
1341
原创 element-ui表单验证的某一个校验的关闭和开启
1.html<el-select class="articleColumn" @change="typeChange" v-model="type" placeholder="请选择类型"> <el-option v-for="item in typeValues" :key="item.value" :label="item.label" :value="item.value"> </el-option></el-select>
2020-08-03 15:06:03
3291
原创 mavon-editor上传图片功能
1.html<mavonEditor ref="md" class="newContent" :boxShadow = "false" :toolbars="toolbarsValue" :previewBackground = "'#ffffff'" v-model="content" :imageFilter = "uploadBefore" :externalLink="false" @imgAdd="$imgAdd" @change
2020-08-03 14:53:57
2560
原创 判断滚动到指定的div位置相关内容是否显示
1.html<div class="showCont_comment"> <div class="up_down_pageBox"> 页面指定的div </div></div><div class="comment_lable_box floatInfoBox">需要展示的内容</div>2.样式.floatInfoBox{ position: fixed; bottom: 0; width:
2020-07-28 16:59:02
501
原创 封装--自定义Ant骨架屏布局并实现相应功能
1.加载页面引入封装的骨架屏组件<div v-if="isLoad"> <article-skeleton></article-skeleton></div><div v-else>此处为加载完成后需要显示的内容</div>import articleSkeleton from '@/components/common/articleSkeleton'data () { return { i
2020-07-21 17:40:06
1011
原创 封装上传图片大于2M按比例压缩上传
1.封装的js文件import {baseUrl, imgBaseUrl, captchaWebKey} from '@/config/env'import {msgToast} from '@/config/utils.js'const local = {}//base64 转 Blob 格式 和file格式---引用于：http://www.45fan.com/article.php?aid=19122395289136679857867305local.base64UrlToBlob =
2020-07-17 17:50:12
522
转载 Vue实现判断不同手机、浏览器及微信内核
<img :src="shareImg" alt="" width="100%" height="auto">data(){ return{ shareImg:"/static/img/share-Android.png", }},mounted() { var b = {//判断浏览器内核 v: function () { var u = navigator.userAgent, app = navigator.appVersion;
2020-07-15 15:50:41
1644
原创 vue自写折叠面板
<div class="common_content listNoticeContent" v-if="noticeList && noticeList.length > 0"> <div class="noticeLiBox"> <div class="demo-list-box" v-for="(message, index) in noticeList" :key="index"> <h4 class="list.
2020-07-15 14:35:07
603
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人