MorJS 添加組件

組件配置?

1. 在 src/components 下創(chuàng)建文件夾 delete-check 用于存放刪除 Todo 功能相關(guān)的組件
2. 在該文件夾下創(chuàng)建小程序組件的四個(gè)基礎(chǔ)文件 delete-check.wxml delete-check.less delete-check.ts delete-check.json
3. 在需要使用到該組件的頁(yè)面 todos.json 中配置引入該組件

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

   4. 在需要使用到該組件的頁(yè)面 todos.wxml 中使用引入的組件

<!-- src/pages/todos/todos.wxml -->
<view class="page-todos">
  ...
  <!-- 刪除確認(rèn)彈窗 -->
  <delete-check wx:if="{{showDeleteCheck}}" checkIndex="{{checkIndex}}" onCancelDel="onCancelDel" />
</view>

組件功能?

1. 刪除入口：首頁(yè) src/pages/todos 需要添加一下刪除的觸發(fā)入口，修改一下首頁(yè)的樣式，js 中需要增加點(diǎn)擊刪除方法，并把該項(xiàng)的 index 傳給組件，用于標(biāo)記哪一項(xiàng)的內(nèi)容需要被刪除，同時(shí)添加一個(gè)方法 onCancelDel 用于設(shè)置 showDeleteCheck 為 false 關(guān)閉刪除確認(rèn)框。

<!-- 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
  },
  // 打開(kāi)刪除框
  delTodo(e) {
    const index = e.target?.targetDataset?.index || e.target?.dataset?.index
    this.setData({
      checkIndex: index,
      showDeleteCheck: true
    })
  },
  // 關(guān)閉刪除框
  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 文件用于顯示彈窗的浮層，其中一個(gè)確認(rèn)刪除按鈕用于觸發(fā)刪除，一個(gè)取消按鈕用于關(guān)閉彈窗
• css 文件編輯頁(yè)面樣式
• js 文件中，對(duì)頁(yè)面?zhèn)魅氲?index 對(duì)應(yīng)的內(nèi)容進(jìn)行保存，提供給 xml 中顯示，并添加一個(gè)刪除方法和一個(gè)關(guān)閉彈窗方法提供給 xml 點(diǎn)擊觸發(fā)

<!-- src/components/delete-check/delete-check.wxml -->
<view class="delete-check-bg">
  <view class="delete-check">
    <view class="delete-check__text">確認(rèn)刪除「{{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 實(shí)例
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. 通過(guò)上述流程后，我們?cè)?todo list 的每一項(xiàng)后面都會(huì)有一個(gè)「刪除」按鈕，點(diǎn)擊將會(huì)打開(kāi)刪除彈窗，點(diǎn)擊刪除后即可刪除該項(xiàng)，以上，恭喜你學(xué)會(huì)了怎么添加和編輯組件代碼！?? ?? ??