Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

KPickerView on change not working in mp mode #14

Open
lawrenceadv009 opened this issue Mar 11, 2020 · 4 comments
Open

KPickerView on change not working in mp mode #14

lawrenceadv009 opened this issue Mar 11, 2020 · 4 comments
Assignees
Labels
help wanted Extra attention is needed

Comments

@lawrenceadv009
Copy link

lawrenceadv009 commented Mar 11, 2020

vue 2.6.11, kbone-ui 0.6.2

<template>
  <div class="cnt">
    <Header></Header>
    <div>
      <KPickerView
        indicator-style="height: 50px;"
        style="width: 100%; height: 300px;"
        @change="changeIndex"
      >
        <KPickerViewColumn>
          <KView
            v-for="(item,index) in singleData"
            style="line-height: 50px;"
            :key="index"
          >
            {{item}}
          </KView>
        </KPickerViewColumn>
      </KPickerView>
    </div>
    <!-- vue-improve-loader -->
    <div check-reduce>
      <p>这段话不会在小程序里显示</p>
      <p>在构建的时候就会被 vue-improve-loader 给干掉了</p>
    </div>
    <!-- reduce-loader -->
    <Web>
      <p>这段话也不会在小程序里显示</p>
      <p>在构建的时候就会被 reduce-loader 给干掉了</p>
    </Web>
    <!-- 样式隐藏 -->
    <div class="for-web">
      <p>这段话也不会在小程序里显示</p>
      <p>在渲染时会被样式隐藏</p>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Vue from 'vue'
import Header from '../common/Header.vue'
import Footer from '../common/Footer.vue'
import Web from 'reduce-loader!../common/Web.vue'
import 'reduce-loader!./web'
import { KPickerView, KView, KPickerViewColumn } from 'kbone-ui'

export default Vue.extend({
  name: 'Home',
  components: {
    Header,
    KPickerView,
    KPickerViewColumn,
    Footer,
    Web,
  },
  data() {
    return {
      singleData: ['a', 'b', 'c', 'd']
    }
  },
  created() {
    window.addEventListener('wxload', query => console.log('page1 wxload', query))
    window.addEventListener('wxshow', () => console.log('page1 wxshow'))
    window.addEventListener('wxready', () => console.log('page1 wxready'))
    window.addEventListener('wxhide', () => console.log('page1 wxhide'))
    window.addEventListener('wxunload', () => console.log('page1 wxunload'))

    if (process.env.isMiniprogram) {
      console.log('I am in miniprogram')
    } else {
      console.log('I am in Web')
    }
  },
  methods: {
    changeIndex(e) {
      console.log('changeIndex', this.singleData[e])
    },
    onClickJump() {
      window.location.href = '/test/list/123'
    },

    onClickOpen() {
      window.open('/test/detail/123')
    },
  },
})
</script>

<style lang="less">
.cnt {
  margin-top: 20px;
}

a,
button {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  border: 1px solid #ddd;
}

.miniprogram-root {
  .for-web {
    display: none;
  }
}
</style>
@uemuki
Copy link

uemuki commented Mar 27, 2020

我也遇到了这个问题

@JimmyVV
Copy link
Contributor

JimmyVV commented May 9, 2020

这里我跟一下看看

@JimmyVV JimmyVV self-assigned this May 9, 2020
@JimmyVV JimmyVV added the help wanted Extra attention is needed label May 9, 2020
@rushairer
Copy link

我也遇到了这个问题 +1

 "dependencies": {
    "kbone-ui": "^0.6.7",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.1.2",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "cross-env": "^6.0.3",
    "css-loader": "^3.4.0",
    "cssnano": "^4.1.10",
    "eslint": "^4.15.0",
    "eslint-config-airbnb-base": "^11.3.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-import-resolver-webpack": "^0.8.3",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-vue": "^4.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.5.0",
    "mp-webpack-plugin": "latest",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "portfinder": "^1.0.25",
    "postcss-loader": "^2.0.8",
    "reduce-loader": "^0.1.1",
    "rimraf": "^2.7.1",
    "terser-webpack-plugin": "^2.3.0",
    "thread-loader": "^2.1.3",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.3",
    "url-loader": "^0.5.8",
    "vue-improve-loader": "^0.1.1",
    "vue-loader": "^15.7.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0",
    "webpack-merge": "^4.1.0"
  },

@JimmyVV
Copy link
Contributor

JimmyVV commented Jul 20, 2020

我这里未能复现,能详细说明下么?参考如下 demo
https://wechat-miniprogram.github.io/kboneui/ui/#/picker

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

4 participants