2021-05-21 10:16:17    18    0    0
  1. Number.prototype.toFixed = function (n) {
  2. if (n != undefined && (isNaN(n) || Number(n) > 17 || Number(n) < 0)) {
  3. throw new Error("输入正确的精度范围");
  4. }
  5. // 拆分小数点整数和小数
  6. var num = this;
  7. var f = '';
  8. if (Number(num) < 0) {
  9. num = -Number(num);
  10. f = '-';
  11. }
  12. var numList = num.toString().split(".");
  13. // 整数
  14. var iN = numList[0];
  15. // 小数
  16. var dN = numList[1];
  17. n = parseInt(n);
  18. if (isNaN(n) || Number(n) === 0) {
  19. // 0或者不填的时候,按0来处理
  20. if(dN === undefined){
  21. return num + '';
  22. }
  23. var idN = Number(dN.toString().substr(0, 1));
  24. if (idN >= 5) {
  25. if (Number(iN) < 0) {
  26. iN = Number(iN) - 1
  27. } else {
  28. iN = Number(iN) + 1
  29. }
  30. }
  31. return iN + '';
  32. } else {
  33. var dNL = dN === undefined ? 0 : dN.length;
  34. if (dNL < n) {
  35. // 如果小数位不够的话,那就补全
  36. var oldN = num.toString().ind
2021-05-21 08:02:42    9    0    0
  1. .rflex {
  2. display: -webkit-box;
  3. display: -ms-flexbox;
  4. display: flex;
  5. -webkit-box-orient: vertical;
  6. -ms-flex-direction: row;
  7. -webkit-flex-direction: row;
  8. flex-direction: row;
  9. }
  10. .cflex {
  11. display: -webkit-box;
  12. display: -ms-flexbox;
  13. display: flex;
  14. -webkit-box-orient: vertical;
  15. -ms-flex-direction: column;
  16. -webkit-flex-direction: column;
  17. flex-direction: column;
  18. }
  19. .flex_justify_between {
  20. -webkit-box-pack: space-between;
  21. -ms-flex-pack: space-between;
  22. -webkit-justify-content: space-between;
  23. justify-content: space-between;
  24. }
  25. .flex_justify_around {
  26. -webkit-box-pack: space-around;
  27. -ms-flex-pack: space-around;
  28. -webkit-justify-content: space-around;
  29. justify-content: space-around;
  30. }
  31. .flex_justify_center {
  32. -webkit-box-pack: center;
  33. -ms-flex-pack: center;
  34. -webkit-justify-content: center;
  35. justify-content: center;
  36. }
  37. .flex_justify_end {
  38. -webkit-box-pack: end;
  39. -moz-justify-co
2021-05-19 09:45:56    39    0    0
  1. const confirmText = ['订单提交成功!', '您现在可以选择进入订单列表查看订单,也可返回商城首页继续选购!']
  2. const newDatas = []
  3. const h = this.$createElement
  4. for (const i in confirmText) {
  5. newDatas.push(h('p', null, confirmText[i]))
  6. }
  7. this.$confirm(
  8. '提示',
  9. {
  10. title: '提示',
  11. message: h('div', null, newDatas),
  12. showCancelButton: true,
  13. confirmButtonText: '继续购物',
  14. cancelButtonText: '查看订单',
  15. type: 'success'
  16. }
  17. ).then(() => {
  18. }).catch(() => {
  19. })
2021-05-17 10:08:34    8    0    0

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

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

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

第二个

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

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

2021-05-17 10:05:26    12    0    0
2021-05-13 08:55:03    8    0    0

options的使用方式

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

验证方法

  1. /**
  2. * 校验用户名是否重名
  3. * @param rule
  4. * @param value
  5. * @param callback
  6. */
  7. export const validateUsername = (rule, value, callback) => {
  8. getDetails(value).then(response => {
  9. if (window.boxType === "edit") callback()
  10. const result = response.data.data
  11. if (result !== null) {
  12. callback(new Error("用户名已经存在"))
  13. } else {
  14. callback()
  15. }
  16. })
  17. }
  18. /**
  19. * 校验字符串(多合一按需选择需要的校验)
  20. * options: {
  21. * min: Number | String, 最小长度, 默认 1
  22. * max: Number | String, 最大长度, 无限
  23. * underline: Boolean, 是否需要下划线校验, 默认 true
  24. * number: Boolean, 是否需要数字校验, 默认 true
  25. * chinese: Boolean, 是否需要中文校验, 默认 true
  26. * letter: Boolean, 是否需要字母校验, 默认 true
  27. * start: Boolean, 是否从开头校验, 默认 true
  28. * end: Boolean
2021-05-08 07:43:00    4    0    0

两列表格(完整版)

  1. <template>
  2. <div class="permission">
  3. <div class="check_all_box">
  4. <el-checkbox
  5. v-model="checkAll"
  6. :indeterminate="!!checkedList && !! checkedList.length && isIndeterminate['all']"
  7. @change="handleCheckAllChange"
  8. >
  9. 全选
  10. </el-checkbox>
  11. </div>
  12. <el-checkbox-group
  13. v-model="checkedList"
  14. @change="handleItemChange"
  15. >
  16. <template v-for="(Ritem, Ridx) in allPermission">
  17. <div
  18. class="check_item_box rflex"
  19. :key="Ritem[allPermissionDataType.code]"
  20. >
  21. <div class="parent_box border_box rflex flex_align_items_center">
  22. <el-checkbox
  23. :label="Ritem[allPermissionDataType.code]"
  24. :indeterminate="getItemAll(Ritem)"
2021-04-25 09:11:31    3    0    0

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

  1. function syncSessionStorage() {
  2. if (!sessionStorage.length) {
  3. // 这个调用能触发目标事件,从而达到共享数据的目的
  4. localStorage.setItem('getSessionStorage', Date.now())
  5. }
  6. // 该事件是核心
  7. window.addEventListener('storage', function (event) {
  8. if (event.key == 'getSessionStorage') {
  9. // 已存在的标签页会收到这个事件
  10. localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage))
  11. localStorage.removeItem('sessionStorage')
  12. } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
  13. // 新开启的标签页会收到这个事件
  14. var data = JSON.parse(event.newValue)
  15. for (var key in data) {
  16. sessionStorage.setItem(key, data[key])
  17. }
  18. // 额外的触发赋值store操作
  19. const { content = {} } = JSON.parse(sessionStorage[keyName + "login_data"]) || {}
  20. store.commit('SET_ACCESS_TOKEN', content.access_token)
  21. store.commi
2021-04-16 09:28:53    10    0    0

新建一个文件mock/index.js

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

main.js里引入

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

定义接口

  1. import Mock from "mockjs"
  2. import { getUrlParams } from "@/util/util" // 截取get请求传递params时候url的参数
  3. export default {
  4. 'get|/mock/clouldStoreSKU/page': option => {
  5. console.log("option", option)
  6. const { page, page_size } = option.body || getUrlParams(option.url)
  7. let resData = Mock.mock({
  8. count: 10,
2021-04-15 09:43:37    3    0    0

什么是函数式组件

我们可以把函数式组件想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTML

对于函数式组件,可以这样定义:

Stateless(无状态)`:组件自身是没有状态的
Instanceless(无实例):组件自身没有实例,也就是没有this
由于函数式组件拥有的这两个特性,我们就可以把它用作高阶组件(High order components),所谓高阶,就是可以生成其它组件的组件。就像日本的高精度的母机。

下面示例的完整Demo

那创造一个函数式组件吧
functional: true加上render function,就是一个最简单的函数式组件啦,show your the code, 下面就创建一个名为FunctionButton.js的函数式组件

  1. export default {
  2. name: 'functional-button',
  3. functional: true,
  4. render(createElement, context) {
  5. return createElement('button', 'click me')
  6. }
  7. }

就像上文所讲的,函数式组件没有this,参数就是靠context来传递的了,下面我们看下context有哪些属性呢

Render context
props
children
slots (a slots object)
parent
listeners
injections
data

其中上面的data包含了其他属性的引用,nibility。 在下面的范例中会有具体使用

现在创建一个App.vue来引入上面的函数式组件

  1. <template>
  2. <FunctionalButton>
  3. click me
  4. </FunctionButton>
  5. </template>

上面的click me就是FunctionButton.js的childern属性了,我们可以把组件改造下,由App.vue来定义组件的button按钮

6/18