吴小花的博客
学如逆水行舟,不进则退。
展开
-
el-dialog 实现可以拖动的弹窗
实现可拖动弹窗。原创 2024-04-18 13:20:00 · 986 阅读 · 0 评论 -
项目经验笔记一
1.activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等2.向后台传递参数ids :14 调用delete接口,实现删除功能。代码逻辑:接口activity.jsremove方法。import { activityInfo } from "@/http/activity";...原创 2019-04-02 15:57:10 · 429 阅读 · 0 评论 -
使用ELement-UI 自定义表格的总计 | 日期选择器皿今天之前的不可用
<el-table :data="tableData6" border height="200" :summary-method="getSummaries" show-summary style="width: 100%; margin-top: 20px"> <el-table-column pro...原创 2020-04-17 14:31:46 · 662 阅读 · 0 评论 -
elementUl的el-checkbox和el-select用法
效果: 需求: 所有APP用户和指定分组用户可同时选。 分组用户可以多选。难点: 当选择了分组后,自动勾选指定分组用户,删除了分组后,指定分组用户取消勾选。遇到的问题: 一开始,我把el-select组件放在了el-checkbox里面,删除多选的分组后,总会影响el-checkbox的勾选,很难实现想要的效果。解决方案: el-select放到el-checkbox外,慢慢实现了想要的效果。...原创 2020-11-24 14:06:44 · 3027 阅读 · 0 评论 -
PHP模板语法常用
https://www.kancloud.cn/manual/thinkphp5/1181221.条件判断<if condition="$num gt 10">num 大于10 <elseif condition="$num lt 10"/>num小于10 <else/>num等于10</if>{switc...原创 2019-12-12 17:13:49 · 1028 阅读 · 0 评论 -
修改首页轮播后台(php)
/public_html/application/common/controller/frontend.php// 修改sitebanner $site = Config::get("site"); $tter1 = explode('|',$site['des_'.cookie('lang')]); $tter2 = explod...原创 2019-12-16 10:49:56 · 623 阅读 · 0 评论 -
Echarts图表相关问题
1.用echats绘制图表的时候,遇到的问题是切换tab,图表无法绘制出来。解决方案,在<el-tab-pane>里添加lazy<!-- 6企业渠道统计 --><el-row:gutter="12"style="margin-top: 20px"><el-col style="width: 1100px"> <el-card shadow="always"> <div slot="hea..原创 2021-07-15 16:21:27 · 4784 阅读 · 4 评论 -
jquery轻量级数字动画插件jquery.countup.js(实现数字动态增加效果)
1.首先下载jquery.waypoints.min.js,jquery.countup.min.js下载地址:https://download.csdn.net/download/u013819968/96882412.在页面引入jquery,jquery.waypoints.min.js和jquery.countup.min.js文件。1 <script...转载 2019-10-31 14:19:30 · 3400 阅读 · 0 评论 -
Element-ul的 el-image-viewer组件实现点击【查看图片】能预览大图功能
element-ul有大图预览功能,链接如下Element - The world's most popular Vue UI framework但我们不想展示图片,想实现的是“查看图片”能预览大图(多张也可以预览)的功能。如下图所示:该如何实现呢?1.导入组件// 导入组件import ElImageViewer from "element-ui/packages/image/src/image-viewer";2.注册组件 components:...原创 2021-09-14 17:30:47 · 5983 阅读 · 4 评论 -
CSS按钮hove变色 | 回到顶部 | 指定区域外点击,关闭指定区域| 设置导航高亮
1.按钮hover上去变色(渐变,从底部向上变) .btn-item { text-transform: uppercase; width: 250px; line-height: 50px; text-align: center; font-size: 18px; font-family: Oswald;原创 2020-06-30 13:21:31 · 2057 阅读 · 0 评论 -
web前端开发之《历史轮播模块二》
效果网址:https://www.hwayimachine.com/single/about<!-- history --><div class="se3" style="background:url({$picture.about_bei});background-size: cover;background-repeat: no-repea...原创 2019-12-03 10:16:15 · 282 阅读 · 0 评论 -
Vue实现单选多选反选全选全不选
功能:实现点击选中,再点击取消选中,全选,取消全选,左滑删除。页面效果如下:左滑删除功能需要用到mint-ui的mt-cell-swiper。注意使用这个插件的时候不能用v-if,要用v-show,否则无法实现预期效果。(我在这上面踩了很久的坑,才突然顿悟的)需要引入mint相关的js和css<link rel="stylesheet" type="text/css" href="../cs...原创 2021-10-09 15:52:49 · 2524 阅读 · 0 评论 -
vue3学习笔记(1)
和。原创 2023-08-17 16:54:40 · 265 阅读 · 0 评论 -
vue-element 使用插件clipboard实现复制功能
1.安装clipboard插件 ------------ npm installclipboard2.引入:import Clipboard from "clipboard";3.页面使用 <div class="content"> <div class="item" v-for="(item, key) in linkLi...原创 2021-10-28 16:47:46 · 2839 阅读 · 0 评论 -
el-input 输入框禁止输入特殊字符
<template> <el-input v-model="value" placeholder="请输入" @keyup.native="keyUp" @keydown.native="keydown" ></el-input></template><script> export default { methods:{ //限制输入.转载 2021-10-26 10:14:54 · 3005 阅读 · 2 评论 -
Vue实现查看大图,多图可滑动查看,再次点击会到缩略图的功能(类似微信朋友圈)
需求:图片列表点击可查看大图,多图可以左右滑动查看,再次点击会到缩略图的功能思考:开始考虑使用v-viewer组件,功能比较多,可以旋转,放大缩小图片等,但是并不完全符合需求,后采用swiper-slide,自己写组件方式完美适配需求。效果如下:2.viewimglist组件单独新建个文件,我这里是建在components文件夹下,命名为viewimglist.vue。你根据自己的文件目录建,能正确引入就行。完整的组件代码如下:<template> <.原创 2021-09-15 16:53:17 · 2684 阅读 · 0 评论 -
vue 三级导航展示和隐藏
需求描述:要实现侧边栏三级导航的显示和隐藏。点击其中一个一级导航,展示该一级导航的二级导航,再点击关闭该二级导航。一级导航的其他项,展开二级导航。关闭其他一级导航的二级导航。效果如下:代码:<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png" /> <HelloWorld msg="Welcome to Your Vue.js App" .原创 2021-08-30 15:50:30 · 1062 阅读 · 0 评论 -
Vue+elementUl (今天之前的日期不可选,结束日期大于开始日期)
<el-form-item> <el-col :span="4"> <el-radio label="2">定时开启</el-radio> </el-col> <el-col :span="20" v-if="form.open_type == '2'"> ...原创 2021-03-29 16:41:28 · 1979 阅读 · 0 评论 -
vue的axios的简单封装
1.前言Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中2.安装$ npm install axios3.axios封装封装目的:实现请求拦截、相应拦截、错误统一处理在src/assets/js 目录下新建Ajax.js文件import axios from 'axios'; // 引入axiosimport { Toast} from 'vant';// 将所有 Toast 的展示时长设置为 1000 毫秒原创 2021-03-17 14:57:20 · 660 阅读 · 0 评论 -
如何快速上手vue项目
0.vscode安装和使用工欲善其事必先利其器vscode的优点:1.免费,开源 2.有海量的扩展插件 3.轻量(不会占用大量的内存和CPU)vscode的汉化,搜索插件chinese 直接安装,然后重启vsCode即可生效。1.vue基础知识学习(重点)第一阶段:学习vue.js, 学习时间两周(每天1小时)第一周学完(1-5条) 第二周学完(6-8条) 预计3月26号完成vue基础知识入门。官方文档是第一手资料,地址:https://cn.vuejs...原创 2021-03-12 14:17:24 · 4719 阅读 · 5 评论 -
Vue+elementUI 动态展示列表的数据
需求描述:活动查看的时候,根据后台返回的数据,动态渲染列和每行数据。后台返回的数据结构如下html <!-- 弹出的查看数据 --> <el-dialog width="1200px" :title="activityName" :visible.sync="viewDataPopUp" > <div class="export"> <el-button原创 2021-03-09 13:46:36 · 5467 阅读 · 0 评论 -
vue中使用el-dropdown
点击【更多】弹出如下选项使用el-dropdown <el-dropdown @command=" (command) => { handleCommand(command, scope.$index, scope.row); } " > <el-link type="pri..原创 2021-03-09 11:33:24 · 15687 阅读 · 0 评论 -
vue中省份控件(VueAreaLinkage)的使用
实现如下效果:1.安装Vue-area-linkagenpm i --save vue-area-linkage area-data2.在mian.js里面注册import VueAreaLinkage from 'vue-area-linkage';import 'vue-area-linkage/dist/index.css';Vue.use(VueAreaLinkage);3.再具体使用的页面引入import { AreaSelect } from ...原创 2021-03-09 11:03:11 · 2399 阅读 · 0 评论 -
vue+elementUl导入文件(判断文件格式)
html <el-dropdown style="margin-left: 10px"> <el-button type="primary"> 导入教师 <i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-m...原创 2020-12-15 16:57:36 · 2476 阅读 · 2 评论 -
Vue+elementUl表单正则验证(验证手机号,邮箱,密码)
效果:需求: 给form表单增加,手机号,邮箱,密码验证规则代码实现:Form 组件提供了表单验证的功能,只需要通过rules属性传入约定的验证规则,并将 Form-Item 的prop属性设置为需校验的字段名即可。 <!-- 弹出的编辑框 --> <el-dialog :title="editingStatus === 'editing' ? '编辑高校信息' : '新增高校信息'" width="700px...原创 2020-12-15 16:29:43 · 2870 阅读 · 1 评论 -
Vue项目使用splitpanes插件(垂直水平分割窗口)
需求:实现可调节的窗口面板。先安装splitpanes插件npm i splitpanes //For Vue 2.x.npm i splitpanes@next //For Vue 3.// In your Vue component.import { Splitpanes, Pane } from 'splitpanes'import 'splitpanes/dist/splitpanes.css'export default { components.原创 2020-12-01 16:24:13 · 11248 阅读 · 0 评论 -
vue+elementUl实现登录记住密码功能
效果思路:采用cookie保存账户和密码。如果勾选了记住密码,将用户名和密码保存在cookie中,设置cookie中数据保存的时间,过期清除cookie保存的值,每次新登录的时候,获取本地保存的cookie值。代码解析:<el-input>标签加show-password可以控制密码的显示和隐藏<el-checkbox v-model="checked" class="remeberPwd">记住密码</el-checkbox>通过.原创 2020-11-27 15:52:21 · 3807 阅读 · 0 评论 -
vue +elementUl实现展开和收起功能
需求:由于后台搜索选项有很多,影响页面美观,所以一进来要隐藏一部分搜索项,只保留1行,点击【展开搜索】按钮的时候才显示全部,点击【收起搜索】按钮又收起部分,保留1行。需求分析:由于不太好控制行数,因为不同屏幕尺寸展示的1行的内容并不相同(不考虑移动端),所以考虑用显示高度来控制。解决思路:所以这里通过控制搜索区域的高度来实现展开和收起搜索功能。页面一进来是收起搜索状态,控制搜索区域的高度为120px,超出部分隐藏。点击展开搜索的时候,调整搜索区域的高度为”auto"定....原创 2020-11-24 14:51:33 · 17269 阅读 · 10 评论 -
Vue全局指令防止按钮重复点击
1.common.js首先引入Vueimport Vue from 'vue';const preventReClick = Vue.directive('preventReClick', { inserted: function (el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTimeout原创 2020-11-13 09:50:25 · 1768 阅读 · 0 评论 -
解决Vue数据更新视图不更新的问题 | element-ui 点击显示/隐藏表格中某行的手机号
业务场景:需要给手机隐藏,点击显示手机号的时候才能看到手机号。解决思路:前端控制手机号的显示,(已经通过调接口获取到了用户的手机号信息)在tableData给每行数据新增加一个isShow的值,当isShow为true时,显示具体的手机号,默认为false.遇到的问题:开发过程中遇到给isShow的值改变,但是页面不刷新的问题。解决方案:1.使用this.$nextTick() 和this.$forceUpdate();强制刷新页面//显示手机号handleShow原创 2020-10-26 17:23:01 · 2888 阅读 · 2 评论 -
Vue+elementUl导出日期+名称形式的表格(例如:20201023着陆页管理.xlsx)
1.先安装依赖npm install --save xlsx file-saver2.在需要的页面引入import FileSaver from "file-saver";import XLSX from "xlsx";3.vue页面父组件.table要导出的是哪一个表格<template> <!-- 导出按钮组件 --> <oftenButton @onExportExcel="onExportExcel"原创 2020-10-23 11:27:23 · 1009 阅读 · 0 评论 -
vue文件上传和下载(项目经验)| 获取url中的参数 | 三元运算符扩展
1.如果下载单个固定的文件,可以用<a href="文件地址" download="文件名"></a><a href="https://jiulong-fan.com/uploads/AC%20Axial%20G-SERIES%20FANS%201-46P.pdf" download="文件名"></a>2.文件上传html:<div class="btn_upload">上传 <input class="u..原创 2020-09-23 10:24:40 · 500 阅读 · 0 评论 -
实现文字滚动效果——Vue实现
这种思路要借用到Vue提供的transition组件了,它提供了一些类名,比如v-enter、v-enter-active等来对应CSS的类<div class="text-container"> <transition class="inner-container" name="slide" mode="out-in"> <p class="text2" :key="newsText.id">{{newsText.val}}</p> &原创 2020-05-22 17:44:46 · 6163 阅读 · 2 评论 -
vue 获取input光标位置,并实现插入模板语法。
点击上面的模板说明,可以在输入框的光标位置插入相应的语法。<el-form-item label="模板说明:" v-if="form.news_type==='1'"> <el-row class="templateCode"> <el-col :span="8"> <di...原创 2020-04-30 14:22:35 · 4636 阅读 · 3 评论 -
《Vue 高级框架开发》——Vue基础语法(2)
1.表单控件绑定v-model 指令在表单控件元素(输入框,复选框,多个勾选框,选择列表)上创建双向数据绑定<template> <div> <input v-model="message" > <p>Message is: {{ message }}</p> <!-- 多个勾选框 --> ...原创 2020-02-19 13:52:07 · 282 阅读 · 0 评论 -
《Vue 高级框架开发》——Vue基础语法(1)
特点:组件化开发,快速开发1.生命周期vue生命周期:beforeCreate 组件刚刚被创建create 组件创建完成beforeMount 挂载之前mounted 挂载之后beforeDestory 组件销毁前调用destoryed 组件销毁后调用 ajax请求和dom在mounted里面进行2.选项数据data (本来是一个函数,全局变量的定义)...原创 2020-02-18 18:28:12 · 430 阅读 · 0 评论 -
vue重点知识
1.为什么使用框架,框架到底解决了什么问题?解决重复引用外部js,以用jQuery开发为例,很多时候都是不能单一完成一个项目的,还需要引用很多的第三方插件和库,导致会一个项目引入很多外部JS文件。这样不仅让代码变得杂乱,而且很影响打开速度。但是用框架呢,以VUE为例,一般会和构建工具配合,然后就是一个入口文件就可以完成了,在运行时候就在入口引入一次,一劳永逸。使用组件化开发,组件是...原创 2019-12-11 17:38:50 · 1725 阅读 · 0 评论 -
vue.js实战(一)
1.声明式渲染vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。<!DOCTYPE html><html><head> <title></title> <script src="h...原创 2019-02-12 20:47:49 · 293 阅读 · 2 评论 -
Vue-router操作实例
1.npm下载npm install vue-router2.删除node_modulescnpm install 重新下载3.npm run dev启动项目,localhost:8080/查看项目4.先新建三个组件分别是Home、About、InfoHome.vue的代码如下<template> <div> Hom...原创 2019-02-23 18:05:10 · 2092 阅读 · 0 评论 -
vuex简单入门
需要先删除node_modules,然后使用cnpm install重新安装然后 安装vuex 命令:cnpm install vuex --save-dev要是使用vuex首先新建一个store.js文件,然后引用Vuex这个组件,然后定义state(定义组件管理或者公用的状态)和mutations(定义改变状态的方法)store.js文件的代码:imp...原创 2019-02-24 12:39:07 · 163 阅读 · 0 评论