JavaScript 进阶营

前端VUE3,JQ,uniapp,综合

2022-03-30  本文已影响0人  江河湖海琴瑟琵琶

下拉菜单el-select

                <el-select 
                  v-model="state.pub_flow_main_id" 
                  class="m-2" 
                  placeholder="成本中心" 
                  size="large"
                  :disabled="true" //禁用
                  filterable //筛选
                  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

  1. main.ts中
import { createPinia } from 'pinia'
app.use(createPinia())
  1. src目录下创建一个文件夹名称随意piniaStore
  2. 文件夹下创建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

        }
    }
})
  1. 读取数据 修改数据
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('点击取消')
    })

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做为子组件

  1. 父组件传递visible控制子组件是否显示
  2. 子组件通过props接收visible , 但是子组件内部不能直接修改父组件传过来的值.
    所以在子组件内部定义一个本地变量 myVisible 用来保存 props接收的值
    并且通过watch方法监听接收的值, 去更新内部myVisible 变量
  3. 子组件关闭需要通知父组件, 所以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)
结果
上一篇 下一篇

猜你喜欢

热点阅读