airyland / vux

Mobile UI Components based on Vue & WeUI
https://vux.li
MIT License
17.59k stars 3.71k forks source link

[Bug Report] actionsheet 组件不兼容 ios #3097

Closed OJesusO closed 6 years ago

OJesusO commented 6 years ago

VUX version

2.9.2

OS/Browsers version

ios11.2.6 | ios10.1.1

Vue version

2.5.2

Code

<template>
      <form-preview
        v-for="item in orderLists"
        :class="`list-item order-state${item.state}`"
        :name="item.id"
        :key="item.id"
        :header-label="item.namelabel"
        :header-value="item.title"
        :body-items="item.showmore ? item.datafields : item.datafields_1"
        :footer-buttons="itemBtns"></form-preview>

    <actionsheet v-model="isShowRePrintMenu" :menus="rePrintMenu" show-cancel @on-click-menu="goRePrint"></actionsheet>
</template>

<script>

export default {
  name: 'OrderList',
  directives: {
    TransferDom
  },
  components: {
    GroupTitle, Datetime, Actionsheet, ScrollLoadMore, FloatWidget
  },
  data () {
    return {
      orderLists: [],
      itemBtns: [{
        style: 'default',
        text: '更多信息',
        onButtonClick: name => this.showMoreOrderInfo(name)
      }, {
        style: 'default',
        text: '补打产品',
        onButtonClick: name => this.rePrint(name)
      }],
      tmpRePrintOrder: null,
      isShowRePrintMenu: false,
      rePrintMenu: [{
        label: '打印照片',
        value: 1
      }, {
        label: '打印配件',
        value: 2
      }]
    }
  },

  methods: {
    rePrint (order_id) {
      this.tmpRePrintOrder = order_id
      this.isShowRePrintMenu = true
    },
    goRePrint (val, data = {}) {
      if (this.tmpRePrintOrder === null) {
        return ErrToast('无法获取订单 ID')
      }
      switch (val) {
        case 1:
        case 2:
          let order = this.orderDatas[this.tmpRePrintOrder]
          rePrint({
            print_type: val,
            order_detail_sn: order.order_detail_sn,
            sn: order.machine_no
          }).then(res => {
            SssToast(res)
          }).catch(err => {
            ErrToast(err)
            this.$LOG(`goRePrint -> rePrint(${val})`, err)
          })
          break

        default:
          this.$LOG(`goRePrint ${val}`)
      }
      this.tmpRePrintOrder = null
    },
  }
}

Steps to reproduce

时间选择 & 图表 & actionsheet 本来是 2.2.0 版的更新为 2.9.2 后还是不行。。

What is Expected?

点击[补打产品]按钮后显示actionsheet,如下图:

https://images.gitee.com/uploads/images/2018/0910/103921_40228376_973628.png

What is actually happening?

进入到页面后直接显示 actionsheet,且点击[补打产品]按钮后正确显示actionsheet后,立刻自动关闭,如下图:

https://images.gitee.com/uploads/images/2018/0910/103852_d83bd3e6_973628.jpeg

OJesusO commented 6 years ago

使用 TransferDom 就没事了 0.0

`

......

import { TransferDom, ... } from 'vux'

export default { name: 'OrderList', directives: { TransferDom } ... } ...... `

adophp commented 5 years ago

directives: { TransferDom }

6666,解决问题