关于使用onfocus=”this.blur()”的利与弊

onfocus=”this.blur()” 这句代码有没有觉得眼熟?没错,我们常用它来去除链接取得焦点时外围出现的虚线框(如图一),google一下,前面几十页谈的都是这个去除虚线框的技巧。但我们也许以前从未想过:我们的这行代码给盲人用户们带来了巨大的困扰:这中断了盲人用户的Tab键路径,导致Tab光标无法聚焦页面的下一个控制器(链接、表单域、object、image map等)。测试如下:

<body>
<a href=”#” >第一个链接</a>
<a href=”#” >第二个链接</a>
<a href=”#” onfocus=”this.blur();”>第三个链接</a>
<a href=”#” >第四个链接</a>
<a href=”#” >第五个链接</a>
<a href=”#” >第六个链接</a>
</body>

按下Tab键,第一和第二个链接都可以正常获取焦点,继续Tab到第三个链接时,悲剧出现了:此时焦点会回到第一个链接,而无法Focus到第四个链接,原因是当Focus到第三个链接时,onfocus=”this.blur()” 事件处理强制触发了失焦,焦点重新回到文档的最开始。于是不停按Tab的结果就是焦点在前面三个链接轮流转,后面的内容通过Tab键无法访问[1]。

那么,有更好的方式吗?从根源上看,加onfocus=”this.blur()”是为了去除链接获取焦点后外围的虚线框(当然chrome、safari、opera下的focus效果各异,这里姑且就这么叫吧 )。W3C关于Outline的文章里说明这个虚线框用来告诉用户当前页面获取焦点的元素。我觉得,虚线框的存在有它的合理性,但有时你也许无法回避某些”视觉洁癖”需求(如图二:虚线框使“商品”背景和下面的红色色块分隔开了),以下总结了去掉虚线框的几种常用方法:

去除虚线框的方法 优劣 兼容性 是否中断tab
<a href=”#” onfocus=”this.blur()”>this blur</a> 链接聚焦触发时失去焦点,js和html耦合在一起 没有兼容性问题
a:focus {outline:none}或
a{outline:none}
outline由css2.1引入,去除虚线框视觉上的问题正是css的职责 ie6/ie7不支持,ie8+/ff /safari/opera[2]支持
<a href=”#” hidefocus=”true” >hidefocus</a> 该属性是ie的私有属性[3] ie5+支持
a { noFocusLine: expression(this.onFocus = this.blur())} 可批量处理,但expression的性能问题不能忽视 expression ie6/7支持,ie8+、非ie不支持

综合以上,去除链接虚线框的推荐方法是:ie下用hidefocus属性,ff/chorme/opera/safari下用outline:none。即:

<a href=”#” hidefocus=”true” >链接</a>
a:focus {
    outline:none;
}

或者使用js,代码如下:(详细情况请参考http://www.mikesmullin.com/?p=23)

复制代码
 1 <script type="text/javascript">//<!--
 2 var runOnLoad = new Array(); // for queuing multiple onLoad event functions
 3 window.onload = function() { for(var i=0; i<runOnLoad.length; i++) runOnLoad[i]() }
 4 // hide dotted :focus outlines when mouse is used
 5 // but NOT when tab key is used
 6 if(document.getElementsByTagName)
 7 for(var i in a = document.getElementsByTagName('A')) {
 8   a[i].onmousedown = function() {
 9     this.blur(); // most browsers
10     this.hideFocus = true; // ie
11     this.style.outline = 'none'; // mozilla
12   }
13   a[i].onmouseout = a[i].onmouseup = function() {
14     this.blur(); // most browsers
15     this.hideFocus = false; // ie
16     this.style.outline = null; // mozilla
17   }
18 }
19 //--></script> 
复制代码

 

无奈地说,如果页面因为onfocus=”this.blur()”导致tab无法访问页面全部内容,读屏软件在读取页面之前会强制过滤掉这个属性,但是如果用户是在js里面动态触发this.blur(),读屏软件又要出新招来克制了。这无疑增加了读屏软件的开发工作量,为了让盲人用户们能更顺畅的访问我们的网站,尽量避免使用onfocus=”this.blur()”哦。

注释

[1]Safari默认情况下,按tab键是不会focus链接的,但会focus表单域,在偏好设置-高级勾选“按下tab以高亮显示网页上的每一项”可开启该功能。Opera比较特殊,它通过shift+上下左右方向键可以向上下左右focus页面焦点。

[2]在Opera下点击链接(focus和active状态)时都不会出现所谓的虚线框,所以Opera下链接的虚线框问题可以不计。 Opera 通过shift+上下左右键产生的线框通过outline:none并不能去除,但是Opera支持outline这个属性。

[3]hidefocus属性是ie的私有属性,虽然hidefocus属性有true or false两个值,但测试结果是ie5-ie9不管其值为true or false, 只要添加hidefocus属性,该链接都会失去虚线框。

<template> <view class="" style="background: #F3F6FA;height: 100vh;overflow: auto;"> <view class="box"> <view class="boxxiao"> <view class=""> <view class="name"> 商品名称 </view> <input v-model="name" class="input" type="text" placeholder="请输入商品名称" /> </view> <view class=""> <view class="name"> 商品编码 </view> <input v-model="productNo" class="input" type="text" placeholder="请输入商品编码" /> </view> <view class=""> <view class="name"> 商品分类 </view> <input v-model="categoryName" @click="openPicker(1)" class="input" type="text" placeholder="请输入商品分类" /> </view> <view class=""> <view class="name"> 品牌 </view> <input v-model="brandName" @click="openPicker(2)" class="input" type="text" placeholder="请输入商品分类" /> </view> <view class=""> <view class="name"> 排序 </view> <input v-model="sort" class="input" type="text" placeholder="请输入排序" /> </view> <view class=""> <view class="name"> 单价 </view> <input v-model="price" class="input" type="text" placeholder="请输入单价" /> </view> <view class=""> <view class="name"> 重量 </view> <input v-model="weight" class="input" type="text" placeholder="请输入重量" /> </view> <view class=""> <view class="name"> 单位 </view> <input v-model="unit" class="input" type="text" placeholder="请输入单位" /> </view> </view> <view class="boxxiao1"> <view class="statc"> <view class=""> 状态 </view> <view class="statcright"> <view :class="{'xiaj':true,'shang':publishStatus=='1'}" @click="zhuangtai('1')"> 上架 </view> <view :class="{'xiaj':true,'shang':publishStatus=='0'}" @click="zhuangtai('0')"> 下架 </view> </view> </view> </view> <view class=""> <view class="updtitle"> 产品图片 </view> <view class="updoimg"> <view class="upindex"> <view class="unindexleft"> 主图 </view> <view class=""> <view class=""> <view class="uplbt"> <view class="imgbox" v-for="(item, index) in fileList" :key="index"> <image @click="dianj($event,index)" class="imgsdel" src="/static/Merchantindex/删除.png"></image> <image @click="chooseImage" class="imgs" :src="item"></image> </view> <image @click="chooseImage" v-if="fileList.length<1" style="width: 156rpx;height: 156rpx;padding: 0 10rpx 10rpx 10rpx;" src="/static/Merchantindex/Frame_17@2x.png" mode=""></image> </view> </view> </view> <view class="text13"> 请上传 大小不超过 5MB 格式为 pngipgjpeg 的文件 </view> </view> <view class="upindex"> <view class="unindexleft" @click="chooseImage"> 轮播图 </view> <view class=""> <view class="uplbt"> <view class="imgbox" v-for="(item, index) in fileList2" :key="index"> <image @click="dianj2($event,index)" class="imgsdel" src="/static/Merchantindex/删除.png"></image> <image class="imgs" :src="item"></image> </view> <image @click="chooseImage2" style="width: 156rpx;height: 156rpx;padding: 0 10rpx 10rpx 10rpx;" src="/static/Merchantindex/Frame_17@2x.png" mode=""></image> </view> <view class="text13"> 请上传 大小不超过 5MB 格式为 pngipgjpeg 的文件 </view> </view> </view> </view> <view class="guige"> <view class=""> 规格类型 </view> <view class="" @click="tianjia"> 添加 </view> </view> <view class="gglxbxo" v-for="(item,index) in skuList" :key="index"> <uni-data-select :localdata="range[index].options" v-model="range[index].value" @change="change($event, index)"></uni-data-select> <view class="xuanuzne" v-for="(items,jndex) in item.productAttr" :key="jndex"> <input v-model="items.value" class="sdasdinput" type="text" /> <view class="xiengz" @click="xiengfa(index)"> 新增 </view> <view class="xiengz" @click="shanchu(index,jndex)"> 删除 </view> </view> </view> <view class="guige"> <view class=""> 规格信息 </view> <view class=""> 刷新 </view> </view> <view class="gglxbxo" v-for="(ites,inde) in combinations" :key="inde"> <view class="dlasxlfle" v-for="(item,index) in skuList" :key="index"> <view class="dlasxlfle" v-if="item.range!=0"> <view class="name w130"> {{item.range}} </view> <input v-if="index==0" v-model="ites.spData.value" class="tesinput input" type="text" :placeholder="`请输入${item.range}`" /> <input v-if="index==1" v-model="ites.spData.value1" class="tesinput input" type="text" :placeholder="`请输入${item.range}`" /> </view> </view> <view class="dlasxlfle"> <view class=" name w130"> 销售价格 </view> <input v-model="ites.price" class="tesinput input" type="text" placeholder="请输入销售价格" /> </view> <view class="dlasxlfle"> <view class=" name w130"> 库存 </view> <input v-model="ites.stock" class="tesinput input" type="text" placeholder="请输入销售价格" /> </view> <view class="" style="height: 40rpx;"> </view> <view class="upindex"> <view class="unindexleft"> 展示图片 </view> <view class=""> <view class="uplbt"> <view v-if="ites.pic!=''&&ites.pic!=null&&ites.pic!=undefined" class="imgbox"> <image @click="dianj3($event,inde)" class="imgsdel" src="/static/Merchantindex/删除.png"> </image> <image class="imgs" :src="BASE_URL+ites.pic"></image> </view> <image @click="chooseImage3(inde)" style="width: 156rpx;height: 156rpx;padding: 0 10rpx 10rpx 10rpx;" src="/static/Merchantindex/Frame_17@2x.png" mode=""></image> </view> <view class="text13"> 请上传 大小不超过 5MB 格式为 pngipgjpeg 的文件 </view> </view> </view> </view> <view class="tetx"> 详细描述 </view> <view class="container"> <!-- <button @click="insertImage">插入图片</button> --> <editor v-if="isReadOnly1" id="editor" class="rech" :read-only="isReadOnly" placeholder="请输入内容" @input="onInput" @statusbar="statusbar" @ready="onEditorReady"> </editor> </view> </view> </view> <view class="tail" @click="dianchang()"> <view class="taill"> 上传 </view> </view> </view> <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker> <uv-picker ref="picker1" :columns="columns1" @confirm="confirm1"></uv-picker> </template> <script> import { request, BASE_URL } from '@/utils/request.js'; export default { data() { return { inid: 0, isReadOnly: true, isReadOnly1: true, publishStatus: "1", combinations: [{ id: "", outSkuNo: null, pic: "", price: "", spData: { value: '', value2: '' }, stock: "", }], list: [{ name: "", option: [] }], data: [{ name: "", option: [] }], skuList: [{ productAttr: [{ value: '' }], range: 0, }], range: [{ value: -1, // 当前选中的值 options: [{ value: 0, text: '材质' }, { value: 1, text: '颜色' }, { value: 2, text: '尺寸' }, { value: 3, text: '其他' } ] }, { value: -1, // 当前选中的值 options: [{ value: 0, text: '材质' }, { value: 1, text: '颜色' }, { value: 2, text: '尺寸' }, { value: 3, text: '其他' } ] } ], id:"", BASE_URL: BASE_URL, name: "", productNo: "", sort: '', price: "", weight: "", unit: "", categoryName: "", brandName: "", shopIds: "", pic: "", albumPics: "", categoryId: "", detailMobileHtml: "", fileList: [], fileList2: [], fileList3: [], placeholder: '请输入内容', editorCtx: null, columns: [ [] ], columns1: [ [] ], category: [], brand: [] } }, watch: { editorCtx: { immediate: true, // 立即执行一次 handler(newVal) { if (newVal) { // 首次拿到实例 console.log('editorCtx 已就绪', newVal); } } }, // 深度监听 skuList skuList: { deep: true, handler(newVal, oldVal) { console.log('新值:', newVal); for (var i = 0; i < newVal.length; i++) { if (newVal[i].range == 0) { return } } this.combinations = [] if (newVal.length == 1) { for (var i = 0; i < newVal[0].productAttr.length; i++) { if (this.inid == 1) { this.combinations.push({ id: this.daskuList[i].id, outSkuNo: this.daskuList[i].outSkuNo, pic: this.daskuList[i].pic, price: this.daskuList[i].price, spData: { value: '', value2: '' }, stock: this.daskuList[i].stock }) } else { this.combinations.push({ id: "", outSkuNo: null, pic: "", price: "", spData: { value: '', value2: '' }, stock: "" }) } } for (var i = 0; i < newVal[0].productAttr.length; i++) { this.combinations[i].spData.value = newVal[0].productAttr[i].value } } if (newVal.length == 2) { for (var i = 0; i < newVal[0].productAttr.length; i++) { for (var j = 0; j < newVal[1].productAttr.length; j++) { if (this.inid == 1) { this.combinations.push({ id: this.daskuList[j].id, outSkuNo: this.daskuList[j].outSkuNo, pic: this.daskuList[j].pic, price: this.daskuList[j].price, spData: { value: '', value2: '' }, stock: this.daskuList[j].stock }) } else { this.combinations.push({ id: "", outSkuNo: null, pic: "", price: "", spData: { value: '', value2: '' }, stock: "" }) } } } console.log("数据", this.combinations) let z = 0 for (var i = 0; i < newVal[0].productAttr.length; i++) { for (var j = 0; j < newVal[1].productAttr.length; j++) { this.combinations[z].spData.value = newVal[0].productAttr[i].value this.combinations[z].spData.value1 = newVal[1].productAttr[j].value ++z } } } console.log("组合数据", this.combinations) }, }, }, onLoad(option) { this.inid = option.id if (option.id == 1) { console.log(option.id) let shangpxiangq = uni.getStorageSync("shangpxiangq") console.log("商品数据是", shangpxiangq) const data = shangpxiangq || {}; this.publishStatus = data.publishStatus || "1"; this.name = data.name || ""; this.productNo = data.productNo || ""; this.sort = data.sort || ""; this.price = data.price || ""; this.weight = data.weight || ""; this.unit = data.unit || ""; this.categoryName = data.categoryName || ""; this.brandName = data.brandName || ""; this.shopIds = data.shopIds || ""; this.pic = data.pic || ""; this.albumPics = data.albumPics || ""; this.categoryId = data.categoryId || ""; this.detailMobileHtml = data.detailMobileHtml || ""; this.list = JSON.parse(data.productAttr) this.daskuList = data.skuList this.id=data.id let skuList = data.skuList console.log(this.list) console.log("撒低级", this.list[0].options) this.skuList = [] for (var i = 0; i < this.list.length; i++) { this.skuList.push({ productAttr: [], range: this.list[i].name, }) for (var j = 0; j < this.range[i].options.length; j++) { if (this.range[i].options[j].text == this.list[i].name) { this.range[i].value = this.range[i].options[j].value console.log("默认值为", this.range) break } } for (var j = 0; j < this.list[i].options.length; j++) { this.skuList[i].productAttr.push({ value: this.list[i].options[j].name }) } } console.log("回家撒比", this.combinations) // skuList: [{ // productAttr: [{ // value: '' // }], // range: 0, // }], // this.skuList=skuList // id: "" // outSkuNo: null // pic: "" // price: "" // spData: {value: "白色", value2: ""} // stock: "" // 1: // id: "" // outSkuNo: null // pic: "" // price: "" // spData: {value: "黑色", value2: ""} // stock: "" // console.log(skuList) // this.skuList=skuList if (this.pic != '') { this.fileList.push(BASE_URL + this.pic) } if (this.albumPics != '') { let ims = this.albumPics.split(",") for (var i = 0; i < ims.length; i++) { this.fileList2.push(BASE_URL + ims[i]) } } this.isReadOnly1 = false const timer = setTimeout(() => { // this.insertContents(this.detailMobileHtml) this.isReadOnly1 = true }, 1); // const timer1 = setTimeout(() => { // this.isReadOnly=false // }, 4000); } else { // this.isReadOnly1 = true this.isReadOnly = false } }, mounted() { this.getInfo() this.getcategory() this.getbrand() }, methods: { dianj3(event, index) { console.log(index) this.combinations[index].pic = "" }, dianj(event, index) { console.log(index) this.fileList = [] console.log(this.fileList) event.stopPropagation(); }, dianj2(event, index) { console.log(index) this.albumPics="" this.fileList2.splice(index, 1); console.log(this.fileList2) for (var i = 0; i < this.fileList2.length; i++) { if(this.albumPics==""||this.albumPics==null||this.albumPics==undefined){ this.albumPics=this.fileList2[i].replace(BASE_URL, ''); }else{ this.albumPics=this.albumPics+","+this.fileList2[i].replace(BASE_URL, ''); } } console.log(this.albumPics) // this.albumPics=this.fileList2 event.stopPropagation(); }, zhuangtai(iss) { this.publishStatus = iss }, onInput(e) { // 获取编辑器的当前内容 this.detailMobileHtml = e.detail.html; }, async dianchang() { console.log("数据啊22", this.skuList) console.log("数据啊21", this.combinations) if (this.name == "") { uni.showToast({ title: '商品名称不能为空', icon: 'none', // 可选值:'success'、'loading'、'none' duration: 1000 // 显示时长,单位 ms }); return } if (this.categoryName == "") { uni.showToast({ title: '商品分类不能为空', icon: 'none', // 可选值:'success'、'loading'、'none' duration: 1000 // 显示时长,单位 ms }); return } let skuList = [] // let spData={} for (var i = 0; i < this.skuList.length; i++) { if (this.skuList[i].range == 0 || this.skuList[i].range == "") { uni.showToast({ title: '规格不能为空', icon: 'none', // 可选值:'success'、'loading'、'none' duration: 1000 // 显示时长,单位 ms }); return } for (var j = 0; j < this.skuList[i].productAttr.length; j++) { if (this.skuList == 1) { if (this.skuList[i].productAttr[j].value == "") { uni.showToast({ title: '规格不能为空', icon: 'none', // 可选值:'success'、'loading'、'none' duration: 1000 // 显示时长,单位 ms }); return } } else { if (this.skuList[i].productAttr[j].value == "" || this.skuList[i].productAttr[j].value1 == "") { uni.showToast({ title: '规格不能为空', icon: 'none', // 可选值:'success'、'loading'、'none' duration: 1000 // 显示时长,单位 ms }); return } } } } for (var i = 0; i < this.combinations.length; i++) { if (this.skuList.length == 1) { skuList.push({ id: this.combinations[i].id, outSkuNo: null, pic: this.combinations[i].pic, price: this.combinations[i].price, spData: JSON.stringify({ [this.skuList[0].range]: this.combinations[i].spData.value }), stock: this.combinations[i].stock, [this.skuList[0].range]: this.combinations[i].spData.value }) } else { skuList.push({ id: this.combinations[i].id, outSkuNo: null, pic: this.combinations[i].pic, price: this.combinations[i].price, spData: JSON.stringify({ [this.skuList[0].range]: this.combinations[i].spData.value, [this.skuList[1].range]: this.combinations[i].spData.value1, }), stock: this.combinations[i].stock, [this.skuList[0].range]: this.combinations[i].spData.value, [this.skuList[1].range]: this.combinations[i].spData.value1 }) } } console.log("数据啊会受到覅", skuList) let productAttr = [] for (var i = 0; i < this.skuList.length; i++) { productAttr.push({ name: '', options: [] }) productAttr[i].name = this.skuList[i].range for (var j = 0; j < this.skuList[i].productAttr.length; j++) { productAttr[i].options.push({ name: "" }) productAttr[i].options[j] = { name: this.skuList[i].productAttr[j].value } } } const formData = { name: this.name, productNo: this.productNo, sort: this.sort, price: this.price, weight: this.weight, unit: this.unit, categoryName: this.categoryName, brandName: this.brandName, shopIds: this.shopIds, pic: this.pic, albumPics: this.albumPics, publishStatus: this.publishStatus, detailMobileHtml: this.detailMobileHtml, productAttr: JSON.stringify(productAttr), skuList: skuList, categoryId:this.categoryId, id:this.id }; console.log("上传的数据", formData) if (this.inid == 1) { const res = await request({ url: 'pms/product', method: 'put', data: formData }); uni.showToast({ title: '修改成功', icon: 'success', duration: 2000 // 提示框显示2秒 }); // 延迟2秒后返回上一页 setTimeout(() => { uni.navigateBack({ delta: 1 // 返回上一页 }); }, 2000); // 延迟2秒 } else { const res = await request({ url: 'pms/product', method: 'post', data: formData }); uni.showToast({ title: '上传成功', icon: 'success', duration: 2000 // 提示框显示2秒 }); // 延迟2秒后返回上一页 setTimeout(() => { uni.navigateBack({ delta: 1 // 返回上一页 }); }, 2000); // 延迟2秒 } }, shanchu(index, jndex) { if (this.skuList[index].productAttr.length == 1) { this.skuList.splice(index, 1) return } this.skuList[index].productAttr.splice(jndex, 1) }, tianjia() { this.skuList.push({ productAttr: [{ value: '' } // 初始一个空对象 ], range: 0, }) }, xiengfa(index) { this.skuList[index].productAttr.push({ value: '' }); }, change(e, index) { console.log("e:", e); console.log("index:", index); this.skuList[index].range = this.range[0].options[e].text }, openPicker(ins) { if (ins == 1) { this.$refs.picker.open(); } if (ins == 2) { this.$refs.picker1.open(); } }, confirm(e) { console.log('confirm', e); this.categoryName = e.value[0] this.categoryId = this.category[e.indexs[0]].id }, confirm1(e) { console.log('confirm', e); this.brandName = e.value[0] }, async getInfo() { const res = await request({ url: 'wechat/getInfo', method: 'get' }); this.shopIds = res.shopIds[0] console.log("个人信息", res.shopIds[0]) // this.isReadOnly = false }, async getcategory() { console.log(this.shopIds) const res = await request({ url: 'pms/category/page?pageNum=1&pageSize=999999', method: 'get' }); console.log("商品分类", res) for (var i = 0; i < res.rows.length; i++) { this.columns[0].push(res.rows[i].name) } this.category = res.rows }, async getbrand() { console.log(this.shopIds) const res = await request({ url: 'pms/brand/page?pageNum=1&pageSize=99999', method: 'get' }); console.log("品牌分类", res) for (var i = 0; i < res.rows.length; i++) { this.columns1[0].push(res.rows[i].name) } this.brand = res.rows }, async chooseImage() { uni.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: (res) => { const tempFilePaths = res.tempFilePaths; this.fileList[0] = tempFilePaths[0] uni.uploadFile({ url: `${this.BASE_URL}/common/upload`, // 替换为你的上传地址 filePath: tempFilePaths[0], name: 'file', // 对应后端接收的字段名 header: { 'Authorization': `Bearer ${uni.getStorageSync('user_token')}` // 设置 token }, formData: { // 这里可以添加额外的表单数据 }, success: (uploadRes) => { console.log(uploadRes); this.pic = JSON.parse(uploadRes.data).fileName console.log(JSON.parse(uploadRes.data).fileName); }, fail: (error) => { console.error('上传失败:', error); } }); } }); }, chooseImage3(index) { uni.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: (res) => { // this.fileList2.push(res.tempFilePaths[0]) // this.uploadFile(res.tempFilePaths[0]); uni.uploadFile({ url: `${this.BASE_URL}/common/upload`, // 替换为你的上传地址 filePath: res.tempFilePaths[0], name: 'file', // 对应后端接收的字段名 header: { 'Authorization': `Bearer ${uni.getStorageSync('user_token')}` // 设置 token }, formData: { // 这里可以添加额外的表单数据 }, success: (uploadRes) => { console.log(uploadRes); this.combinations[index].pic = JSON.parse(uploadRes .data).fileName console.log("图片的地址是", this.combinations[index].pic) // this.fileList3[index]=BASE_URL+uploadRes }, fail: (error) => { console.error('上传失败:', error); } }); } }); }, chooseImage2() { uni.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: (res) => { this.fileList2.push(res.tempFilePaths[0]) // this.uploadFile(res.tempFilePaths[0]); uni.uploadFile({ url: `${this.BASE_URL}/common/upload`, // 替换为你的上传地址 filePath: res.tempFilePaths[0], name: 'file', // 对应后端接收的字段名 header: { 'Authorization': `Bearer ${uni.getStorageSync('user_token')}` // 设置 token }, formData: { // 这里可以添加额外的表单数据 }, success: (uploadRes) => { console.log(uploadRes); if (this.albumPics == "") { this.albumPics = JSON.parse(uploadRes.data).fileName } else { this.albumPics = this.albumPics + ',' + JSON.parse(uploadRes .data).fileName } console.log(this.albumPics); }, fail: (error) => { console.error('上传失败:', error); } }); } }); }, onEditorReady() { uni.createSelectorQuery().in(this).select('#editor').context((res) => { if (res) { this.editorCtx = res.context; console.log("执行") if(this.detailMobileHtml!=""){ this.insertContents(this.detailMobileHtml) } } }).exec(); }, insertContents(html) { if (!this.editorCtx) { uni.showToast({ title: '编辑器未就绪', icon: 'none' }); return; } if (!this.editorCtx) return; const set = () => this.editorCtx.setContents({ html }); // #ifdef H5 this.editorCtx.blur && this.editorCtx.blur(set); this.editorCtx.blur({ success: set }); const timer1 = setTimeout(() => { this.isReadOnly = false }, 2000); }, insertImage() { wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: (res) => { const filePath = res.tempFilePaths[0]; this.editorCtx.insertImage({ src: filePath, alt: '图片', width: '100%', height: 'auto', success: () => { console.log('图片插入成功'); } }); } }); } } } </script> <style> @import url("Uploadproduct.css") </style> 往下滑动一段距离后 点击输入框 输入框的内容会跑到其他位置 uniapp开发的微信小程序
最新发布
08-17
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值