
前端网页小项目
黑白两客
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
动态圆形图标
【代码】动态圆形图标。原创 2024-07-16 13:17:08 · 147 阅读 · 0 评论 -
HTML页面获取URL传递的参数值
【代码】HTML页面获取URL传递的参数值。原创 2023-10-25 14:01:58 · 1239 阅读 · 0 评论 -
element-ui 图片上传 及 quillEditor富文本(图片视频上传)
【代码】element-ui 图片上传 及 quillEditor富文本(图片视频上传)原创 2023-08-01 13:32:20 · 1111 阅读 · 0 评论 -
js侧滑显示删除按钮
js侧滑显示删除按钮js侧滑显示删除按钮原创 2023-02-27 09:58:10 · 1346 阅读 · 1 评论 -
正则校验与时间格式化(年日时分秒倒计时显示)
正则校验与时间格式化原创 2022-07-27 12:00:27 · 320 阅读 · 0 评论 -
基于VUE设置video标签
<template> <div> <div class="video_box"> <div class="video_center"> <div class="resource-container" style="width:70%;position:relative;"> <div class="video-title">1233123<原创 2022-04-28 09:40:57 · 11223 阅读 · 1 评论 -
让数字保持在整数范围内
让数字保存在整数范围内如:(1~10)之间的数取 10(10~20)之间的数取 20(20~30)之间的数取 30let max = (Math.round(数字/10)+1)*10原创 2021-12-20 10:42:24 · 143 阅读 · 0 评论 -
element ui封装 tree下拉框
展示:子组件封装<!-- 树状选择器 科室树形 --><template> <el-popover ref="popover" placement="bottom-start" trigger="click" @show="onShowPopover" @hide="onHidePopover" > <el-tree ref="tree" class="select-tre原创 2021-12-16 18:03:54 · 362 阅读 · 0 评论 -
左右滑动栏
展示效果图:父<template> <div ref="topBox" class="swiper-in page-container bg-white"> <div class="page-body"> <drag-box class="drag-box"> <div class="relative" :class="{'expend-border':!slideStateX}" :style="{'wid原创 2021-12-07 15:45:50 · 261 阅读 · 0 评论 -
vue手动轮播
<template> <div class="w-full p-2.5"> <div class="w-full flex-row-nw-box items-center justify-start"> <div class="statisticText">{{statisticsName}}</div> <el-button-group> <el-button v-for=".原创 2021-11-18 10:28:51 · 325 阅读 · 0 评论 -
element 日历组件-自定义内容
<template> <div ref="topBox" class="swiper-in page-container bg-white"> <div class="w-full page-head"> 我的排班 <i class="close-btn el-icon-close" @click="closeCurrentPage"></i> </div> <div class原创 2021-11-15 13:55:09 · 864 阅读 · 0 评论 -
文件 & 图片 上传 及少许正则校验
文件 & 图片 上传 及少许正则校验<template> <div style="padding: 20px"> <Row> <Col span="24"> <div> <CFlex type="flex" justify="space-between" align="midlle"> <div class="page_title">原创 2021-06-25 10:52:16 · 555 阅读 · 0 评论 -
数据轮播图翻页封装(左右点击)
效果图:在这里插入代码片在这里插入代码片在这里插入代码片在父组件中的效果:原创 2021-10-21 10:41:16 · 225 阅读 · 0 评论 -
element组件库中table自定义分页效果
1.在data中设置初始值 // 页数 页码 search: { offset: 1, // 当前页 limit: 10, // 条数 total:0, //总数 },2.设置获取后的数据分配:data="tableData.slice((search.offset - 1) * search.limit, search.offset * search.limit)" 3.展示效果:...原创 2021-09-26 10:41:55 · 281 阅读 · 0 评论 -
基于Element ui 实现输入框封装
<template> <div class="box"> <el-input ref="money" v-model.trim="money" :placeholder="placeholder" v-bind="$attrs" v-on="$listeners" @input="formatNumber(money,'money')" @keyup.enter.native原创 2021-09-01 17:07:34 · 745 阅读 · 0 评论 -
自定义步骤条
展示图:<template> <div class='createorder'> <!-- 顶部步骤条 --> <div class="createorder_top"> <div class="createorder_top_left"> <!-- 0 --> <span class="createorder_left_set" :class="value ==原创 2021-08-19 13:02:59 · 285 阅读 · 0 评论 -
vue项目水印添加
import DomSize from 'wd-domsize-monitor'; // 此处为 npm 下载的第三方模块包import Api_login from "@/assets/api/login" // 此处是用户信息接口调用var id = 'shuiyinDiv'var isInit = falselet callback = function (ele) { DomSize.bind(ele, function () { //水印被删除 ..原创 2021-08-05 16:06:55 · 146 阅读 · 0 评论 -
单页面轮播图滚动
现在网上好多类似的效果,今天心情好,就私自模仿一个去,代码如下。单页面网站网站首页公司简介公司产品公司荣誉招聘英才联系我们window.οnscrοll=function(){var scTop=document.documentElement.scrollTop||document.body.scrollTop;var num=Math.round(scTop/aDiv[0].offsetHeight);for(var i=0;i<bb.length;i转载 2021-07-28 13:50:49 · 177 阅读 · 0 评论 -
实现值两者之间添加 , 、 | 等字符
展示效果: <span v-for="(item, index) in isshow(props.row.otherOrganId)" :key="index" :title="isshow(props.row.otherOrganId)">{{ item }} <span v-if="isshow(props.row.otherOrganId).length - 1 != index" style="color: #000;padding-left:5px;原创 2021-07-19 18:02:30 · 133 阅读 · 0 评论 -
手机验证码获取
<el-form-item class="yzmlabel" label="验证码" width="90px" prop="verificationCode"> <el-input v-model="loginForm.verificationCode" placeholder="请输入验证码"> <i slot="prefix" class="login_icon login_icon_yzm"></i> &.原创 2021-07-07 18:09:52 · 3931 阅读 · 0 评论 -
基于Element ui 实现输入框只能输入数字并支持千分位
实现效果设置子组件<template> <el-input ref="money" v-model.trim="money" :placeholder="placeholder" v-bind="$attrs" v-on="$listeners" @input="formatNumber(money,'money')" @keyup.enter.native="moneyChange()"原创 2021-10-25 10:00:08 · 1212 阅读 · 0 评论 -
实现省市二级联动效果
实现效果:代码:<template> <div class="main_tableau"> <div class="page_title">百城精算编辑</div> <CFlex type="flex" justify="space-between"> <div style="margin-top:15px;"> <div class="top_box" style=" fon原创 2021-06-28 10:22:00 · 147 阅读 · 0 评论 -
Vue中使用input简易的上传图片
<div class="boximg"> <div class="topimg"> <!-- <img :src="filePath" width="200px" height="170px" /> --> </div> <div class="botimg" @click="imgClick()">上传logo<.原创 2021-06-18 11:14:06 · 1363 阅读 · 0 评论 -
eacharts中国地图省市区点击显示
1.安装echarts.js 相关模块npm i echarts2. 在 main.js 文件中搭建全局// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts3.vue文件种引入相关文档import echarts from "echarts";import "./china.js"; // 引入中国地图数据4.隔离相关文档在 node_modules 文件中查找到 eacharts 下原创 2021-05-12 11:21:44 · 849 阅读 · 1 评论 -
在vue项目中使用树形结构的穿梭框
先看一下最后的效果:一个基于elementui的穿梭框组件:el-tree-transfer第一步:安装组件npm install el-tree-transfer --save第二步:写代码 // 使用树形穿梭框组件 <tree-transfer :title="title" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}" @addBtn='add原创 2021-04-12 18:23:23 · 2274 阅读 · 2 评论 -
Vue多字段下的非空判断(new Promise)
// 利用 ref 获取相关组件中的数值 checkInfo(){ let Insured = this.$refs.Insured.mastdata; //参保量 let technology = this.$refs.drugs.mastdata; //技术 let business = this.$refs.business.mastdata; //商务 return new Promise((resolve,reject) =>.原创 2021-03-24 16:24:21 · 782 阅读 · 0 评论 -
指定标签颜色随机变换
<div class="box_c_l itp" :style="'background:'+item.bgColor">{{ item.travelType }}</div>colors: ["#E8523F", "#156CEE", "#F8B849", "#1F998E"], rnd(a, b) { return Math.floor((b - a + 1) * Math.random()) + a; }, rndElement(arr) {原创 2021-03-10 19:10:18 · 223 阅读 · 0 评论 -
未成年设置
checkPatient(e) { let identityCard = e.replace(/\s+/g, ""); let len = identityCard.length; var strBirthday = ""; if (len == 18) { strBirthday = identityCard.substr(6, 4) + "/" + identityCard...原创 2021-02-08 11:30:35 · 4403 阅读 · 0 评论 -
输入框输入数字,且不能有小数点存在
基于Vue项目进行设置 <template> <comp v-if="update"></comp> <button @click="reload()">刷新comp组件</button> </template> <script> import comp from '@/views/comp.vue' export default { name: 'parentComp',原创 2020-11-19 20:59:11 · 395 阅读 · 0 评论 -
前端设置,验证码登录
<group class="shadow" gutter="0"> <x-input v-model="mobileCaptcha" placeholder="请输入手机验证码" class="weui-vcode" keyboard="number" :max="6"></x-input> <button @click="sendMessage" class="btn" ref="color">{{word}}</bu.原创 2021-02-04 16:27:14 · 251 阅读 · 0 评论 -
解决公众号的加载问题
相关组件内设置的方法(方法可以多处组件运用) <x-input @on-change="changeinp" @on-blur="temporaryRepair();" @on-enter="temporaryRepair();" name="mobile" :show-clear="false" placeholder="请输入药监码" keyboard="number" :max='20'></x-input>函数方法: temporaryRepai原创 2021-02-03 19:28:17 · 174 阅读 · 0 评论 -
微信公众号上传图片 IOS旋转问题
import EXIF from "@/libs/exif.js";export default { props: { photoEventNumber: Number, Imgtitle: String, }, data() { return { headerImage: "", picValue: "", resPhoto: {}, }; }, mounted() {}, watch: { photoE原创 2021-02-03 19:23:46 · 385 阅读 · 0 评论 -
VUE药监码扫描
<!-- 药监码 --> <div class="divContent"> <div class="headDiv"> <div class="spanA">请扫描相关药监码</div> </div> <button class="scanBtn" @c...原创 2021-01-27 20:08:18 · 185 阅读 · 0 评论 -
iview 组件 设置头像更换
基于iview 组件 设置头像更换<!-- 头像更换 --> <div style="width: 100%;height:100%;"> <div style="height: 100%;"> <Upload :on-success="uploadSuccess" :show-upload-list="false" accept="ima原创 2021-01-21 18:33:47 · 522 阅读 · 0 评论 -
iview组件库 - 穿梭栏设置
<Modal v-model="modal1" title="项目药品上下架维护" width="1020" :mask-closable="false" @on-ok="addOk()" > <Col span="36"> <Select filterable @on-change="on...原创 2021-01-15 11:43:50 · 703 阅读 · 0 评论 -
动态添加后的数据转换 — 后台接收数据
let data = this.projectPersonnel.map(item => { let obj = {} obj.member = item.people.map(info => { return info.id }) obj.member = JSON.stringify(obj.member) obj.projectId = id obj.teamId =...原创 2021-01-14 11:25:39 · 143 阅读 · 0 评论 -
Table城市代码翻译
// data 数据变量eara:[]// 接口调用getChinaList() { return fetch({ url: "/api/v1/china/city/search", method: "GET" }); },// table 栏中的 render 函数render: (h, params) => { return h( "span", thi原创 2021-01-07 21:42:01 · 1299 阅读 · 2 评论 -
Table 表格导出功能
<Card class="clearfix"> <p slot="title"> <Icon type="ios-list"></Icon> 收入信息 </p> <!-- 导出1 --> <div class="daochu1"> <!-- 导出按钮 --> .原创 2020-12-28 11:33:28 · 555 阅读 · 0 评论 -
Vue项目中Table设置 render 函数
statusList1: { 0: "", 1: "", 2: "药品服务费收入", 3: "特药服务费收入", 4: "直保经纪费", 5: "再保经纪费", 6: "广告费", }, render: (h, params) => { return this.colorCommon(h, params.row, "1"); },.原创 2020-12-24 11:52:37 · 1376 阅读 · 0 评论 -
qrcode.js 二维码生成器
二维码生成 并显示:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <head> <title>Javascript 二原创 2020-12-03 19:03:59 · 274 阅读 · 0 评论