随笔分类 - vue
摘要：1. 概述 1.1 说明 在vue项目中，存在直接前端访问某一服务/硬件等情况，一般使用axios/fetch的get方法去访问（服务端允许跨域访问）获取拿到对应信息；但在访问硬件(如身份证读取器)时，本地服务访问与项目服务跨域时，接口访问还是存在跨域问题，此时使用JSONP访问来解决跨域问题； 2
阅读全文
摘要：1. 概述 1.1 说明 在表单中，在input输入框中输入内容后进行回车操作，会直接整个页面进行刷新；此问题因为是input回车操作时直接进行了表单提交操作(回车导致form表单提交)，若想不进行页面刷新，则需组织表单提交操作。 2. 代码 2.1 表单代码 <template> <Form re
阅读全文
摘要：1. 概述 1.1 说明 项目中为了保证图片展示效果以及分辨率高度匹配，需对图片的尺寸、大小、类型等进行控制；最大限度保证图片在网站、小程序、app端的展示效果保持一致。 1.2 思路 使用vue-cropper进行图片裁剪功能，使用iview组件Upload进行图片上传。 1.2.1 功能选择 使
阅读全文
摘要：1. 概述 1.1 说明 有时需要对标签页上的标签内容进行自定义，此次自定义标签页内容后增加按钮操作。可通过按钮进行处理其他设置或信息。 2. 代码 2.1 页面处理 <template> <Tabs :value="tabSelect" @on-click="tabClickSetting"> <
阅读全文
摘要：1. 概述 1.1 说明 PC项目中的经常会有视频播放功能，播放一些课程视频或者直播回放等；而h5的video标签支持的视频格式为MP4、WebM、Ogg；而有些视频的格式为m3u8，此时需要使用video.js插件进行处理。 1.1.1 备注 m3u8是一种基于HTTP Live Streamin
阅读全文
摘要：1. 概述 1.1 说明 PC项目中的经常会有视频播放功能，播放一些课程视频或者直播回放等；视频有时是单个视频有时是多个视频，多个视频时通过点击播放列表中的某一项进行播放对应视频信息。 2. 代码 2.1 页面处理 视频播放标签使用h5中的<video>，当需要播放的视频列表数量大于1时，显示视频列
阅读全文
摘要：1. 概述 1.1 说明 PC项目中表格头部固定，表格内容信息循环滚动展现，使用滚动插件vue-seamless-scroll进行处理。 1.2 安装 npm install vue-seamless-scroll --save 1.3 使用 1.3.1 入口文件引入 import vueSeaml
阅读全文
摘要：1. 概述 1.1 说明 PC项目中的页面中有时需要有页面内容匹配高亮展示效果，例如查询时关键词在结果中高亮。 1.2 思路 使用正则匹配替换，然后把高亮展示内容进行样式处理。 2. 代码 2.1 页面处理 <template> <span v-html="queryTitleLight(data.
阅读全文
摘要：1. 概述 1.1 说明 项目中需要对某个人的人际关系进行展示，故使用echarts中的关系图进行处理此需求。 2. 代码 2.1 代码示例 2.2 结果展示
阅读全文
摘要：1. 概述 1.1 说明 better-scroll是一款重点解决移动端(已支持PC)各种滚动场景需求的插件。例如淘宝聚划算中的类型选择(女装/家纺/生鲜美食等)，没有滚动条显示却实现了滚动功能。 1.2 better-scroll安装 npm install better-scroll --sav
阅读全文
摘要：1. 概述 1.1 说明 在项目中，会需要使用富文本编辑器去编辑或保存文档、图片、视频等信息去描述某一个物品的详细信息与介绍。可使用vue的图文编辑vue2-editor去处理这些事情。 1.2 vue2-editor安装 npm install vue2-editor --save 安装至项目中
阅读全文
摘要：1. 概述 1.1 说明 在项目过程中，会有很多重复功能在多个页面中处理，此时则需要把这些重复的功能进行单独拎出，编写公用组件(控件)进行引用。在VUE中，组件是可复用的VUE实例，此时组件中的data必须是一个函数，因为data是一个函数时，每次引用此组件时相当于重新对返回对象进行独立的拷贝(实例
阅读全文
摘要：1. 概述 1.1 说明 在开发过程中，有时候需要导出某数据表格(excel)以便客户使用，使用iframe对返回二进制文件进行下载处理。记录此功能，以便后期使用。 2. 示例 2.1 vue示例代码
阅读全文
摘要：1. 概述 1.1 说明 项目开发过程中会遇到需要多个主页展示情况，故在vue单页面的基础上进行配置多页面开发以满足此需求，此记录为统一配置出入口。 2. 实例 2.1 页面配置 使用vue脚手架搭建后将默认index.html，app.vue，main.js三个页面删除，然后在src目录下新增pa
阅读全文
摘要：1. 概述 1.1 说明 项目开发过程中会遇到需要多个主页展示情况，故在vue单页面的基础上进行配置多页面开发以满足此需求。 2. 实例 2.1 页面配置 2.1.1 默认首页 使用vue脚手架搭建后的首页信息：index.html，app.vue，main.js 2.1.2 测试首页 单独创建的首
阅读全文
摘要：1. 概述 1.1 说明 使用vue-cli快速创建的vue项目目录如下： build -- webpack相关配置以及服务启动文件，配置多依赖于下边的config文件夹中内容 config -- vue基本配置文件，如监听端口，打包输出等配置 node_modules -- 安装依赖包的目录文件
阅读全文
摘要：1. 概述 1.1 说明 在开发过程中，有时候需要使用图片验证码进行增加安全强度，在点击图片时更新新的图片验证码，记录此功能，以便后期使用。 2. 示例 2.1 vue示例代码 注意：使用 Math.random() 来获取新的验证码，后台支持使用接口获取验证码。 2.1 显示
阅读全文
摘要：1. 概述 1.1 简介 axios是一个基于Promise(本机支持ES6 Promise实现) 的HTTP库，用于浏览器和 nodejs 的 HTTP 客户端。具有以下特征： 从浏览器中创建 XMLHttpRequests XMLHttpRequest对象用于在后台与服务器交换数据，可做到在不重
阅读全文
摘要：1. 概述 1.1 说明 vue-cli是一个官方发布vue.js项目脚手架，使用vue-cli可以快速创建vue项目。GitHub地址是：https://github.com/vuejs/vue-cli。 2. 搭建 2.1 node环境 首先需要安装node环境，可以直接到中文官网http://
阅读全文
摘要：1. 概述 1.1 引入二维码生成模块 注意：此处安装qrcodejs2，安装依赖后可在main方法中进行全局引用设置，也可单独某个页面中进行引用设置。 1.2 引入使用 备注：在main中设置全局可使用 Vue.prototype.$qrCode = QRCode; ，页面中调用可直接使用 thi
阅读全文
浙公网安备 33010602011771号