qing_xing_的博客

原创 vant 级联选择器清空之后，选择项不重置

最近用vant ui框架开发小程序，在使用cascader级联选择器的时候，遇到这样一个问题，vant并未提供cascader的重置方法，手动将数据清空之后，样式并未重置，选择项还是停留在选择的子级上面，如下图。关闭菜单栏弹窗，然后设置showCascader为false，销毁cascader。3、在打开弹窗时，设置showCascader为true。这样就可以解决它的数据重置，但是样式不重置的问题了。解决办法，用v-if重置选择器的存在。2、点击重置按钮的时候。

原创 vue简单购物车实现

逻辑是和用vuex的那篇文章一样的 只是这个是没有用vuex。具体逻辑去这里看吧，这个是简化版，顺便做了些小优化。

原创 vue3+element-plus 表单输入框无法输入、下拉框值不回显

因为element-plus表单的ref和model的值不能设置相同的值，如果设置成相同的值，输入框无法输入、下拉框值不回显在element-plus的官方文档中是这样写的，可以看出来两者的值不一样而在vue2+饿了么中是可以设置相同的值，官方写法如下...

原创 vue3 安装sass出现can‘t resolve ‘sass-loader‘的解决方法

npm install sass-loadernpm install node-sassnpm install sass-loadernpm install sassnpm install style-loadernpm install style-resources-loader将上面的依赖全部安装一遍如果没有在config里面配置 需要配置一下const path = require("path"); module.exports = { pluginOptions: {

原创 vue+element，表单验证自动聚焦到第一个未填处

1、创建一个js文件2、在mian.js中全局引入一下import {firstInputFocus} from '@/utils/tool.js'Vue.prototype.$firstInputFocus = firstInputFocus3、表单验证的地方调用if (!valid) {this.$firstInputFocus()return false;}

原创 el-select 的远程搜索 如何回显？

1、下拉框的区域代码 <el-form-item label="选择内容" prop="region" :rules="[ { required: true, message: '选择内容', trigger: 'blur' }, ]"> <el-select v-model="form.region" value-key="collId" remo

原创 css 动态的二级导航

1650873759719一个简单的动态二级导航，主要实现功能，页面比较简陋，各位按照自己的需要加上背景颜色就可以了。1、html部分 <ul> <li> <a href="">首页</a> <div> <a href="">首页</a> <a href="">首页&lt

原创 解决 element table 无限加载时，滚动到底触发多次请求

在使用element的表格时，有时候会用到滚动加载的功能，使用element自带的无限滚动就可以，但是会有滚动条触底时，触发多次的情况。1、安装 el-table-infinite-scrollnpm install el-table-infinite-scroll -S2、引入main.js中import elTableInfiniteScroll from 'el-table-infinite-scroll';Vue.use(elTableInfiniteScroll);3、

原创 vue 滚动目录树

要做这样一个目录树，先确定一下它的功能1、点击目录按钮的时候，蓝点滑到点击的位置2、页面滚动到点击按钮所对应的位置3、页面滚动时，目录树的蓝点随着滚动条滚动第一个功能，用css来写 就可以完成index部分 <div class="catalog"> <div class="point"> <span></span> <p :style="{top:point+'px..

原创 vite+ts 组件报错 ‘xxx’declared but its value is never read

原创 vue 中element ui 按需引入优化

vue中按需引入element ui，按照官网的引入方法，在main.js中会显的臃肿，所以对按需引入进行优化，代码更直观、简洁。1、自定义 创建一个组件 ，组件内容如下import Vue from 'vue'import { MessageBox, Message, Loading, Notification, Tag, Switch, ColorPicker, .

原创 element ui drawer（抽屉）二次封装

在使用vue+element做项目的时候，对于多次复用的组件，我们可以封装一下，这样效率更高，代码更简介，废话少说，上代码！在components文件夹里面创建一个drawer.vue文件，名字是自定义了。<template> <div class="outter_drawer"> <el-drawer :title="drawerObj.title" :visible.sync="drawerObj.drawer" :

原创 vue+element 树形数据刷新 局部更新

1、在当前页面date里面声明map()data(){ return{ maps:new Map(), }}2、在element 的load方法里面parentId 是上一层数据的id 注意唯一性load(tree, treeNode, resolve) { this.maps.set("parentId", { tree, treeNode, resolve }) //加入上面的数据 setTimeout(() => {

原创 移动端和pc端转化

移动端和PC端有两套代码需要转化的时候，可以在js里面写下面代码实现自动转化var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;pc端里面写if (is_mobi) {window.location.href = "p...

原创 子元素相对于父元素固定定位

实现子元素相对父元素固定定位的方法就是，给父元素添加transform:translate(0,0);位移为0，然后给要固定定位的子元素 添加position:fixed;这样就可以实现子元素相对于父元素固定定位了

转载 JS https图片点击下载到本地

直接上代码 f_down(receipt){// f_down为自定义的一个方法，receipt为图片链接 var x=new XMLHttpRequest(); x.open("GET",receipt, true); x.responseType = 'blob'; x.onload=function(e){ var url = window.URL.cre...

原创 layui 轮播 文档

原创 element 表单验证值为undefined的原因及解决方案

闲话少说，步入正题。表单验证的时候，值为undefined的原因，网上说的有三种1、prop名称和rules中的名称一致2、没有指定的model3、绑定的属性没有在data中声明（这个可有可无）除了这三种外，还有一种情况，在验证之前 我们都能拿到表单的值，但是验证之后打印的值为undefined。我这里具体问题出现的场景：子组件是抽屉，需要里面的值回显到父组件上，但是点击提交的时候值为undefinedresetFields（）会将数据恢复初始值，这时候传过去的数据也会.

原创 超好用的后台管理的框架

前段免不了要写后台管理，下面分享几个可以快速生成后台管理的框架，自己用过之后感觉挺好用的，分享给大家。高级表格ProComponents：https://procomponents.ant.design/components/table/#%E5%B5%8C%E5%A5%97%E8%A1%A8%E6%A0%BC组件库基于 React（Vue版），主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用：http://datav-react.jiaminghi.com...

原创 vant框架 官方链接

去百度上百度的vant官网链接都不能用，下面这个链接可以直接跳转到vant官方适用于vue的：https://vant-contrib.gitee.io/vant/#/zh-CN/home适用于微信小程序的：https://vant-contrib.gitee.io/vant-weapp/#/home

原创 vue 移动端歌词实时滚动及优化

在做移动端酷我音乐的时候，发现歌词随着音乐滚动是一个小难点，说难也不难，但是说简单的话也不简单。大家请求歌词返回的类型可能不太一样，但是判断逻辑都是一样的。

原创 Vue简单实现购物车全部功能

Vue简单实现购物车功能本文用Vue简单实现了一下购物车功能，简单是指代码简单，只有50行，也指样式简单，愧对前端。话不多说，直接上图上代码吧！这是购物车的页面，虽然看着比较简陋，但麻雀虽小五脏俱全，数据用的是在state里面的固定数据。先捋一下购物车的逻辑：1、在选中该商品的时候，总价变为该商品的价格。2、点击”+“或 ” - “的时候，商品的数量随之变化，总价也跟着变化。3、当点击全选的时候，全部商品选中，总价变为如今商品价格*商品数量之和，取消全选的时候，价格变为0。4