常用代码片段

常用代码片段

Data 数据重置

常用于表单编辑后重置

// Vue2 
Object.assign(this.$data, this.$options.data())
// vue3
setup() {
    const getResetState = () => {
        return {
            num: 1,
        };
    };
    const state = reactive({ ...getResetState() });
    const reSet = () => {
        Object.assign(state, getResetState());
    };
    return {
        ...toRefs(state),
        reSet,
    };
},

本地File文件 生成临时路径

用于图片视频等，预览显示使用

let fileUrl = window.URL.createObjectURL(file);

通过Url获取图片宽高，异步

/* 获取图片宽高 */
const getImgInfo = (fileUrl) => {
  return new Promise((reslove) => {
    let img = new Image();
    img.src = fileUrl;
    img.style.display = "none";
    img.onload = () => {
      let { width, height } = img;
      reslove({ width, height });
    };
  });
};

解构赋值，多层

const userData = {
    name: "webwlx",
    age: 23,
    userInfo: {
        sex: 1,
        link: "https://webwlx.com/",
    },
};
let {
    name,
    age,
    userInfo: { sex, link },
} = userData;

Vue 全局挂载

const name = 'webwlx'
// Vue 2 
import Vue from 'vue'
Vue.prototype.$name = name 
// Vue 3
import { createApp } from 'vue'
import App from './App'
const app = createApp(App)
app.config.globalProperties.$name = name