小程序域名组件开发

目的

• 域名公共组件

实施

结构

生成domain目录， 包含4个文件

• domain
  • index.ts
  • index.json
  • index.wxml
  • index.wxss

index.json

 {
  "component": true,
  "usingComponents": {
    "field": "/components/field/field",
  }
}

index.ts

Component({
  behaviors: ['wx://form-field'],
  properties: {
    // 必须要有value，作为组件的值
    value: {
      type: Array,
      value: [],
      observer() {
        this.getRenderList();
      }
    },
    disabled: {
      type: Boolean,
      value: true
    },
    error: {
      type: Array,
      value: []
    }
  },
  data: {
    renderList: []
  },
  attached() {
    this.getRenderList();
  },
  methods: {
    // 计算渲染列表
    getRenderList() {
      const { value } = this.data;
      this.setData({ renderList: value });
    },
    /**
     * 删除操作
     */
    handleDelete(e) {
      const targetIdx = e.currentTarget.dataset.index;
      const { renderList } = this.data;
      const newRenderList = renderList.filter((val, idx) => idx !== targetIdx);
      this.setData({
        renderList: newRenderList
      });
      this.clearError(targetIdx);
      this.triggerEvent('customevent', { list: newRenderList });
    }
  }
});

index.wxml

<view class="weui-cells">
  <view
    class="wrapper"
    wx:for="{{ renderList }}"
    wx:key="{{ index }}">
    <view
      class="weui-cell user-defined_input_select_columns {{ disabled ? 'weui-cell_disabled' : '' }}">
      <view
        class="weui-cell__op  {{ disabled ? 'hidden' :'' }}">
        <button
          wx:if="{{ !disabled  }}"
          class='delete-btn'
          bindtap="handleDelete"
          data-index="{{ index }}"
        >
          <icon class="icon-delete"></icon>
        </button>
      </view>
      <view class="weui-cell__hd da-url-lable">
        <view class="weui-label">网站域名</view>
      </view>
      <view class="weui-cell__bd">
        <input placeholder-class="placeholder" 
          class="weui-input" 
          value="{{ item }}" 
          disabled="true" 
          data-index="{{ index }}"
        />
      </view>
    </view>
  </view>
</view>

调用

<domain
  name="domains"
  id="domains"
  value="{{ domains }}"
  error="{{ domainsError }}"
  disabled="{{ domainsDisabled }}"
  bindcustomevent="changeDomains"
/>

总结

• 组件必须要设置value参数供外部读取值
• bindcustomevent 回调函数进行修改同步value值，单向数据流