MorJS 添加组件

组件配置​

1. 在 src/components 下创建文件夹 delete-check 用于存放删除 Todo 功能相关的组件
2. 在该文件夹下创建小程序组件的四个基础文件 delete-check.wxml delete-check.less delete-check.ts delete-check.json
3. 在需要使用到该组件的页面 todos.json 中配置引入该组件

// src/pages/todos/todos.json
{
  "usingComponents": {
    "add-button": "../../components/add-button/add-button",
    "delete-check": "../../components/delete-check/delete-check"
  }
}

   4. 在需要使用到该组件的页面 todos.wxml 中使用引入的组件

<!-- src/pages/todos/todos.wxml -->
<view class="page-todos">
  ...
  <!-- 删除确认弹窗 -->
  <delete-check wx:if="{{showDeleteCheck}}" checkIndex="{{checkIndex}}" onCancelDel="onCancelDel" />
</view>

组件功能​

1. 删除入口：首页 src/pages/todos 需要添加一下删除的触发入口，修改一下首页的样式，js 中需要增加点击删除方法，并把该项的 index 传给组件，用于标记哪一项的内容需要被删除，同时添加一个方法 onCancelDel 用于设置 showDeleteCheck 为 false 关闭删除确认框。

<!-- src/pages/todos/todos.wxml -->
<label wx:for="{{todos}}" wx:for-item="item" class="todo-item {{item.completed ? 'checked' : ''}}" wx:key="{{index}}">
  ...
  <view class="todo-item-del" bindtap="delTodo" data-index="{{index}}">删除</view>
</label>

// src/pages/todos/todos.ts
import { wPage } from '@morjs/core'

wPage({
  data: {
    checkIndex: '',
    showDeleteCheck: false
  },
  // 打开删除框
  delTodo(e) {
    const index = e.target?.targetDataset?.index || e.target?.dataset?.index
    this.setData({
      checkIndex: index,
      showDeleteCheck: true
    })
  },
  // 关闭删除框
  onCancelDel(e) {
    this.setData({
      todos: app.todos,
      checkIndex: '',
      showDeleteCheck: false
    })
  }
})

/* src/pages/todos/todos.less */
.todo-item-del {
  margin: 0 20rpx;
  color: crimson;
}

2. 删除功能：

• xml 文件用于显示弹窗的浮层，其中一个确认删除按钮用于触发删除，一个取消按钮用于关闭弹窗
• css 文件编辑页面样式
• js 文件中，对页面传入的 index 对应的内容进行保存，提供给 xml 中显示，并添加一个删除方法和一个关闭弹窗方法提供给 xml 点击触发

<!-- src/components/delete-check/delete-check.wxml -->
<view class="delete-check-bg">
  <view class="delete-check">
    <view class="delete-check__text">确认删除「{{text}}」</view>
    <view class="delete-check__btn-box">
      <view class="btn-del" bindtap="del">删除</view>
      <view class="btn-cancel" bindtap="cancel">取消</view>
    </view>
  </view>
</view>

// src/components/delete-check/delete-check.ts
import { wComponent } from '@morjs/core'

// 获取全局 app 实例
const app = getApp()

wComponent({
  props: {
    checkIndex: '',
    onCancelDel: () => {}
  },
  data: {
    text: ''
  },
  created() {
    const text = app.todos[this.props.checkIndex].text
    this.setData({ text })
  },
  methods: {
    del() {
      app.todos.splice(this.props.checkIndex, 1)
      this.cancel()
    },
    cancel() {
      this.props.onCancelDel()
    }
  }
})

/* src/components/delete-check/delete-check.less */
.delete-check-bg {
  width: 100vw;
  height: 100vh;
  background-color: rgba(#fff, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .delete-check {
    width: 400rpx;
    border: 1rpx solid #ccc;
    background: #fff;
    border-radius: 8rpx;
  }
  .delete-check__text {
    padding: 50rpx 30rpx;
    text-align: center;
  }
  .delete-check__btn-box {
    display: flex;
    align-items: center;
    .btn-del {
      width: 50%;
      text-align: center;
      color: crimson;
      padding: 20rpx;
      border: 1rpx solid #ccc;
      border-right: none;
    }
    .btn-cancel {
      width: 50%;
      text-align: center;
      padding: 20rpx;
      border: 1rpx solid #ccc;
    }
  }
}

// src/components/delete-check/delete-check.json
{
  "component": true
}

3. 通过上述流程后，我们在 todo list 的每一项后面都会有一个「删除」按钮，点击将会打开删除弹窗，点击删除后即可删除该项，以上，恭喜你学会了怎么添加和编辑组件代码！🎉 🎉 🎉