记录一下最近开发过程中遇到的坑

最新推荐文章于 2024-12-15 00:05:31 发布

原创最新推荐文章于 2024-12-15 00:05:31 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图片上传 #iOS点击事件

本文探讨了安卓微信端上传图片时无法触发onchange事件的问题，并提供了有效的代码修改方案。同时，分享了苹果微信端点击事件的局限及推荐解决方案。

安卓微信端

上传图片点击确定没有触发 onchange事件

<input type="file" id="filethis" name="filethis" onchange="uploadButton()" accept="image/jpeg,image/png" UNSELECTABLE="on"/>

原因
问题就出在accept属性里面的值上，这个问题是安卓微信遗留下的问题，想要触发onchange事件修改代码

<input type="file" id="filethis" name="filethis" ms-change="uploadButton()" accept="image/*" UNSELECTABLE="on" multiple>

苹果微信端

点击事件不能触发
安卓浏览器是大部分标签都可以，而苹果只有 button、a标签可以，建议需要点击的地方使用a标签，使用的时候将href属性值填写为JavaScript：；，不使用这个两个标签的时候对应的元素样式加上cursor:pointer
vue解决方案
HTML

<router-link :to="val.url" :class="['nav-btn', {active: index === currentKey}]"
                 :key="index"
                 v-for="(val, index) in arr"
                 @click.native="setCurrentKey(index)">

data () {
    return {
      arr: [
        { url: './home', className: 'home', picture: require('../../assets/155352224914259456.png')},
        { url: './seek', className: 'seek', picture: require('../../assets/155352235108424095.png')},
        { url: './recommend', className: 'recommend', picture: require('../../assets/155352230873073172.png')},
        { url: './introduce', className: 'introduce', picture: require('../../assets/155352220182354151.png')},
        { url: './my', className: 'my', picture: require('../../assets/155352224914259456.png')}
      ],
      currentKey: 0
    }
  },
  methods: {
    setCurrentKey (index) {
      this.currentKey = index
      // this.$bus.$emit('changeCurrentKey', index)
    },