使用 origin- 标签 封装 wx 原生 picker 组件

使用 origin- 标签 封装 wx 原生 picker 组件

如何使用多态组件 , 使用wx 小程序原生的 rich-text 组件

一 问题产生

使用 cml 框架的 c-picker 组件 发现 文档不支持 arryObject 类型

那么如何解决?

传入对象格式怎么使用c-picker 这个组件

二 解决问题

那么接下来就是代码的实现(结合多态协议封装 wx小程序的原生组件)

首先在项目的根目录下输入命令

cml init component

1. 切换选择Polymorphic component

2. 输入m-picker (m- 表示自建组件, 区别于 c- 官方扩展组件)

   此时项目中看到./src/components/m-picker文件夹

   ./src/components
   └── m-picker
       ├── m-picker.interface
       └── m-picker.wx.cml
   

修改 src/pages/index/index.cml 文件里面的 json 配置，引用多态组件

  "base": {
    "usingComponents": {
      "m-picker": "/components/m-picker/m-picker",
    }
  }

修改 src/pages/index/index.cml 文件里面的组件template模板，调用m-picker组件

index.cml

<template>
  <view>
         <view style="width: 180cpx">
          <m-picker
                  list="{{ cities }}"
                  name="a"
                  placeholder="地区"
                  index="{{ formData.a }}"
                  c-bind:selectevent="onPickerSelectChange"
          >
          </m-picker>
        </view>
<button c-bind:tap="handleClick">点击按钮</button>
  </view>


</template>

<script>
import cml from 'chameleon-api'

class Index   {

  data = {
    cities:  [
      {
        "id": 1,
        "text": "北京市"
      },
      {
        "id": 2,
        "text": "天津市"
      },
      {
        "id": 3,
        "text": "河北省"
      },
      {
        "id": 4,
        "text": "山西省"
      },
      {
        "id": 5,
        "text": "内蒙古"
      },
      {
        "id": 6,
        "text": "辽宁省"
      },
      {
        "id": 7,
        "text": "吉林省"
      },
      {
        "id": 8,
        "text": "黑龙江省"
      },
      {
        "id": 9,
        "text": "上海市"
      }
    ],

    // 表单的数据模型
    formData:{
      a:"",
    },

  }

  computed = {

  }

  watch  = {
  }

  methods = {
    onPickerSelectChange({detail}){
      const { name, value } = detail
      this.formData[`${name}`] = value// 当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新
    },

   
    handleClick(){
      console.log('点击按钮',this.data.formData)
    }
  }

   beforeCreate(query) {

  }

  created(query) {
  }

  beforeMount(query) {

  }

  onShow() {
  }

  mounted() {
  }

  onHide() {
  }

  beforeDestroy() {
  }

  destroyed() {
  }
}

export default new Index();
</script>

<style>
 

</style>

<script cml-type="json">
{
  "base": {
    "usingComponents": {
       "m-picker": "../../components/m-picker/m-picker"
   }
  },
  "wx": {
    "navigationBarTitleText": "Index",
    "backgroundTextStyle": "dark",
    "backgroundColor": "#E2E2E2"
  }
}
</script>

多态组件构成介绍

m-picker.interface：描述 echart 组件的输入和输出。

默认 interface 定义了一个组件，参数name的值是一个字符串，事件onshow的值是一个函数，函数的回调是一个Object结构为{value: 字符串}。

.m-picker.interface

<script cml-type="interface">
  /*
  .interface 描述 组件的输入和输出。
  定义一个inteface用于描述组件的属性和事件
  1、 如何区分组件属性和事件？
  通过类型来区分，事件为函数类型，属性为非函数类型
  2、 如何定义组件属性
  给interface添加同名的属性即可，指定类型
  3、 如何定义组件事件
  以事件名称为key值给interface定义属性，该属性是一个函数类型，返回值为void，
  定义函数的第一个参数为自定义事件传递的detail对象类型
  */
  interface MPickerInterface {
    value:? Number
  }
</script>

m-picker.wx.cml

<template>
  <view>
      <origin-picker
                     style="height: {{height}}rpx;"
                     mode="selector"
                     bindchange="onSelectChange"
                     data-name="{{ name }}"
                     range="{{ list }}"
                     value="{{ currentIndex }}"
                     range-key="text"
      >
          <text> <block c-if="{{ showIndex }}">{{index}} :</block> {{index ? list[currentIndex].text : placeholder }}
          </text>
      </origin-picker>
  </view>
</template>

<script>

class MPicker implements MPickerInterface{

  props = {
    list: Array,
    name: String,
    index:{
      type:Boolean,
      default: false
    },

    height: {
      type: Number,
      default: 400
    },

    placeholder:{
      type:String,
      default: "请选择"
    },
    showIndex:{ // 用于展示list, item 的index属性(开发使用)
      type:Boolean,
      default: false
    },
  }

  data = {
    currentIndex:0 // 当前是数组的第几个(表示选择了 list 中的第几个)
  }

  computed = {

  }

  watch  = {
  }

  methods = {

    onSelectChange(e) {
      const currentIndex = this.currentIndex = e.detail.value// 修改当前的索引, 当前是数组的第几个

      const value = this.list[currentIndex].id // 这一项的id

      const name = e.target.dataset.name

      this.$cmlEmit('selectevent',{// 自定义组件的事件的触发机制
        name:name,
        value:value
      })
    },

  }

  beforeCreate() {


  }

  created() {
  }

  beforeMount() {
  }

  mounted() {
  }

  beforeDestroy() {
  }

  destroyed() {
  }
}

export default new MPicker();
</script>
<style>
    .search-text{
        line-height: 80cpx;/* m-form-item 的高度 = 80cpx  */
    }
</style>
<script cml-type="json">
{
  "base": {
    "component": true,
    "usingComponents": {
    }
  }
}
</script>

属性

属性名	类型	必填	默认值	说明
showIndex	Boolean	否	false	用于展示list, item 的index属性(开发使用)
placeholder	String	否	“请选择”	滚动选择器的默认展示的文本
height	Number	否	400	滚动选择器标题栏的高度
list	ArrayObject	是		滚动选择器滚动的数据,注意：，在新版内置组件，data 属性名已废弃
index	当前选中项的索引	是	false	用于子组件向外部传出的值
name	String	是		用于子组件向外部传出的名称
c-bind:selectevent=“onPickerSelectChange”	EventHandle	是		选择器滚动时触发: 返回事件对象: event.type="selectevent" event.detail = {index}

参考文档

多态协议：

http://cml.didi.cn/doc/framework/framework.html

http://cml.didi.cn/doc/framework/polymorphism/intro.html