前端VUE3,JQ,uniapp,综合(Ctrl+F搜索)

el-checkbox 全选 table数据

都是单独的checkbox, 没有用到checkboxGroup
拿到接口数据后 ,首先foreach, 每一行加入一个checked字段 ,默认false 不勾选

全选

JQ获取url参数

如 http://xxx.com?id=10 想获取id

    function getQueryString(name) {        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");        var r = window.location.search.substr(1).match(reg);        if (r != null) return unescape(r[2]);        return null;    }let id = getQueryString('id')#id = 10

js input大于0的整数 正则

//是否 >0 整数let reg = /^[1-9]*[1-9][0-9]*$/if(reg.test(e.target.value)){是}else{错}

js上传blob图片

用户选定图片后 ,点击确认 ,首先js拿到blob图片资源 ,利用FileReader 转成base64类型 再上传

                let reader = new FileReader();                reader.readAsDataURL(fileList[i]) //fileList[i] blob类型                reader.onload = function (e){                    ajax上传方法('接口地址',{                        imgData:e.currentTarget.result; //e.currentTarget.result 是base64类型的图片                    })                }

解决uniapp微信小程序菜单连点重复打开同一页面

#html部分注册#js部分data() {    return {        jumping:false,    }},methods:{    toReg(){        let that = this        if(that.jumping){            console.log('跳转中');return ;        }        that.jumping = true;        uni.navigateTo({            url:'xxx',            success:()=>{                setTimeout(()=>{                    that.jumping = false                },500)            }        })    }}

Input Number 数字输入框

小程序限制input只能输入数字

注意这种情况没用使用双向绑定v-model

TypeScript 声明一个对象的属性(key)的类型和默认值

单个变量类型和默认值let name : string = '张三'let age : number = 20let arr : Array = [1,2,3,'a','b','c']对象key的属性和默认值let obj = {  dataList:{    type:Array(),//类型    default:[],//默认值  },  showTotalAmount:{    type:Boolean,    default:true  },  showTotalNum:{    type:Boolean,    default:false  }}

VUE点击按钮跳转连接(打开新窗口)

window.open('http://aaa.com')

VUE项目发布后刷新报404

nginx配置文件中加入

location / {    try_files $uri $uri/ /index.html;}

参考

防止页面按钮连点 ,导致表单重复提交

页面上很多按钮 点击按钮就会请求接口 ,防止按钮连点 ,导致重复提交

提交1提交2提交3jsconst state = reactive({  loading:Boolean(false),//页面加载状态})const a = async ()=>{  state.loading = true //请求接口前修改为true 所有按钮禁用  await req(url,data)  state.loading = false //请求完成 为false 所有按钮可点击}const b = async ()=>{  state.loading = true  await req(url,data)  state.loading = false}

el-checkbox全选

普通的 el-checkbox 自己实现全选
注意 不是el-checkbox-group
页面上表格数据 ,每行数据前放一个el-checkbox 页面底部再有一个el-checkbox用来做全选

模板                            js

下拉菜单el-select

                
1 .安装pinia
main.ts中
import { createPinia } from 'pinia'app.use(createPinia())
src目录下创建一个文件夹名称随意piniaStore
文件夹下创建js/ts文件headCart.ts
文件内容如下
import { defineStore } from "pinia";import { req } from "../api/myapi";export const useHeadCart = defineStore('headCart',{    //这里放数据    state(){        return {            cartLoading:false,            myCart:[],            myCartNum:0,            myCartTotalAmount:0,        }    },    //这里写方法    actions:{        //刷新购物车        async flushHeadCart() {            console.log('pinia -> flushHeadCart');            this.cartLoading = true            let res = await req("eshopIndexHeadGetMyCart",{})            this.myCart = res.data.myCart            this.myCartNum = res.data.myCartNum            this.myCartTotalAmount = res.data.myCartTotalAmount            this.cartLoading = false        }    }})
读取数据 修改数据
import { useHeadCart } from "../piniaStore/headCart";const headCart = useHeadCart()//调用方法headCart.flushHeadCart()//读取数据当请求接口后 ,根据某个字段 初始化勾选状态
接口数据赋值给页面后 ,在nextTick()中 使用 multipleTableRef.value.toggleRowSelection(item) 可以实现效果
  const multipleTableRef = ref()  //接收数据  const fetchData = async () => {    state.listLoading = true    let res = await req('adminMyCartList',state.queryForm)    if(res.code == 200){      state.list = res.data.cartList //接口返回数据      //处理选中状态      nextTick(() => {        state.list.forEach((item:any) => {          if(item.is_checked == 1){            multipleTableRef.value.toggleRowSelection(item)          }        });      })    }
element-ui-plus  时间选择 el-date-picker
                
设置禁用日期 ,组件内的每个日期都会挨个的传入 disabledDate方法 ,
方法返回true 日期被禁用 返回false 日期可用
const disabledDate = (time: Date) => {  let point = Date.now() + (3600 * 24 * 1000 * parseInt(state.statPrice.max_delivery_days_num))  // time.getTime()是每天凌晨的时间戳   // 小于时间点point 就禁选  return time.getTime() <= point}
state.statPrice.max_delivery_days_num = 3时的效果
element-ui-plus 顶部提示
     ElMessage({      message: res.msg,      type: 'success',    })
element-ui-plus 弹窗确认
     ElMessageBox.alert('设置成功', '提示', {      confirmButtonText: '确定',      callback: (action:any) => {        //后续操作      },    })
element-ui-plus confirm
    ElMessageBox.confirm(      '确定要添加此物料吗',      '提示',      {        confirmButtonText: '确定',        cancelButtonText: '取消',        type: 'warning',      }    )    .then(() => {      console.log('点击确定')    })    .catch(() => {      console.log('点击取消')    })
弹窗输入
注意:这样写当用户点击取消  控制台会抛出一个错误 ,阻止程序toPass方法的console.log()继续执行,
点击确认 value就是输入的值,console.log()代码则会继续执行
//偷懒的写法const toPass = async (row:any)=>{  const {value,action} = await ElMessageBox.prompt('请输入发票号', '提示', {    confirmButtonText: '确认',    cancelButtonText: '取消',  })  console.log(value)}//正常写法ElMessageBox.prompt('Please input your e-mail', 'Tip', {   confirmButtonText: 'OK',   cancelButtonText: 'Cancel',}).then(({ value }) => {   console.log(value)}).catch(() => {  //取消})
vue3父子组件传值 ,外部调用组件内部方法
调用关系
父组件 -> 子组件 -> 孙子组件 , 想要在父组件某个事件中 ,调用孙子组件内部的方法
调用顺序也是 父组件(方法) -> 子组件(方法 )-> 孙子组件(方法)
孙子组件headCart对外暴露方法 ,供子组件调用
子组件 引用孙子组件 headCart ,并且子组件也对外暴露方法 ,供父组件调用

el-table中el-image预览样式问题 标签加上:preview-teleported="true" el-chebox全选table数据 (带禁用) 获取到数据时设置某些行disabled,禁用勾选 全选时,不会勾选dsiabled的数据 , 当可勾选的行 全部勾选后 全选按钮为一个对钩视为全部选定 全选

单选

单选