使用 origin- 标签 封装 wx 原生 picker 组件
如何使用多态组件 , 使用wx 小程序原生的 rich-text 组件
一 问题产生
使用 cml 框架的 c-picker 组件 发现 文档不支持 arryObject 类型
那么如何解决?
传入对象格式怎么使用c-picker 这个组件
二 解决问题
那么接下来就是代码的实现(结合多态协议封装 wx小程序的原生组件)
首先在项目的根目录下输入命令
cml init component
-
切换选择Polymorphic component
-
输入
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