kbone-ui

kbone-ui copied to clipboard

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>

我也遇到了这个问题

这里我跟一下看看

我也遇到了这个问题 +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"
  },

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