前端 - 随笔分类(第2页) - 周文豪

VUE：前端下载Excel模板文件

摘要：一、效果点击“模板按钮”，就开始下载二、根据磁盘路径下载 1、前端代码 1、template <el-button type="primary" icon="el-icon-download" @click="downloadTemplate('药材信息-模板.xlsx')">下载模板</el- 阅读全文

posted @ 2022-04-01 12:40 周文豪阅读(3401) 评论(0) 推荐(0) 编辑

VUE：身份证组件

摘要：一、组件代码 <template> <div> <el-button icon="el-icon-upload" size="mini" type="primary" @click="initPage">{{name}} </el-button> <el-dialog :title="title" 阅读全文

posted @ 2022-04-01 10:40 周文豪阅读(1409) 评论(0) 推荐(0) 编辑

vue项目：通过高德API根据地址获取经纬度

摘要：一、在高德开发平台中注册账号并申请Key 具体操作参照如下：https://lbs.amap.com/api/javascript-api/guide/abc/prepare 注意：服务平台选web服务。因为高德使用手册上写的很清楚：手册浏览器访问：http://restapi.amap.com/ 阅读全文

posted @ 2022-03-24 10:00 周文豪阅读(3015) 评论(0) 推荐(0) 编辑

VUE：二维码生成插件 qrious 的使用 Cannot read property 'appendChild' of null

摘要：一、概述二维码又称 QR Code，QR 全称 Quick Response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的 Bar Code 条形码（只能标识数字）能存更多的信息，也能表示更多的数据类型。二、二维码优势 1、信息容量大, 可以容纳多达 1850 个大写字母或 2710 阅读全文

posted @ 2022-03-01 16:39 周文豪阅读(592) 评论(0) 推荐(0) 编辑

季度选择器quarter-picker

摘要：实现步骤： 1、季度选择器组件 <template> <div style="display: inline-block;"> <mark style="position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0, 阅读全文

posted @ 2022-02-28 09:57 周文豪阅读(1247) 评论(1) 推荐(0) 编辑

v-model.number

摘要：vue官方文档中对于v-model中.number的描述: .number 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符。示例： <el-table-column label="预计药材产量(kg)" align="center" width="140p 阅读全文

posted @ 2022-02-23 14:30 周文豪阅读(1006) 评论(0) 推荐(0) 编辑

后台响应的Result参数设置：当后台没有报错，而是正常返回前端提示

摘要：后台代码： result = Result.operating("不存在，不允许迁出", false, ResultCode.SUCCESS); 其中三个参数：参数一返回消息提示，参数二返回成功或失败，为true表示请求成功，为false表示请求失败。参数三表示是否出现异常，为Success表示成功阅读全文

posted @ 2022-02-22 11:29 周文豪阅读(806) 评论(0) 推荐(0) 编辑

vue中使用this.$loading()给整个页面添加遮罩

摘要：官网介绍：如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 $loading，它的调用方式为：this.$loading(options)，同样会返回一个 Loading 实例。调用方法： this.$loading() this.$loading().clos 阅读全文

posted @ 2022-02-19 20:34 周文豪阅读(3951) 评论(0) 推荐(0) 编辑

vue rsa对密码加密（Jsencrypt）"message too long for RSA"

摘要：一、加密字符串很短时比如我们仅仅对用户名或密码进行加密，使用步骤 1、下载首先用npm命令下载jsencrypt： npm install jsencrypt –-save 2、在vue文件中引入jsencrypt import { JSEncrypt } from 'jsencrypt' 3、阅读全文

posted @ 2022-02-11 12:02 周文豪阅读(3490) 评论(0) 推荐(0) 编辑

Layui在弹出层实现轮播图效果

摘要：一、官网弹出层和轮播图代码 layui官网：http://www.uimaker.com/layui/doc/modules/carousel.html 官网代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>carou 阅读全文

posted @ 2021-12-26 21:16 周文豪阅读(2244) 评论(0) 推荐(1) 编辑

layer.opent()方法显示图片

摘要：<label class="col-sm-2 control-label">饮片检验报告：</label> <div class="col-sm-2" style="margin-top: 6px;"> <span id="ypjybg"></span> </div> 当从后台获取到数据后，就会填充阅读全文

posted @ 2021-12-23 17:13 周文豪阅读(899) 评论(0) 推荐(0) 编辑

element-ui表格table组件的树形表格

摘要：支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。阅读全文

posted @ 2021-12-13 09:50 周文豪阅读(3260) 评论(0) 推荐(0) 编辑

双向绑定v-model与单向绑定v-bind:value

摘要：一、v-model语法糖 vue使用v-model在表单元素上创建双向数据绑定，在官方文档中简单的提到了它的本质只是一个语法糖，在单向数据绑定的基础上，增加了监听用户输入事件并更新数据的功能；简单点说，如果有这样一段模板： <input v-model="message" type="text"/ 阅读全文

posted @ 2021-12-12 11:20 周文豪阅读(929) 评论(0) 推荐(0) 编辑

TreeSelect组件：v-model语法糖进行父子组件传值案例

摘要：效果：一、组件代码 <template> <!--el-select中v-model/value的值为当前被选中的el-option的value属性值, 为el-select设置disabled属性，则整个选择器不可用, 为el-select设置clearable属性，则可将选择器清空。clear 阅读全文

posted @ 2021-12-11 21:33 周文豪阅读(1421) 评论(0) 推荐(0) 编辑

带卡片的input输入框

摘要：效果：点击右侧的icon图标，弹出一个card，代码如下： <el-form-item label="菜单图标" prop="icon">  <el-input class="icon-input" :read 阅读全文

posted @ 2021-12-11 15:50 周文豪阅读(265) 评论(0) 推荐(0) 编辑

带 icon 的输入框：slot方式。slot="prefix"和slot="suffix"

摘要：一、带有图标标记输入类型 1、官网中使用代码如下： <div class="demo-input-suffix"> slot 方式： <el-input placeholder="请选择日期" v-model="input3"> <i slot="suffix" class="el-input__ 阅读全文

posted @ 2021-12-11 12:08 周文豪阅读(6572) 评论(0) 推荐(0) 编辑

element-UI：在el-table-column中用prop属性来对应对象中的键名即可填入数据

摘要：根据elementUI中的，当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据， <el-table ref="multipleTable" :data="list" style="width: 100%" size="sm 阅读全文

posted @ 2021-12-10 17:03 周文豪阅读(12935) 评论(0) 推荐(0) 编辑

父组件向子组件传递getList方法：provide/inject

摘要：父组件：引入、注册、使用子组件 import Edit from './edit' components: { Edit }, <edit ref="edit"></edit> 代码如下: let thatexport default { name: 'index', components: { 阅读全文

posted @ 2021-12-08 19:50 周文豪阅读(77) 评论(0) 推荐(0) 编辑

vue项目报错：$ is not defined

摘要：报错如下：解决办法：引入jquery 1）、安装jquery cnpm i jquery -s 2)、main.js中引入 import $ from 'jquery' window.jQuery = $;window.$ = $; 阅读全文

posted @ 2021-12-04 22:27 周文豪阅读(1585) 评论(0) 推荐(0) 编辑

状态合并：replaceState

摘要：看如下代码： import Vue from "vue"; import Vuex from "vuex"; import getters from "./getters"; Vue.use(Vuex); const modulesFiles = require.context("./modules 阅读全文

posted @ 2021-12-04 21:38 周文豪阅读(81) 评论(0) 推荐(0) 编辑

随笔分类 - 前端