Leanote's Blog

// this.$options.data()//是原始data中的数据
// this.$data //是改变后的data中的数据
this.$root //表示app.vue中data的数据
Object.assign(this.$data, this.$options.data())

Number.prototype.toFixed = function (n) {
    if (n != undefined && (isNaN(n) || Number(n) > 17 || Number(n) < 0)) {
        throw new Error("输入正确的精度范围");
    }
    // 拆分小数点整数和小数
    var num = this;
    var f = '';
    if (Number(num) < 0) {
        num = -Number(num);
        f = '-';
    }
    var numList = num.toString().split(".");
    // 整数
    var iN = numList[0];
    // 小数
    var dN = numList[1];
    n = parseInt(n);
    if (isNaN(n) || Number(n) === 0) {
        // 0或者不填的时候，按0来处理
        if(dN === undefined){
            return num + '';
        }
        var idN = Number(dN.toString().substr(0, 1));
        if (idN >= 5) {
            if (Number(iN) < 0) {
                iN = Number(iN) - 1
            } else {
                iN = Number(iN) + 1
            }
        }
        return iN + '';
    } else {
        var dNL = dN === undefined ? 0 : dN.length;
        if (dNL < n) {
            // 如果小数位不够的话，那就补全
            var oldN = num.toString().ind

.rflex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.cflex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.flex_justify_between {
    -webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.flex_justify_around {
    -webkit-box-pack: space-around;
    -ms-flex-pack: space-around;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}
.flex_justify_center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.flex_justify_end {
    -webkit-box-pack: end;
    -moz-justify-co

const confirmText = ['订单提交成功!', '您现在可以选择进入订单列表查看订单，也可返回商城首页继续选购！']
const newDatas = []
const h = this.$createElement
for (const i in confirmText) {
    newDatas.push(h('p', null, confirmText[i]))
}
this.$confirm(
    '提示',
    {
        title: '提示',
        message: h('div', null, newDatas),
        showCancelButton: true,
        confirmButtonText: '继续购物',
        cancelButtonText: '查看订单',
        type: 'success'
    }
).then(() => {
}).catch(() => {
})

注意, 跨域的图片地址不能下载, 会直接打开, 没跨域的可以下载

第一个: 图片下载点击会打开新标签页, 解决: href的url后面加上?response-content-type=application/octet-stream

<a 
:href="item.url + '?response-content-type=application/octet-stream'"
:download="item.name">点击下载</a>

第二个

// url为下载地址
fetch(url, { method: 'get', headers: { 'Content-Type': 'image/jpeg' } }).then(
    res => res.blob().then(blob => {
        var reader = new FileReader()
        reader.readAsDataURL(blob)   // 转换为base64，可以直接放入a标签href
        reader.onload = function (e) {
            var downItem = document.createElement('a')   // 转换完成，创建一个a标签用于下载
            downItem.style.display = "none"
            downItem.download = name
            downItem.href = String(e.target.result)
            downItem.click()
            downItem.remove()
            // document.body.appendChild(downItem);
            // downItem.click()
            // document.body.removeChild(downItem);
        }
    })
)

通用方法: 跨域图片下载, 未跨域的也能下载

有options的使用方式

rules: {
    name: [
        { required: true, message: "", trigger: "blur" },
        { validator: (...args) => validatePrice({ min: 1, max: 100 }, ...args), trigger: "blur" }
    ],
},

验证方法

/**
 * 校验用户名是否重名
 * @param rule
 * @param value
 * @param callback
 */
export const validateUsername = (rule, value, callback) => {
    getDetails(value).then(response => {
        if (window.boxType === "edit") callback()
        const result = response.data.data
        if (result !== null) {
            callback(new Error("用户名已经存在"))
        } else {
            callback()
        }
    })
}
/**
 * 校验字符串(多合一按需选择需要的校验)
 * options: {
 *      min: Number | String, 最小长度, 默认 1
 *      max: Number | String, 最大长度, 无限
 *      underline: Boolean, 是否需要下划线校验, 默认 true
 *      number: Boolean, 是否需要数字校验, 默认 true
 *      chinese: Boolean, 是否需要中文校验, 默认 true
 *      letter: Boolean, 是否需要字母校验, 默认 true
 *      start: Boolean, 是否从开头校验, 默认 true
 *      end: Boolean

两列表格(完整版)

<template>
    <div class="permission">
        <div class="check_all_box">
            <el-checkbox
                v-model="checkAll"
                :indeterminate="!!checkedList && !! checkedList.length && isIndeterminate['all']"
                @change="handleCheckAllChange"
            >
                全选
            </el-checkbox>
        </div>
        <el-checkbox-group
            v-model="checkedList"
            @change="handleItemChange"
        >
            <template v-for="(Ritem, Ridx) in allPermission">
                <div
                    class="check_item_box rflex"
                    :key="Ritem[allPermissionDataType.code]"
                >
                    <div class="parent_box border_box rflex flex_align_items_center">
                        <el-checkbox
                            :label="Ritem[allPermissionDataType.code]"
                            :indeterminate="getItemAll(Ritem)"
                 

在main.js 或者全局路由钩子前面运行一次

function syncSessionStorage() {
    if (!sessionStorage.length) {
        // 这个调用能触发目标事件，从而达到共享数据的目的
        localStorage.setItem('getSessionStorage', Date.now())
    }
    // 该事件是核心
    window.addEventListener('storage', function (event) {
        if (event.key == 'getSessionStorage') {
            // 已存在的标签页会收到这个事件
            localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage))
            localStorage.removeItem('sessionStorage')
        } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
            // 新开启的标签页会收到这个事件
            var data = JSON.parse(event.newValue)
            for (var key in data) {
                sessionStorage.setItem(key, data[key])
            }
            // 额外的触发赋值store操作
            const { content = {} } = JSON.parse(sessionStorage[keyName + "login_data"]) || {}
            store.commit('SET_ACCESS_TOKEN', content.access_token)
            store.commi

新建一个文件mock/index.js

// 首先引入Mock
const Mock = require('mockjs')
// 设置拦截ajax请求的相应时间
Mock.setup({
    timeout: '200-600'
})
let configArray = []
// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/)
files.keys().forEach((key) => {
    if (key === './index.js') return
    configArray = configArray.concat(files(key).default)
})
// 注册所有的mock服务
configArray.forEach((item) => {
    for (let [path, target] of Object.entries(item)) {
        let protocol = path.split('|')
        Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target)
    }
})

在main.js里引入

import "../mock" //mock文件路径

定义接口

import Mock from "mockjs"
import { getUrlParams } from "@/util/util" // 截取get请求传递params时候url的参数
export default {
    'get|/mock/clouldStoreSKU/page': option => {
        console.log("option", option)
        const { page, page_size } = option.body || getUrlParams(option.url)
        let resData = Mock.mock({
            count: 10,