kbone-ui icon indicating copy to clipboard operation
kbone-ui copied to clipboard

KPickerView 设置默认值 web端和小程序端实际结果不同

Open OooOooosss opened this issue 4 years ago • 4 comments

1591248484224 web端初始位置无效,小程序正常

OooOooosss avatar Jun 04 '20 05:06 OooOooosss

好的,这个我跟进看一下

JimmyVV avatar Jun 05 '20 08:06 JimmyVV

已经修复了,可以使用

+ [email protected]

JimmyVV avatar Jun 05 '20 09:06 JimmyVV

在mp下不响应事件,web下正常

[email protected]

<template>
  <KView>
    <div class="weui-cells__title">内容</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell weui-cell_active">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea"
                          placeholder="请输入海报内容"
                          rows="10"
                          maxlength="-1"
                          v-model="posterText"></textarea>
            </div>
        </div>
    </div>
    <div class="weui-cells__title">背景色</div>
    <KPickerView indicator-style="height: 60px;"
                 v-model="colorIndex"
                 style="width: 100%; height:120px;"
                 @change="changeColor">
        <KPickerViewColumn>
                    <KView v-for="(item,index) in colors"
                          :style="{lineHeight: '80px', backgroundColor: item}"
                          :key="index" >
                    </KView>
        </KPickerViewColumn>
    </KPickerView>
    <div class="weui-cells__title">预览</div>
    <div class="weui-cell"
        :style="{backgroundColor: color, color: '#FFFFFF'}">
      {{ posterText ? posterText : '这是海报正文' }}
    </div>
    <div class="weui-cell">
        <KButton type="primary" @click="save">保存图片</KButton>
    </div>
  </KView>
</template>

<script>
import Vue from 'vue'

export default Vue.extend({
  name: 'Home',
  data() {
    return {
      posterText: null,
      colors: [
        '#2C2C2E',
        '#0A84FF',
        '#30D158',
        '#5E5CE6',
        '#FF9F0A',
        '#FF375F',
        '#BF5AF2',
        '#FF453A',
        '#64D2FF',
        '#FFD60A',
      ],
      colorIndex: 0,
      color: null,
    }
  },
  computed: {
  },
  components: {
  },
  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'))

    this.color = this.colors[this.colorIndex]
  },
  methods: {
    changeColor(index) {
      this.color = this.colors[index]
      this.posterText = index
    },
    save() {
    }
  },
})
</script>

<style lang="less">
</style>

rushairer avatar Jun 07 '20 14:06 rushairer

已经修复,为了对齐小程序。目前 index 修改为 array 的传入方式:

export default Vue.extend({
  name: 'Home',
  data() {
    return {
      colorIndex: [0],
      color: null,
    }
  },

可以使用 0.6.8 的包试试。

JimmyVV avatar Jun 15 '20 04:06 JimmyVV