• 当前频道:程序开发

程序开发 vue3 vuex4 中使用ts

// main.ts import { createApp } from "vue"; import App from "./App.vue"; import store from "./store"; const app = createApp(App); useAnt(app); store.forEach(({ modelName, key }) => { app.use(modelName, key); }); .mount("#app"); // store/index.ts import appStore, { key as appKey } from "./modules/app"; // import userStore, { key as userKey } from "./modules/user"; const modules = [ { modelName: appStore, key: appKey }, // { // modelName: userStore, // key: userKey // }, ]; export default modules; // store/modules/app.ts import { InjectionKey } from "vue"; import { createStore, useStore as baseUseStore, Store } from "vuex"; export interface State { now: number; } export const key: InjectionKey<Store<State>> = Symbol(); export default createStore<State>({ state: { now: Date.now() }, mutations: { setNow(state, data: number) { state.now = data; } }, actions: {} }); export function appStore() { return baseUseStore(key); } 参考: 1、TypeScript支持 2、https://github.com/vuejs/vuex/issues/1833#issuecomment-736418224

2021-01-22 11:21:00 1041 0 0
阅读详情

程序开发 ts车辆VIN码的校验算法

ts版车辆VIN码的校验算法: /* * @Autor: Jason * @Date: 2020-12-30 14:36:48 * @LastEditors: Jason * @LastEditTime: 2020-12-30 14:42:54 * @FilePath: /src/utils/verify_vin.ts * @description: vin校验 */ //车架号验证 vin export const verifyVin = (vin: string): boolean => { if (vin.length > 0 && vin.length != 17) { return false; } else { var vinVal = vin.toUpperCase(); var charToNum: { [key: string]: number } = { A: 1, B: 2, C: 3, D: 4, E: 5, F: 6, G: 7, H: 8, J: 1, K: 2, L: 3, M: 4, N: 5, P: 7, R: 9, S: 2, T: 3, U: 4, V: 5, W: 6, X: 7, Y: 8, Z: 9, }; var obj = 0; var arr = new Array(); for (var i = 0; i < vinVal.length; i++) { var temp = vinVal.charAt(i); if (charToNum[temp]) { arr[i] = charToNum[temp]; } else { arr[i] = Number(temp); } if (i == 8) { arr[i] = vinVal.charAt(i); } } var a1 = 8; for (var

2020-12-30 15:02:07 291 0 0
阅读详情

程序开发 toPinyin uniapp 文字汉字一键转拼音,转简写,转首字母

toPinyin uniapp 文字汉字一键转拼音,转简写,转首字母 封装了下使用方法,原作者: lieft@qq.com https://ext.dcloud.net.cn/plugin?id=3294 github: https://github.com/hlbj105/toPinyin 1、引入js import toPinyin from "./toPinyin" 2、转拼音 toPinyin.chineseToPinYin('你好') 输出 NiHao 3、转首字母 toPinyin.chineseToInitials(toPinyin.chineseToPinYin('你好')) 或者 toPinyin.chineseToInitials('NiHao') 输出 NH 提供个一位数组转成按照首字母排序的方法(在 utils.js 文件中): import toPinyin from "./toPinyin"; /** * 根据拼音首字母筛选排序分组 * @param {Array} arr 原数组 * @param {String} key 原数组需要筛选的字段 * @returns {Array} 返回一个[{name: A,value: []}] 格式的二维数组 */ export function getGroupByPinyin(arr, key = 'name') { if(!arr) return // 获取A-Z字母数组 let keys = [...Array(26).keys()].map((i) => String.fromCharCode(i + 65)); arr = arr.map((n) => ({ ...n, py: toPinyin.chineseToInitials( toPinyin.chineseToPinYin(n[key].substr(0, 1)) ), })); let group = []; for (const i of keys) { // 新数组一级结构,可自行修改 let item = { name: i, value: [], }; for (const j of arr) { if (j.py === i) { item.value.push(j); } } if (item.value.length > 0) { item.value.sort((a, b) => a[key].localeCompare(b[key])); group.push(item); } } return group; }

2020-11-25 18:41:11 515 0 0
阅读详情

程序开发 Vue项目导入导出csv文件

导出 安装vue插件papaparse yarn add papaparse 插件使用 首先,导出的数据一定得是一个列表,一个对象列表,例如: itemList: [ { name: '红木', type: 'P000001', price: '¥88888' }, { name: '水杉', type: 'P000002', price: '¥2000' } ] 写一个按钮,点击按钮的时候把数据导出csv文件: <a-button type="primary" @click="exportCsv()">导出指令</a-button> 点击按钮调用 exportCsv 方法,首先在script里面引用一下库 import Papa from 'papaparse' 接下来是 exportCsv 方法的实现: /** * by wjw * 导出指令csv文件 */ exportCsv () { var csv = Papa.unparse(this.itemList) // 定义文件内容,类型必须为Blob 否则createObjectURL会报错 const content = new Blob([csv]) // 生成url对象 const urlObject = window.URL || window.webkitURL || window const url = urlObject.createObjectURL(content) // 生成<a></a>DOM元素 const el = document.createElement('a') // 链接赋值 el.href = url el.download = '文件导出.csv' // 必须点击否则不会下载 el.click() // 移除链接释放资源 urlObject.revokeObjectURL(url) } 可以了。这样的话点击按钮之后就可以将数据转成csv文件导出到本地。但是记住哈,数据一定要符合格式,每条数据都是一样的。 vue 导出cvs文件https://blog.csdn.net/mmorss/article/details/82586743 导入 首先一样,写一个上传文件的按钮,点击打开文件上传对话框,选择csv文件那种。 <input type="file" id="files" ref="refFile" v-on:change="importCsv"> 当上传了文件调用 importCsv 方法,这个方法是上传csv文件之后的处理方法,逻辑根据需要自己写。 /** * by 王佳伟 * 2020年6月17日08:42:11 */ importCsv () { let selectedFile = null selectedFile = this.$refs.refFile.files[0] if (selectedFile === undefined) { return } var reader = new FileReader() reader.readAsDataURL(selectedFile) reader.onload = (evt) => { // 检查编码 // let encoding = this.checkEncoding(evt.target.result); // 将csv转换成二维数组 Papa.parse(selectedFile, { encoding: 'ANSI', complete: (res)

2020-09-24 10:23:12 521 0 0
阅读详情

程序开发 利用canvas进行图片压缩

<input type="file" name="file" id="upload"> <script> const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg'] const MAXSIZE = 3 * 1024 * 1024 const MAXSIZE_STR = '3MB' function converImageToBase64(file, callback){ let reader = new FileReader(); reader.addEventListener('load', function(e){ const base64Image = e.target.result callback && callback(base64Image); reader = null; }) reader.readAsDataURL(file); } function compress(base64Image, callback){ let maxW = 1024 let maxH = 1024 const image = new Image() image.addEventListener('load', function(e){ let ratio; // 图片压缩比 let needCompress = false; // 是否需要压缩 if(maxW < image.naturalWidth){ needCompress = true; ratio = image.naturalWidth / maxW maxH = image.naturalHeight / ratio; } if(maxH < image.naturalHeight) { needCompress = true; ratio = image.naturalHeight / maxH maxW = image.naturalWidth / ratio } // 不需要压缩 if(!needCompress) { maxW = image.naturalWidth maxH = image.naturalHeight } const canvas = document.createElement('canvas') canvas.setAttribute('id', '__compress__') canvas.width = maxW; canvas.height = maxH; canvas.style.visibility = 'visible' document.body.appendChild(canvas) const ctx = canvas.getContext('2d') ctx.clearRect(0,0, maxW, maxH); ctx.drawImage(image, 0, 0, maxW, maxH); const compressImage = canvas.toDataURL('image/jpeg', 0.8); callback && callback(compressImage) canvas.remove(); }) image.src = base64Image

2020-07-14 19:18:51 559 0 0
阅读详情

程序开发 Vue.js中provide/inject实现响应式数据更新方案

provide() { return { tb: () => this.data }; }, inject: ["tb"], computed: { list() { return this.tb(); } }, watch: { list: { deep: true, handler(e) { console.log("watch", e); } } }, 方案来自:Vue.js中provide/inject实现响应式数据更新

2020-06-18 17:14:10 1431 0 0
阅读详情

程序开发 vue中的深度选择器的三种写法

1、>>> 2、/deep/ 3、::v-deep 有时候 >>> 无效时,可以试下其他两个 vue3中为 ::v-deep(.ant-input) { //注意这里括号和选择器不要有空格,编辑器会报错 }

2020-05-07 14:55:58 834 0 1
阅读详情

程序开发 vue项目在IE11中显示 Access-Control-Allow-Headers 列表中不存在请求标头 authorization

IE提示: Access-Control-Allow-Headers 列表中不存在请求标头 authorization。 但在Chrome中是正常的,看ie到network也是有的 感谢 然后去远足 提供的解决方案: 标头其实是大小写敏感的,让后端在返回值里再加个 Authorization,已有的小写的也别删。 然后就是注意 Access-Control-Allow-Headers 里面的值中不能有空格,可以在Access-Control-Allow-Headers的值那里右键复制值,然后在其他地方粘贴看看是否有空格

2020-04-28 10:32:49 1938 0 1
阅读详情

程序开发 一段css让全站变灰

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼,国务院发布公告,决定2020年4月4日举行全国性哀悼活动。在此期间,全国和驻外使馆下半旗致哀,全国停止公共娱乐活动,4月4日10点开始,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。 想到以往默哀日访问网站时发现整站会变成全灰,即想到如果立即开始开发、设计图修改等工作也会消耗大量的时间与精力,那会不会有css可以直接处理所有的元素将他们变灰,随即想到了css3的filter(滤镜),并也证实了这一想法的可行性。 解决方案1 html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); } 解决方案2 非全站变灰我们可以将需要使用filter的元素单独加上 <html> <body> <div class="gray-filter"></div> </body> </html> <style> .fixed { position: fixed; top: 100px; left: 100px; height: 100px; width: 100px; background-color: #f00; } .gray-filter { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); } </style> 兼容IE的办法 很多小伙伴评论说IE低版本不支持该怎么办于是我Google搜索了一下是有实现办法的 实现办法是引入grayscale.js,Demo下载 grayscale.js Demo 简单查看了该js的源码后发现会将color、background-color、borderColor等属性提取出来后替换成灰色,background-image和图片会使用canvas绘制处理成灰色再替换成处理后的图片源 demo内functions.js则是对判断浏览器userAgent来识别浏览器类型与版本,做出对应的处理 参考资料与demo来源 小程序下的问题 微信小程序我尝试加在page上但是fixed还是失效了,只能使用第二种方法去加样式,大家如果有解决方案可以评论提出来大家一起讨论一下~ 作者:tiutiu链接:https://juejin.im/post/5e86e221e51d4546ce27b99c来源:掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2020-04-04 14:59:40 423 0 2
阅读详情

程序开发 Python的switch替换方案、列表推导式、字典推导式

switch替换方案 day = 8 def get_sunday(): return 'Sunday' def get_monday(): return 'Monday' def get_tuesday(): return 'Tuesday' def get_default(): return 'Unkown' switcher = { 0: get_sunday, 1: get_monday, 2: get_tuesday } day_name = switcher.get(day, get_default)() print(day_name) 列表推导式 # 列表推导式 # 集合推导式 # set 也可以被推导 # dict a = [1,2,3,4,5,6,7,8] aa = {1,2,3,4,5,6,7,8} aaa = (1,2,3,4,5,6,7,8) b = [i**2 for i in a] c = [i**2 for i in a if i >= 5] print(b) print(c) bb = {i**2 for i in aa} bbb = [i**2 for i in aaa] print(bb) print(bbb) 字典推导式 students = { '张三': 18, '李四': 22, '王五': 16 } b = [key for key,value in students.items()] bb = {value:key for key,value in students.items()} print(b) # ['张三', '李四', '王五'] print(bb) # {18: '张三', 22: '李四', 16: '王五'} # 不推荐元组 c = (key for key,value in students.items()) for x in c: print(x)

2020-02-19 23:37:28 452 0 1
阅读详情

程序开发 Vue History模式下微信支付授权目录的填写,处理URL未注册

调起微信sdk支付时弹出url未注册问题, 微信开发者平台配置url: 访问url:http://www.baidu.com/pay/ment 支付授权目录:http://www.baidu.com/pay/ 访问url:http://www.baidu.com/pay 支付授权目录:http://www.baidu.com/ 访问url:http://www.baidu.com/pay/ment?id=123 支付授权目录:http://www.baidu.com/pay/ 文章来自:vue history模式下的微信支付,及微信支付授权目录的填写,处理URL未注册

2020-01-13 22:50:05 628 0 0
阅读详情

程序开发 封装vue微信公众号分享方法,兼容iOS

上篇文章说到 vue的jssdk授权方案 ,这篇中使用的上篇的方法授权。 分享个公众号分享引到图片 这里设置一个公共方法: /** * 分享 * @param {Object} data 分享内容 title 分享标题 thumb分享图片 content 分享描述 * @param {String} fullPath 分享路径 通过 this.$route.fullPath 获取传入 */ export function share(data, fullPath) { // 设置自定义分享 ready(["updateTimelineShareData", "updateAppMessageShareData"]).then(_ => { wx.updateTimelineShareData({ title: data.title, // 分享标题 link: window.location.protocol + '//' + window.location.host + fullPath, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: data.thumb, // 分享图标 success: function () { // 设置成功 } }); wx.updateAppMessageShareData({ title: data.title, // 分享标题 desc: data.content, // 分享描述 link: window.location.protocol + '//' + window.location.host + fullPath, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: data.thumb, // 分享图标 success: function () { // 设置成功 } }); }); } 使用     share({title: '分享标题', content: '分享描述', thumb: '分享图片'}, this.$route.fullPath)

2019-12-16 23:56:56 767 0 0
阅读详情
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 18
前往