案例图片如下：
1 <van-cell-group>
2 <van-cell>
3 <van-row>
4 <van-col span="20">
5 <van-field
6 :value="content"
7 @change="handleChange"
8 placeholder="请输入内容"
9 />
10 </van-col>
11 <van-col span="4">
12 <van-button type="primary" @click="onClickAdd" size="small"
13 >添加</van-button
14 >
15 </van-col>
16 </van-row>
17 </van-cell>
18 <van-cell v-for="(item, index) in listItem" :key="index">
19 <van-row class="bg flex">
20 <van-col span="2">
21 <van-checkbox
22 v-model="item.checked"
23 shape="square"
24 @change="onChange(item, index, $event)"
25 >
26 </van-checkbox>
27 </van-col>
28 <van-col span="16">
29 <div v-if="!item.checked" class="name">{{ item.name }}</div>
30 <van-field v-else v-model="item.name" placeholder="请输入内容" />
31 </van-col>
32 <van-col span="4">
33 <span @click="onClickDelete(item, index)" class="fontColor"
34 >删除</span
35 >
36 </van-col>
37 </van-row>
38 </van-cell>
39 <van-empty
40 v-if="listItem.length == 0"
41 image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
42 image-size="40"
43 description="暂无数据"
44 />
45
46 <div class="footer flex" v-if="items.length != 0">
47 <span>剩余{{ notFinsh }}项</span>
48 <van-tabs
49 v-model:active="active"
50 @click-tab="onClickTab"
51 shrink
52 type="card"
53 size="small"
54 >
55 <van-tab title="全部"></van-tab>
56 <van-tab title="未完成"></van-tab>
57 <van-tab title="已完成"></van-tab>
58 </van-tabs>
59 <span type="primary" @click="onClickClear" class="fontColor"
60 >删除已完成</span
61 >
62 </div>
63 </van-cell-group>
js和css代码如下：
1 <script>
2 import { useStore, mapState, mapGetters } from 'vuex'
3 import { showToast } from 'vant'
4 import { showConfirmDialog } from 'vant'
5 import { ref, computed } from 'vue'
6 export default {
7 setup() {
8 const store = useStore()
9 const active = ref('1')
10 const content = computed(() => store.state.content)
11 const items = computed(() => store.state.items)
12 console.log('store', store)
13 function onClickAdd() {
14 console.log('content', content)
15 if (content.value == '') {
16 showToast('输入内容不能为空')
17 } else {
18 store.commit('addItem')
19 }
20 }
21 function handleChange(e) {
22 store.commit('setInputValue', e.target.value)
23 }
24 function onClickDelete(item, i) {
25 showConfirmDialog({
26 title: '提示',
27 message: '您确定要' + item.name + '删除吗？',
28 })
29 .then(() => {
30 store.commit('deleteItem', i)
31 })
32 .catch(() => {})
33 }
34 function onChange(item, index, e) {
35 item.checked != item.checked
36 //store.commit('onChangeChecked', index, e.target.value)
37 //console.log('items', items.value)
38 }
39 function onClickClear() {
40 store.commit('clearItem')
41 }
42 function onClickTab(val) {
43 store.commit('changeItem', val.name)
44 }
45 return {
46 active,
47 onClickAdd,
48 onClickTab,
49 onClickClear,
50 onChange,
51 onClickDelete,
52 handleChange,
53 content,
54 items,
55 }
56 },
57 computed: {
58 ...mapGetters(['notFinsh', 'listItem']),
59 // ...mapState(['items', 'value',listItem]),
60 },
61 }
62 </script>
63 <style scoped>
64 .bg {
65 background: #fff;
66 width: 100%;
67 }
68 .fontColor {
69 color: #3071f1;
70 font-size: 12px;
71 }
72 .flex {
73 display: flex;
74 justify-content: space-between;
75 align-items: center;
76 }
77 .name {
78 text-align: left;
79 padding: 14px;
80 }
81 .bg >>> .van-field__control:focus {
82 outline: none;
83 border-color: #409eff;
84 }
85 .footer {
86 padding: 20px;
87 }
88 </style>
标签：function,todolist,items,content,item,vant4,vue3,commit,store From： https://www.cnblogs.com/CinderellaStory/p/17458834.html