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(() => {
})
?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,
我们可以把函数式组件想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTML
Stateless(无状态)`:组件自身是没有状态的
Instanceless(无实例):组件自身没有实例,也就是没有this
由于函数式组件拥有的这两个特性,我们就可以把它用作高阶组件(High order components),所谓高阶,就是可以生成其它组件的组件。就像日本的高精度的母机。
那创造一个函数式组件吧
functional: true
加上render function
,就是一个最简单的函数式组件啦,show your the code, 下面就创建一个名为FunctionButton.js的函数式组件
export default {
name: 'functional-button',
functional: true,
render(createElement, context) {
return createElement('button', 'click me')
}
}
就像上文所讲的,函数式组件没有this,参数就是靠context来传递的了,下面我们看下context有哪些属性呢
Render context
props
children
slots (a slots object)
parent
listeners
injections
data
其中上面的data包含了其他属性的引用,nibility。 在下面的范例中会有具体使用
现在创建一个App.vue来引入上面的函数式组件
<template>
<FunctionalButton>
click me
</FunctionButton>
</template>
上面的click me就是FunctionButton.js的childern属性了,我们可以把组件改造下,由App.vue来定义组件的button按钮