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

江河湖海琴瑟琵琶 2023-03-28 原文

对象解构赋值

let res = await req(url,data)
console.log(res)

用res.xxx 访问属性
{
    "fz": "172.17.0.2",
    "env": "local",
    "code": 200,
    "msg": "操作成功",
    "data": {}
}

直接要哪个解构哪个

const {msg,code} = await req('xxx',data)
console.log(msg,code)

uniapp模板中调用import的方法

#util.js
export function  test(){
    console.log('ttttttttt')
}
//其他方法定义
......

引入方法后 ,js代码中可以正常调用 ,想在模板中直接调用引入的方法
需要在methods区域声明,才能直接在模板中调用

#index.vue
<button @click="test()">测试</button>
import {test} from '@/utils/util.js'
export default {
  data(){}
  methods:{
    test,
    loadData(){
      .......//其他方法定义
    }
  }
}

JS深度拷贝

    let a = {
      'name':'张三',
      'age':10
    }
    let b = a //直接赋值 导致a b 指向同一内存地址 
    console.log(a,b)
    b.name = '李四'
    console.log(a,b)

图片.png

    let b = JSON.parse(JSON.stringify(a))

图片.png

el-table中el-image预览样式问题

图片.png

标签加上:preview-teleported="true"

<el-image
  :preview-teleported="true" 
/>

el-chebox全选table数据 (带禁用)

获取到数据时设置某些行disabled,禁用勾选
全选时,不会勾选dsiabled的数据 ,
当可勾选的行全部勾选后全选按钮为一个对钩视为全部选定

图中第二第三行是禁用的.png

<el-checkbox 
  v-model="isCheckedAll" 
  @change="handleCheckAll($event)" 
  :indeterminate="isIndeterminate"
  :disabled="checkAllDisabled"
>全选</el-checkbox>

<tr v-for="item in orderList">
  <td>
    <el-checkbox 
      :disabled="item.disabled" 
      v-model="item.checked" 
      @change="handleCheckSingle($event,item)"
      >单选</el-checkbox>
  </td>
<tr>
<script>
methods:{
            /**
             * 处理单个勾选按钮
             * @param e true || false
             * @param item
             * @returns {Promise<void>}
             */
            async handleCheckSingle(e,item){
                let that = this
                item.checked = e === true;
                that.handleCheckAllStyle()
            },
            /**
             * 处理全部勾选按钮 ,当el-checkbox部分勾选时, 再次点击全选 ,e === true
             * @param e true||false
             * @returns {Promise<void>}
             */
            async handleCheckAll(e){
                let that = this
                that.orderList.forEach(item=>{
                    //如果勾选禁用 ,就跳过本行记录
                    if(item.disabled === false) {
                        item.checked = e === true
                    }
                })
                that.handleCheckAllStyle()
            },
            /**
             * 处理全选按钮的样式
             * @returns {Promise<void>}
             */
            async handleCheckAllStyle(){
                let that = this
                let checkedCount = 0;//选定的条数
                let totalLen = 0;//总可勾选条数
                that.orderList.forEach(item=>{
                    if(item.disabled !== true){
                        totalLen++;
                    }
                })
                //统计可勾选的已勾选条目
                that.orderList.forEach(item=>{
                    if(item.checked === true && item.disabled === false) checkedCount++;
                })
                that.isIndeterminate = checkedCount > 0 && totalLen > checkedCount;//有勾选 但是能勾的没勾完
                if(totalLen === checkedCount){
                    if(totalLen > 0){
                        that.isCheckedAll = true;//能勾的已经全部勾选
                    }else{
                        that.isCheckedAll = false;//没有能勾选的
                        that.checkAllDisabled = true;//全选禁用
                    }
                }
            },

            //获取数据
            async getData(){
                let that = this
                that.orderList = []
                res.data.orderList.list.forEach(item=>{
                    item.checked = false
                    item.disabled = parseFloat(item.payable_amount).toFixed(2) === '0.00';//禁选
                    that.orderList.push(item)
                })
                that.$nextTick(()=>{
                    that.handleCheckAllStyle()//初始化全选按钮的状态
                })
            },
        }
</script>

el-checkbox 全选 table数据

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

<el-checkbox 
  v-model="isCheckedAll" 
  @change="handleCheckAll($event)" 
  :indeterminate="isIndeterminate"
>全选</el-checkbox>

<tr v-for="item in orderList">
  <td>
    <el-checkbox 
      v-model="item.checked" 
      @change="handleCheckSingle($event,item)"
      >单选</el-checkbox>
  </td>
</tr>

<script>
    Vue.createApp({
        data() {
            return {
                orderList:[],
                isIndeterminate:false,
                isCheckedAll:false,
            }
        },
        mounted(){
            this.getData()
        },
        methods:{
            /**
             * 处理单个勾选按钮
             * @param e
             * @param item
             * @returns {Promise<void>}
             */
            async handleCheckSingle(e,item){
                let that = this
                item.checked = e === true;
                that.handleCheckAllStyle()
            },
            /**
             * 处理全部勾选按钮
             * @param e
             * @returns {Promise<void>}
             */
            async handleCheckAll(e){
                let that = this
                that.orderList.forEach(item=>{
                    item.checked = e === true
                })
                that.handleCheckAllStyle()
            },
            /**
             * 处理全选按钮的样式
             * @returns {Promise<void>}
             */
            async handleCheckAllStyle(){
                let that = this
                let checkedCount = 0
                let len = that.orderList.length
                that.orderList.forEach(item=>{
                    if(item.checked === true) checkedCount++;
                })

                that.isIndeterminate = len > checkedCount && checkedCount > 0
                that.isCheckedAll = len === checkedCount
            },
            /**
             * 获取选定的id
             * @returns {Promise<*[]>}
             */
            async getIdList(){
                let that = this
                let idList = []
                that.orderList.forEach(item=>{
                    if(item.checked === true) idList.push(item.id)
                })
                return idList
            },
            //获取数据,
            //拿到接口数据后 ,首先foreach, 每一行加入一个checked字段 ,默认false 不勾选
            async getData(){
                res.data.orderList.list.forEach(item=>{
                    item.checked = false
                    that.orderList.push(item)
                })
                that.isIndeterminate = false
            },
        }
    }).use(ElementPlus).mount("#vueapp");
</script>

效果.png

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部分
<button @click="toReg()">注册</button>
#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

<input placeholder="请输入验证码" @input="onMyInput" />   

<script>
export default {
        data() {
            return {
                code:'',
            }
        },
        methods: {
            onMyInput(e){
                let str = e.detail.value//获取input内的所有内容 [新值]
                console.log(str)
                
                let reg = /^[0-9]*$/;
                if(!reg.test(str)){
                    return this.code //验证不通过返回旧值
                }
                this.code = str //验证通过 新值覆盖旧值
            },
        }
}
</script>

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

单个变量类型和默认值
let name : string = '张三'
let age : number = 20
let arr : Array<any> = [1,2,3,'a','b','c']

对象key的属性和默认值
let obj = {
  dataList:{
    type:Array<any>(),//类型
    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;
}

参考

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

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

<button :disabled="state.loading">提交1</button>
<button :disabled="state.loading">提交2</button>
<button :disabled="state.loading">提交3</button>
js
const 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用来做全选

<div v-for="item in state.list" :key="item.id" class="prolistss">
  <el-checkbox v-model="item.is_checked" true-label="1" false-label="0" @change="handleCheckedCitiesChange" />
  <el-image :src="item.url"/>
</div>


<el-checkbox 
  v-model="checkAll" 
  :indeterminate="isIndeterminate" 
  @change="handleCheckAllChange" label="全选" size="large" />

单行数据的勾选变化时 ,统计勾选的数量 ,来改变全选按钮的状态

const handleCheckedCitiesChange = (value: string[]) => {
  let myLength = state.list.length //页面数据总共多少行
  var myCount = 0 //已选行数

  state.list.forEach((item:any)=>{
    if(item.is_checked == '1'){
      myCount++
    }
  })
  if(myCount == myLength){
    console.log('全选')
    isIndeterminate.value = false //取消全选按钮的 模糊状态
    checkAll.value =  true //全选按钮 选中
  }else{
    if( myCount > 0 ){
      console.log('部分选')
      isIndeterminate.value = true
    }else{// 
      console.log('全不选')
      isIndeterminate.value = false
      checkAll.value =  false
    }
  }
}

全选按钮点击时 ,修改所有单行按钮的状态

const handleCheckAllChange = (trueOrFalse: boolean) => {
  console.log('handleCheckAllChange',trueOrFalse)
  if(trueOrFalse){ //全选按钮 选中
    state.list.forEach((item:any)=>{
      item.is_checked = '1'
    })
  }else{ //全选按钮 取消
    state.list.forEach((item:any)=>{
      item.is_checked = '0'
    })
  }
  isIndeterminate.value = false //取消模糊状态
}

el-table多选批量设置

数据行数多 ,客户想要批量设置
勾选后改变其中一行其他选定的行跟随改变
未勾选的行可以分别设置

图片.png

模板
    <el-table @selection-change="handleSelectionChange">
      <el-table-column>
        <template #default={row}>
          <el-input-number v-model="row.apply_num_limit" @change="handleChange(row)" />
        </template>
      </el-table-column>
    </el-table>
js
<script lang="ts" setup>
const list= ref(Array<any>()) //本页面数据
const selectedIdList = ref(Array<any>()) //保存勾选的行ID
const handleSelectionChange = (val:any)=>{
  selectedIdList.value = [] //清空勾选的ID
  val.forEach((item:any) => { //记录勾选的ID
    selectedIdList.value.push(item.id)
  });
}
const handleChange = (row:any) => {
  //批量设置
  if(selectedIdList.value.indexOf(row.id) != -1){//如果当前改变行是勾选状态
    list.value.forEach((item:any)=>{
      if(selectedIdList.value.indexOf(item.id) != -1){//页面数据中的其他行也是勾选状态
        item.apply_num_limit = parseInt(row.apply_num_limit) //赋值
      }
    })
  }
}
</script>

下拉菜单el-select

                <el-select 
                  v-model="state.pub_flow_main_id" 
                  class="m-2" 
                  placeholder="成本中心" 
                  size="large"
                  :disabled="true" //禁用
                  filterable //筛选
                  @change="functionName"//变化事件 参数(val) 为<el-option> 中的:value="item.id"
                  clearable //可清空
                  >
                    <el-option
                      v-for="item in state.flowList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>

vue3 + ts 子组件更新props

子组件可以直接修改父组件传进来的值
子组件定义事件名称update:事件名


const emits = defineEmits(['update:dataList','addCartEvent'])
//子组件定义属性
const props = defineProps({
  dataList:{
    type:Array,
    default:Array<any>(),
  },
  showTotalAmount:{
    type:Boolean,
    default:true
  },
  showTotalNum:{
    type:Boolean,
    default:false
  }
})
/**
 * 删除购物车物料
 */
const toDel = (row:any = null)=>{
  ElMessageBox.confirm(
    '确定删除选定的物料?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(()=>{
    props.dataList.forEach((item:any,idx:any) => {
      if(item.id == row.id){
        props.dataList.splice(idx,1)
      }
    });
    -- 触发事件  子组件触发  父组件数据也会跟着边
    emits('update:dataList',props.dataList)
  })
  .catch(e=>{
    // console.log('取消删除')
  })
}

父组件调用子组件

        <checkList 
          v-model:dataList="父组件变量" 
          @update:dataList="handUpdateDataList"  -- 可有可无 
          @addCartEvent="addCart(state.multSelected)" -- 与本例子无关
          >
        </checkList>

vue3 + ts 定义多个props属性

//子组件定义属性

const props = defineProps({
  dataList:{
    type:Array<any>(),
    default:[],
  },//
  num:{
    type:Number,
    default:0
  }
})

vue3 + ts 定义多个computed

const num = computed(()=>{
  let totalNum = 0
  props.dataList.forEach((item:any) => {
    totalNum += item.purchaseNum
  });
  return totalNum
})
const amount = computed(()=>{
  let totalAmount = 0
  props.dataList.forEach((item:any) => {
    totalAmount += parseFloat(item.purchaseNum) * parseFloat(item.get_price.tax_price)
  });
  return totalAmount
})

VUE3 子组件watch props的值

可以写多个watc ,

子组件
const mycontent = ref('')

const props = defineProps({
  content: {
    type: String,
    default() {
      return ''
    },
  },
});

watch(
  ()=>props.content,//由于被监听的变量类型问题  ,用这种写法 
  () => {
    //
    mycontent.value = props.content  
  }
)
watch(
  mycontent, 
  (val) => {
    //
    emit('update:content', val)
  }
)

VUE3 使用pinia代替VUEX

每个组件都维护着自己的数据 ,当多个组件共用一份数据的时候就需要使用pinia
比如头部有一个我的购物车 ,显示当前购物车内的商品
多个页面中可以向购物车加入商品 ,每次加入商品头部的购物车都需要刷新

图片.png

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()
//读取数据
<span class="sale-car-bage">{{headCart.myCartNum}}</span>

VUE3 获取路由参数

import { useRoute } from "vue-router";

const route = useRoute()
let id =  route.query.id

JS转换UTC时间

2022-06-08T13:06:40.000000Z 转成 YYYY-mm-dd H:i:s

/**
 * UTC时间转换
 * @returns {string}
 * @param datetime UTC时间
 * @param dateSeprator 日期拼接符
 * @param timeSeprator 时间拼接符
 * @Eexample dateFormat("2021-09-03T22:42:05.659+00:00", "/", ":")
 *           dateFormat("2021-09-03T22:42:05.659+00:00")
 */
 export function transTimestamp(datetime, dateSeprator = '-', timeSeprator = ':') {
  if (datetime) {
    const date = new Date(datetime)
    const year = `${date.getUTCFullYear()}`
    let month = `${date.getUTCMonth() + 1}`
    let day = `${date.getUTCDate()}`
    let hour = `${date.getUTCHours()}`
    let minute = `${date.getUTCMinutes()}`
    let second = `${date.getUTCSeconds()}`

    if (month.length === 1) {
      month = `0${month}`
    }
    if (day.length === 1) {
      day = `0${day}`
    }
    if (day.length === 1) {
      day = `0${day}`
    }
    if (hour.length === 1) {
      hour = `0${hour}`
    }
    if (minute.length === 1) {
      minute = `0${minute}`
    }
    if (second.length === 1) {
      second = `0${second}`
    }
    return `${year}${dateSeprator}${month}${dateSeprator}${day} ${hour}${timeSeprator}${minute}${timeSeprator}${second}`
  }
}

ref

ref创建响应式变量 ,改变变量的值可以使用 xxx.value = xxx

const checkAll = ref(false)
//方法中使用
const func = ()=>{
  checkAll.value = true
}

elementui table 默认勾选

elementui table中 type="selection"类型的勾选

<el-table
      ref="multipleTableRef"
      :data="state.list"
      height="550"
      border
      style="width: 100%; font-size:12px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" label="序号" width="70" >
</el-table>

加载完数据后 ,要实现的效果

图片.png

当请求接口后 ,根据某个字段初始化勾选状态
接口数据赋值给页面后 ,在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

                <el-date-picker 
                  v-model="state.hope_delivery" 
                  :disabled-date="disabledDate" 
                  format="YYYY-MM-DD" 
                  value-format="YYYY-MM-DD" 
                  type="date" 
                  placeholder="选择期望交期" 
                />

设置禁用日期 ,组件内的每个日期都会挨个的传入 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时的效果

图片.png

element-ui-plus 顶部提示

图片.png

     ElMessage({
      message: res.msg,
      type: 'success',
    })

element-ui-plus 弹窗确认

图片.png

     ElMessageBox.alert('设置成功', '提示', {
      confirmButtonText: '确定',
      callback: (action:any) => {
        //后续操作
      },
    })

element-ui-plus confirm

图片.png

    ElMessageBox.confirm(
      '确定要添加此物料吗',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    .then(() => {
      console.log('点击确定')
    })
    .catch(() => {
      console.log('点击取消')
    })

弹窗输入

图片.png

注意:这样写当用户点击取消 控制台会抛出一个错误 ,阻止程序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对外暴露方法 ,供子组件调用

<script lang="ts" setup>
/**
 * 组件自身刷新数据
 */
const flushData = ()=>{
  console.log('flushData')
}
defineExpose({
  flushData
})
</script>

子组件引用孙子组件 headCart ,并且子组件也对外暴露方法 ,供父组件调用

<template>
 <!-- 孙子组件 -->
  <HeadCart ref="headCartRef"></HeadCart>
<template>

<script lang="ts" setup>
  import HeadCart from "./headCart.vue" //引入孙子组件

  const headCartRef = ref() //拿到孙子组件的引用

  //子组件定义方法 调用孙子方法
  const flushHeadCart = ()=>{
    headCartRef.value.flushData()  
  }
  //子组件对外暴露
  defineExpose({
    flushHeadCart
  })
</script>

父组件引入子组件

<template>
 <Header ref="headerRef"></Header>
</template>

<script lang="ts" setup>
import Header from "/src/components/header.vue";

const headerRef = ref()

const addSingleCart = (item: any) => {
  item.num = 1
  req('eshopAddCart',{data:JSON.stringify([item])})
  .then(res=>{
    headerRef.value.flushHeadCart()
  })
};
</script>

vue点击按钮触发了后边的事件

图片.png

用@click.stop="" 解决
<el-button @click.stop="rushToBuy(item2.id)">抢购</el-button>

计算属性computed 和 v-for

接口返回的价格数据都是六位小数模板中展示时{{price}}需要处理
接口返回的数据放在state.preparedMaterialsList ,利用计算属性处理价格 ,再生成一个新的变量 , 模板中使用这个新的变量

图片.png

模板中 v-for遍历computed返回的变量preparedMaterialsList 而不是state.preparedMaterialsList

图片.png

四舍五入,保留两位小数

数字 : 4.00500.toFixed(2) 结果并不是4.01 ,而是4.00
自定义方法

/**
 * 四舍五入保留两位
 */
const myToFixed = (val:any)=>{
  return (Math.round(parseFloat(val) * 100)/100).toFixed(2)
}

模板中

<span style="font-size: 12px">¥</span>{{myToFixed(price)}}</span>

微信小程序判断当前环境

当前环境是指, 开发环境 ,体验环境 ,正式环境

日常本地代码开发时 ,小程序所处的环境是开发环境
发布体验版小程序后 ,就成了体验环境
正式发布后 ,变成了正式环境
通常这三种环境下调用的后台接口地址是不同的
通过__wxConfig.envVersion获取当前环境 ,配置不同的接口地址
一般都写在一个单独的js配置文件里 Config.js

#Config.js

//Api配置
const ApiConfig = {}

//['develop','trial','release']分别对应 开发版,体验版,正式版
console.log('当前微信小程序环境',__wxConfig.envVersion)

const env = __wxConfig.envVersion 
if(env == 'develop'){
    ApiConfig.apiurl = "http://localhost/api/"
    ApiConfig.weburl = "http://localhost/"
}
if(env == 'trial'){
    ApiConfig.apiurl = "http://mydevlop.com.cn/api/"
    ApiConfig.weburl = "http://mydevlop.com.cn/"
}
if(env == 'release'){
    ApiConfig.apiurl = "https://prod.com/api/"
    ApiConfig.weburl = "https://prod.com/"
}

VUE2 父子组件传值

用elementui dialog做为子组件

父组件传递visible控制子组件是否显示
子组件通过props接收visible , 但是子组件内部不能直接修改父组件传过来的值.
所以在子组件内部定义一个本地变量 myVisible 用来保存 props接收的值
并且通过watch方法监听接收的值, 去更新内部myVisible 变量
子组件关闭需要通知父组件, 所以dialog的close方法需上报数据@close="$emit('dialogClose')"父组件接收并更新visible的值

#父组件
<ChangePassword v-bind:visible="visible" @dialogClose="visible=false"></ChangePassword>
data: function () {
    return {
      visible: false
    }
  },

#子组件
<template>
  <el-dialog title="修改密码" :visible.sync="myVisible" @close="dialogClose" :append-to-body="true">
    <el-form :model="form">
      <el-form-item label="新密码" :label-width="formLabelWidth">
        <el-input v-model="form.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码确认" :label-width="formLabelWidth">
        <el-input v-model="form.rePassword" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="myVisible = false">取 消</el-button>
      <el-button type="primary" @click="myVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
const axios = require('axios')
export default {
  name: 'ChangePassword',
  data () {
    return {
      form: {
        password: '',
        rePassword: ''
      },
      formLabelWidth: '120px',
      myVisible: false
    }
  },
  props: ['visible'],
  watch: {
    visible: function (newV, oldV) {
      this.myVisible = newV
    }
  }
}
</script>

前端排序

接口返回的数据进行排序,

let arr = [
{'id':'1','name':'aaa','price':'1.0','getInfo':{'spec':'1'}},
{'id':'1','name':'aaa','price':'20.0','getInfo':{'spec':'2'}},
{'id':'1','name':'aaa','price':'9999.9','getInfo':{'spec':'3'}},
]

arr.sort(sortBy('id',true))//按照id正序
arr.sort(sortBy('id',false))//按照id倒序
arr.sort(sortBy('getInfo.spec',false))//按照`getInfo.spec`倒序

const sortBy = (attr:any,rev:any)=>{
  //第二个参数为true or false 若没有传递 默认升序排列
  if(rev ==  undefined){
      rev = 1;
  }else{
      rev = (rev) ? 1 : -1;
  }
  return function(a,b){ 
      let arr = attr.split('.')
      if(arr.length > 1){
        a = a[arr[0]][arr[1]];
        b = b[arr[0]][arr[1]];
      }
      else{
        a = a[attr];
        b = b[attr];
      }
//注意转成整数型
      a = parseInt(a)
      b = parseInt(b)

      if(a < b){
          return rev * -1;
      }
      if(a > b){
          return rev * 1;
      }
      return 0;
  }
}

datepicker

禁选今天之前的日期 ,今天和往后可以选择

<el-date-picker v-model="state.hope_delivery" :disabled-date="disabledDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="选择期望交期" />


const disabledDate = (time: Date) => {
  //返回true的日期会被禁用
  return time.getTime() <= (Date.now() -  (3600 * 24 * 1000))
}

JQ获取name相同的radio被选中的值：

$(':radio[name="choose_type"]:checked').val();

JQ逗号切割字符串 ,逗号拼接数组

    exportIdList = "1,2,3,4"
    // exportIdList = "1"
    let arr = exportIdList.split(',')
    console.log(arr)
    let str = arr.join(',')
    console.log(str)

图片.png

数组为空的情况

    exportIdList = ""
    let arr = exportIdList.split(',')
    console.log(arr)
    let str = arr.join(',')
    console.log(str)

图片.png

JQ 根据值删除数组中的某个元素

arr.splice($.inArray(val,arr),1)

JQ 勾选指定订单导出 checkbox


function checkOne(that) {
    let val = that.value //值
    let exportIdList = $('#exportIdList').val() //隐藏input
    let isChecked = that.checked

    if (isChecked == true){
        let arr = []
        if (exportIdList != ""){
            arr = exportIdList.split(',')
        }
        arr.push(val)
        exportIdList = arr.join(',')
        console.log(exportIdList)
    }
    else{
        let arr = exportIdList.split(',')
        arr.splice($.inArray(val,arr),1)
        exportIdList = arr.join(',')
        console.log(exportIdList)
    }
    $('#exportIdList').val(exportIdList)

}

jq勾选导出支持分页
隐藏input

<input type="hidden" name="exportIdList" value="" id="exportIdList">

表头
<th style="width: 30%" class="zjtextmiddle"  >
  勾选导出
  <input type="checkbox" class="checkAll" id="checkAll" onclick="checkAll(this)" />
</th>

列表中

<input type="checkbox" value="<%item.id%>" class="checkOne" onclick="checkOne(this)"/>


//单选
function checkOne(that) {
    let val = that.value //值
    let exportIdList = $('#exportIdList').val() //隐藏input
    let isChecked = that.checked//是否选定

    if (isChecked == true){
        let arr = []
        if (exportIdList != ""){
            arr = exportIdList.split(',')
        }
        //id不存在就加入
        if (arr.indexOf(val) == -1){
            arr.push(val)
        }
        exportIdList = arr.join(',')
    }
    else{
        let arr = exportIdList.split(',')
        arr.splice($.inArray(val,arr),1)
        exportIdList = arr.join(',')
    }
    $('#exportIdList').val(exportIdList)

}

//本页全选
function checkAll(that) {
    let isChecked = that.checked //全选框是否选定
    let exportIdList = $('#exportIdList').val() //隐藏input

    //已经选定的id
    let finalArr = []
    if (exportIdList != ""){
        finalArr = exportIdList.split(',')
    }

    //本页所有id
    let currArr = []
    $('.checkOne').each(function(key,item){
        currArr.push(item.value)
    })

    //本页全选
    if (isChecked == true) {
        //全部选定
        $('.checkOne').each(function(key,item){
            $(item).prop('checked',true)
        })
        currArr.forEach(function(item){
            if (finalArr.indexOf(item) == -1){
                finalArr.push(item)
            }
        })
        // finalArr = finalArr.concat(currArr) //合并
        exportIdList = finalArr.join(',') //拼接字符串

    }//本页全取消
    else{
        $('.checkOne').each(function(key,item){
            $(item).prop('checked',false) //全部取消选定
        })
        //移除本页的id
        currArr.forEach(function(item){
            finalArr.splice($.inArray(item,finalArr),1)
        })
        exportIdList = finalArr.join(',') //拼接字符串
    }
    $('#exportIdList').val(exportIdList)
}

#分页数据加载完执行
        handleCheckBox:function() {
            let isAllChecked = true
            let exportIdList = $('#exportIdList').val()
            let arr = []
            if (!exportIdList || exportIdList == ""){
                return
            }
            arr = exportIdList.split(',') //已经选定的id数组

            //本页所有id
            $('.checkOne').each(function(key,item){
                let id = item.value
                if (arr.indexOf(id) > -1){
                    $(item).prop('checked',true)
                }else {
                    isAllChecked = false
                }
            })
            console.log('全部选定',isAllChecked)
            if (isAllChecked == true){
                $('#checkAll').prop('checked',true)
            }
        }

jq通过that获取input的值

<input type="checkbox" value="<%item.id%>" class="checkOne" onclick="checkOne(this)"/>

function checkOne(that) {
    console.log(that)
    let val = that.value
    console.log(val)
}

微信小程序判断当前环境
当前环境是指, 开发环境 ,体验环境 ,正式环境
日常本地代码开发时 ,小程序所处的环境是开发环境
发布体验版小程序后 ,就成了体验环境
正式发布后 ,变成了正式环境
通常这三种环境下调用的后台接口地址是不同的
通过__wxConfig.envVersion获取当前环境 ,配置不同的接口地址
一般都写在一个单独的js配置文件里 Config.js

#Config.js

//Api配置
const ApiConfig = {}

//['develop','trial','release']分别对应 开发版,体验版,正式版
console.log('当前微信小程序环境',__wxConfig.envVersion)

const env = __wxConfig.envVersion 
if(env == 'develop'){
    ApiConfig.apiurl = "http://localhost/api/"
    ApiConfig.weburl = "http://localhost/"
}
if(env == 'trial'){
    ApiConfig.apiurl = "http://mydevlop.com.cn/api/"
    ApiConfig.weburl = "http://mydevlop.com.cn/"
}
if(env == 'release'){
    ApiConfig.apiurl = "https://prod.com/api/"
    ApiConfig.weburl = "https://prod.com/"
}

JS给对象添加新的键值对

    let myKey = 'status'
    let value = 200
    let myData = {}
    myData[myKey] = value
    console.log(myData)

结果

有关前端VUE3,JQ,uniapp,综合(Ctrl+F搜索)的更多相关文章

ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll
计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
ruby - 如何搜索有用的 ruby - 2
寻找有用的ruby的好网站是什么？最佳答案 AgileWebDevelopment列出插件(虽然不是rubygems，我不确定为什么)，并允许人们对它们进行评级。RubyToolbox按类别列出gem并比较它们的受欢迎程度。Rubygems有一个搜索框。StackOverflow对最有用的rails插件和rubygems有疑问。关于ruby-如何搜索有用的ruby，我们在StackOverflow上找到一个类似的问题： https://stacko
ruby - 如何搜索、递增和替换 Ruby 字符串中的整数子字符串？ - 2
我有很多这样的文档:foo_1foo_2foo_3bar_1foo_4...我想通过获取foo_[X]的所有实例并将它们中的每一个替换为foo_[X+1]来转换它们。在这个例子中:foo_2foo_3foo_4bar_1foo_5...我可以用gsub和一个block来做到这一点吗？如果不是，最干净的方法是什么？我真的在寻找一个优雅的解决方案，因为我总是可以暴力破解它，但我觉得有一些正则表达式技巧值得学习。最佳答案我(完全)不懂Ruby，但类似这样的东西应该可以工作:"foo_1foo_2".gsub(/(foo_)(\d+)/
ruby - Ruby 中的必应搜索 API - 2
我读了"BingSearchAPI-QuickStart"但我不知道如何在Ruby中发出这个http请求(Weary)如何在Ruby中翻译“Stream_context_create()”？这是什么意思？"BingSearchAPI-QuickStart"我想使用RubySDK，但我发现那些已被弃用前(Rbing)https://github.com/mikedemers/rbing您知道Bing搜索API的最新包装器(仅限Web的结果)吗？最佳答案好吧，经过一个小时的挫折，我想出了一个办法来做到这一点。这段代码很糟糕，因为它是
Ruby#index 方法 VS 二进制搜索 - 2
给定一个元素和一个数组，Ruby#index方法返回元素在数组中的位置。我使用二进制搜索实现了我自己的索引方法，期望我的方法会优于内置方法。令我惊讶的是，内置的在实验中的运行速度大约是我的三倍。有Rubyist知道原因吗？最佳答案内置#indexisnotabinarysearch，这只是一个简单的迭代搜索。但是，它是用C而不是Ruby实现的，因此自然可以快几个数量级。关于Ruby#index方法VS二进制搜索，我们在StackOverflow上找到一个类似的问题：
ruby - 使用 Ransack 搜索枚举字段 - 2
我有一个表，'jobs'和一个枚举字段'status'。status具有以下枚举集:enumstatus:[:draft,:active,:archived]使用ransack，我如何过滤表，比如说，所有事件记录？最佳答案你可以像这样在模型中声明自己的掠夺者:ransacker:status,formatter:proc{|v|statuses[v]}do|parent|parent.table[:status]end然后您可以使用默认的搜索语法_eq来检查相等性，如下所示:Model.ransack(status_eq:'ac
ruby-on-rails - Rails 4 postgres 全文搜索错误(范围) - 2
我一直在使用postgres关注railscast的全文搜索，但我不断收到以下错误#的未定义局部变量或方法“作用域”我关注了railscast确切地。我安装了所有正确的gem。(pg_search，pg)。这是我的代码文章Controller(我在这里也使用acts_as_taggable)defindex@articles=Article.text_search(params[:query]).page(params[:page]).per_page(3)ifparams[:tag]@articles=Article.tagged_with(params[:tag])else@art
ruby - 如何使用部分字符串搜索数组并返回索引？ - 2
我想使用部分字符串搜索数组，然后获取找到该字符串的索引。例如:a=["Thisisline1","Wehaveline2here","andfinallyline3","potato"]a.index("potato")#thisreturns3a.index("Wehave")#thisreturnsnil使用a.grep将返回完整的字符串，使用a.any?将返回正确的true/false语句，但都不会返回匹配的索引找到了，或者至少我不知道该怎么做。我正在编写一段代码，该代码读取文件、查找特定header，然后返回该header的索引，以便它可以将其用作future搜索的偏移量。如果
(附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

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

有关前端VUE3,JQ,uniapp,综合(Ctrl+F搜索)的更多相关文章

随机推荐