第05期 任务界面

2590

1、任务列表

src/pages/Todo.vue

先设置背景颜色，并且填充整个页面

<template>
	<!-- 设置背景颜色为灰色，并且填充整个页面 -->
  <q-page class="bg-grey-3 column">
    
  </q-page>
</template>
复制代码

在Quasar组件库中，找到任务列表的组件，复制代码

image.png

<template>
	<!-- 设置背景颜色为灰色，并且填充整个页面 -->
  <q-page class="bg-grey-3 column">
    <!-- 复选框任务列表 -->
    <q-list>
      <!-- 任务项 -->
      <q-item tag="label" v-ripple>
        <q-item-section avatar>
          <q-checkbox v-model="color" val="teal" color="teal" />
        </q-item-section>
        <q-item-section>
          <q-item-label>Teal</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>
复制代码

绑定数据源及列表项的循环

<template>
  <!-- 设置背景颜色为灰色，并且填充整个页面 -->
  <q-page class="bg-grey-3 column">
    <!-- 复选框任务列表 -->
    <q-list 
        class="bg-white"
        separator
        bordered>
        <!-- 任务项 v-for进行循环 -->
      <q-item v-for="(task, index) in tasks" :key="task.title" tag="label" v-ripple>
        <q-item-section avatar>
          <q-checkbox v-model="task.done" color="primary" />
        </q-item-section>
        <q-item-section>
       <!-- 任务名称 -->
          <q-item-label>{{task.title}}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>

<script>
    export default {
      // 任务的数据源
      data() {
        return {
    // 任务列表
            tasks: [
                {
                  title: '学习',
                  done: true
                },
                {
                  title: '吃饭',
                  done: false
                },
                {
                  title: '睡觉',
                  done: false
                }
            ]
        }
      }
    }
</script>
复制代码

2、删除任务

添加完成任务时的样式，删除线及背景色

<template>
<!-- 设置背景颜色为灰色，并且填充整个页面 -->
  <q-page class="bg-grey-3 column">
    <!-- 复选框任务列表 -->
    <q-list 
        class="bg-white"
        separator
        bordered>
        <!-- 任务项 v-for进行循环 -->
        <!-- @click给任务项添加点击事件，改变任务的完成状态 -->
      <!-- :class="{'done bg-blue-1': task.done}" 给任务项绑定样式 -->
      <q-item 
        v-for="(task, index) in tasks" 
        :key="task.title"
        @click="task.done = !done"
        clickable
        :class="{'done bg-blue-1': task.done}"
        v-ripple>
        <q-item-section avatar>
          <q-checkbox v-model="task.done" color="primary" />
        </q-item-section>
        <q-item-section>
        <!-- 任务名称 -->
          <q-item-label>{{task.title}}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>

<script>
	export default {
	  // 任务的数据源
	  data() {
	    return {
          // 任务列表
                tasks: [
                    {
                      title: '学习',
                      done: true
                    },
                    {
                      title: '吃饭',
                      done: false
                    },
                    {
                      title: '睡觉',
                      done: false
                    }
              ]
	    }
	  }
	}
</script>

<style lang="scss">
// 设置任务项目完成时的下划线样式
  .done {
    .q-item__label {
      text-decoration: line-through;
      color: #bbbbbb;
    }
  }
</style>
复制代码

image.png

添加删除按钮

<template>
  <!-- 设置背景颜色为灰色，并且填充整个页面 -->
  <q-page class="bg-grey-3 column">
    <!-- 复选框任务列表 -->
    <q-list 
        class="bg-white"
        separator
        bordered>
      <!-- 任务项 v-for进行循环 -->
      <!-- @click给任务项添加点击事件，改变任务的完成状态 -->
      <!-- :class="{'done bg-blue-1': task.done}" 给任务项绑定样式 -->
      <q-item 
        v-for="(task, index) in tasks" 
        :key="task.title"
        @click="task.done = !done"
        clickable
        :class="{'done bg-blue-1': task.done}"
        v-ripple>
        <q-item-section avatar>
          <q-checkbox v-model="task.done" color="primary" />
        </q-item-section>
        <q-item-section>
          <!-- 任务名称 -->
          <q-item-label>{{task.title}}</q-item-label>
        </q-item-section>
          <!-- 删除按钮 -->
          <!-- v-if增加一个判断 -->
          <q-item-section v-if="task.done" side>
          <!-- 删除按钮 -->
              <q-btn
                flat
                round
                dense
                color="primary"
                icon="delete" />
        </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>

……
复制代码

image.png

添加删除按钮的方法

<template>
  <!-- 设置背景颜色为灰色，并且填充整个页面 -->
  <q-page class="bg-grey-3 column">
    <!-- 复选框任务列表 -->
    <q-list 
        class="bg-white"
        separator
        bordered>
        <!-- 任务项 v-for进行循环 -->
        <!-- @click给任务项添加点击事件，改变任务的完成状态 -->
        <!-- :class="{'done bg-blue-1': task.done}" 给任务项绑定样式 -->
      <q-item 
        v-for="(task, index) in tasks" 
        :key="task.title"
        @click="task.done = !done"
        clickable
        :class="{'done bg-blue-1': task.done}"
        v-ripple>
            <q-item-section avatar>
              <q-checkbox v-model="task.done" color="primary" />
            </q-item-section>
            <q-item-section>
            <!-- 任务名称 -->
            <q-item-label>{{task.title}}</q-item-label>

            </q-item-section>
            <!-- 删除按钮 -->
            <!-- v-if增加一个判断 -->
            <q-item-section v-if="task.done" side>
              <!-- 删除按钮 -->
              <!-- @click触发删除任务的方法 -->
              <q-btn
                @click.stop="deleteTask(index)"
                flat
                round
                dense
                color="primary"
                icon="delete" />
            </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>

<script>
export default {
  // 任务的数据源
  data() {
    return {
      newTask: '',
      tasks: [
        {
           title: '学习',
           done: true
         },
         {
           title: '吃饭',
           done: false
         },
         {
           title: '睡觉',
           done: false
         }
      ]
    }
  },
  // 删除任务deleteTask方法
  methods: {
    deleteTask(index) {
        this.tasks.splice(index, 1)
    },
  }
}
</script>

复制代码

删除任务的时候，触发一个对话框，确定之后再执行删除任务

image.png

在Quasar插件中挑选一个对话框，拷贝代码

image.png

image.png

<template>
	<!-- 设置背景颜色为灰色，并且填充整个页面 -->
  <q-page class="bg-grey-3 column">
    <!-- 复选框任务列表 -->
    <q-list 
      class="bg-white"
      separator
      bordered>
      <!-- 任务项 v-for进行循环 -->
      <!-- @click给任务项添加点击事件，改变任务的完成状态 -->
      <!-- :class="{'done bg-blue-1': task.done}" 给任务项绑定样式 -->
      <q-item 
        v-for="(task, index) in tasks" 
        :key="task.title"
        @click="task.done = !done"
        clickable
        :class="{'done bg-blue-1': task.done}"
        v-ripple>
        <q-item-section avatar>
          <q-checkbox v-model="task.done" color="primary" />
        </q-item-section>
        <q-item-section>
        <!-- 任务名称 -->
          <q-item-label>{{task.title}}</q-item-label>
        </q-item-section>
        
       <q-item-section v-if="task.done" side>
       <!-- 删除按钮 -->
        <!-- @click触发删除任务的方法 -->
          <q-btn
           @click.stop="deleteTask(index)"
            flat
            round
            dense
            color="primary"
            icon="delete" />
        </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>

<script>
export default {
  // 任务的数据源
  data() {
    return {
      newTask: '',
      tasks: [
        {
           title: '学习',
           done: true
         },
         {
           title: '吃饭',
           done: false
         },
         {
           title: '睡觉',
           done: false
         }
      ]
    }
  },
  // 删除任务deleteTask方法
  // 点击删除按钮的时候，触发对话框
  methods: {
    deleteTask(index) {
        this.$q.dialog({
        title: '提示',
        message: '确认删除吗？',
        cancel: true,
        persistent: true
      }).onOk(() => {
        // 点击对话框的确认按钮后，执行删除任务的操作
        this.tasks.splice(index, 1)
        // 删除之后，提示
        this.$q.notify(‘'任务已删除'’)
      })
    },
  }
}
</script>
复制代码

注册dialog插件

quasar.conf.js

framework: {
       ……

      // Quasar plugins
      plugins: ['Dialog', 'Notify']
    },
复制代码

3、添加任务

添加任务输入框，在Quasar组件库中，找到合适的输入框，拷贝代码

<q-input bottom-slots v-model="text" label="Label" counter maxlength="12" :dense="dense">
    <template v-slot:before>
      <q-icon name="event" />
    </template>

    <template v-slot:hint>
      Field hint
    </template>

    <template v-slot:append>
      <q-btn round dense flat icon="add" />
    </template>
</q-input>
复制代码

image.png

src/pages/Todo.vue

将拷贝的输入框的代码，粘贴到任务列表页面中，去掉不需要的元素

<template>
	<!-- 设置背景颜色为灰色，并且填充整个页面 -->
  <q-page class="bg-grey-3 column">
    <!-- 新增任务，任务输入框 -->
    <div class="row q-pa-sm bg-primary">
      <q-input v-model="text">
        <template v-slot:append>
          <q-btn round dense flat icon="add" />
        </template>
      </q-input>
    </div>
    <!-- 复选框任务列表 -->
    <q-list 
      class="bg-white"
      separator
      bordered>
      <!-- 任务项 v-for进行循环 -->
      <!-- @click给任务项添加点击事件，改变任务的完成状态 -->
      <!-- :class="{'done bg-blue-1': task.done}" 给任务项绑定样式 -->
      <q-item 
        v-for="(task, index) in tasks" 
        :key="task.title"
        @click="task.done = !done"
        clickable
        :class="{'done bg-blue-1': task.done}"
        v-ripple>
        
            <q-item-section avatar>
              <q-checkbox v-model="task.done" color="primary" />
            </q-item-section>
            <q-item-section>
            <!-- 任务名称 -->
            <q-item-label>{{task.title}}</q-item-label>
            </q-item-section>

               <!-- 删除按钮 -->
               <!-- v-if增加一个判断 -->
	       <q-item-section v-if="task.done" side>
                 <!-- @click触发删除任务的方法 -->
                  <q-btn
                    @click.stop="deleteTask(index)"
                    flat
                    round
                    dense
                    color="primary"
                    icon="delete" />
               </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>
复制代码

image.png

调整输入框的样式，宽度calss=“col”，背景色bg-color=”white”

<!-- 新增任务 -->
    <div class="row q-pa-sm bg-primary">
      <!-- 输入框组件,输入框的属性square,filled-->
      <!-- class='col' -->
      <q-input
        v-model="text"
        class="col"
        filled
        square
        bg-color="white"
        placeholder="输入任务"
        dense>
        <template v-slot:append>
          <!-- 触发新增任务的方法 -->
          <q-btn
            round
            dense
            flat
            icon="add" />
        </template>
      </q-input>
    </div>
复制代码

效果如下：

image.png

绑定数据源，创建新增任务的方法

html

<template>
  <q-page class="bg-grey-3 column">
    <!-- 新增任务 -->
    <div class="row q-pa-sm bg-primary">
      <!-- 输入框组件,输入框的属性square,filled-->
      <!-- class='col' -->
      <!-- 绑定数据源v-model=“newTask” -->
      <!-- 设置按键盘enter时，触发新增任务的方法addTask -->
      <q-input
        v-model="newTask"
        @keyup.enter="addTask"
        class="col"
        filled
        square
        bg-color="white"
        placeholder="输入任务"
        dense>
        <template v-slot:append>
          <!-- 点击+图标，触发新增任务的方法addTask-->
          <q-btn
            @click="addTask"
            round
            dense
            flat
            icon="add" />
        </template>
      </q-input>
    </div>

		......

  </q-page>
</template>
复制代码

js


export default {
  // 任务的数据源
  data() {
    return {
      newTask: '',
      tasks: [
        // {
        //   title: '学习',
        //   done: true
        // },
        // {
        //   title: '吃饭',
        //   done: false
        // },
        // {
        //   title: '睡觉',
        //   done: false
        // }
      ]
    }
  },
  // 删除任务deleteTask方法
  // 插件：对话框dialog，提示框notify
  methods: {
    deleteTask(index) {
      this.$q.dialog({
        title: '提示',
        message: '确认删除吗？',
        cancel: true,
        persistent: true
      }).onOk(() => {
        // console.log('>>>> OK')
        this.tasks.splice(index, 1)
        this.$q.notify('任务已删除')
      })
    },
    // 添加任务的方法
    addTask() {
      this.tasks.push({
        title: this.newTask,
        done: false
      })
      // 清空输入框
      this.newTask = ''
    }
  }
}
复制代码

4、当任务列表为空时的界面

image.png

html

当任务列表为空时，才显示No tasks的界面

<template>
  <q-page class="bg-grey-3 column">
    <!-- 新增任务 -->
    <div class="row q-pa-sm bg-primary">
			......
    </div>

    <!-- 任务列表 -->
    <q-list
      class="bg-white"
      separator
      bordered>
      ......
    </q-list>
    <!-- 任务列表为空的时候的显示样式 -->
    <!-- v-if="!tasks.length任务列表为空" -->
    <div
      v-if="!tasks.length"
      class="no-tasks absolute-center">
      <q-icon name="check" size="100px" color="primary"/>
      <div class="text-h5 text-primary text-center">
        No tasks
      </div>
    </div>
  </q-page>
</template>
复制代码

css 样式

设置不透明度为0.5

<style lang="scss">
// 下划线样式
  .done {
    .q-item__label {
      text-decoration: line-through;
      color: #bbbbbb;
    }
  }
  .no-tasks {
    opacity: 0.5;
  }

</style>
复制代码

5、todo.vue界面完整代码

<template>
  <q-page class="bg-grey-3 column">
    <!-- 新增任务 -->
    <div class="row q-pa-sm bg-primary">
      <!-- 输入框组件,输入框的属性square,filled-->
      <!-- class='col' -->
      <q-input
        v-model="newTask"
        @keyup.enter="addTask"
        class="col"
        filled
        square
        bg-color="white"
        placeholder="输入任务"
        dense>
        <template v-slot:append>
          <!-- 触发新增任务的方法 -->
          <q-btn
            @click="addTask"
            round
            dense
            flat
            icon="add" />
        </template>
      </q-input>
    </div>

    <!-- 得查一下separator的用法 -->
    <q-list
      class="bg-white"
      separator
      bordered>
      <!-- v-for循环数据源 -->
      <!-- clickable属性 -->
      <!-- 根据是否点击完成任务，绑定一个done的样式 -->
      <!-- bg-blue-1增加了一个背景颜色 -->
      <!-- index索引 -->
      <q-item
        v-for="(task, index) in tasks"
        :key="task.title"
        @click="task.done = !task.done"
        :class="{'done bg-blue-1': task.done}"
        clickable
        v-ripple>
        <!-- 复选框 -->
        <q-item-section avatar>
          <!-- class="no-pointer-events不知道是啥意思" -->
          <q-checkbox
            v-model="task.done"
            class="no-pointer-events"
            color="primary" />
        </q-item-section>
        <!-- 任务名称 -->
        <q-item-section>
          <q-item-label>{{ task.title }}</q-item-label>
        </q-item-section>
        <!-- 删除按钮 -->
        <q-item-section
          v-if='task.done'
          side>
          <!-- 注意@click.stop的用法 -->
          <q-btn
            @click.stop="deleteTask(index)"
            flat
            round
            dense
            color="primary"
            icon="delete" />
        </q-item-section>
      </q-item>
    </q-list>
    <!-- 任务列表为空的时候的显示样式 -->
    <!-- v-if="!tasks.length任务列表为空" -->
    <div
      v-if="!tasks.length"
      class="no-tasks absolute-center">
      <q-icon name="check" size="100px" color="primary"/>
      <div class="text-h5 text-primary text-center">
        No tasks
      </div>
    </div>
  </q-page>
</template>

<script>
export default {
  // 任务的数据源
  data() {
    return {
      newTask: '',
      tasks: [
        // {
        //   title: '学习',
        //   done: true
        // },
        // {
        //   title: '吃饭',
        //   done: false
        // },
        // {
        //   title: '睡觉',
        //   done: false
        // }
      ]
    }
  },
  // 删除任务deleteTask方法
  // 插件：对话框dialog，提示框notify
  methods: {
    deleteTask(index) {
      this.$q.dialog({
        title: '提示',
        message: '确认删除吗？',
        cancel: true,
        persistent: true
      }).onOk(() => {
        // console.log('>>>> OK')
        this.tasks.splice(index, 1)
        this.$q.notify('任务已删除')
      })
    },
    // 添加任务的方法
    addTask() {
      this.tasks.push({
        title: this.newTask,
        done: false
      })
      // 清空输入框
      this.newTask = ''
    }
  }
}
</script>

<style lang="scss">
// 下划线样式
  .done {
    .q-item__label {
      text-decoration: line-through;
      color: #bbbbbb;
    }
  }
  .no-tasks {
    opacity: 0.5;
  }

</style>
复制代码
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
前端
喜欢就支持一下吧
点赞0 分享
AI-robot的头像-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
14年前 2.6W+
机器学习之随机森林回归篇（RandomForestRegressor）-一一网
机器学习之随机森林回归篇（RandomForestRegressor）
机器学习之随机森林回归篇（RandomForestRegressor）
4年前 4235
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS-一一网
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
4年前 3918
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞-一一网
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
19年前 3842
Wireshark之抓包文件保存-一一网
Wireshark之抓包文件保存
Wireshark之抓包文件保存
4年前 3408
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3162
相关推荐
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3162
手摸手教你实现vue的动态路由（addRoute版）-一一网
手摸手教你实现vue的动态路由（addRoute版）
手摸手教你实现vue的动态路由（addRoute版）
4年前 3145
Unity实用功能之使用TextMeshPro组件-一一网
Unity实用功能之使用TextMeshPro组件
Unity实用功能之使用TextMeshPro组件
4年前 3097
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …-一一网
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …...
4年前 2847
Windi CSS 在 Vue3 + Vite 项目中的使用-一一网
Windi CSS 在 Vue3 + Vite 项目中的使用
Windi CSS 在 Vue3 + Vite 项目中的使用
3年前 2746
vue3 使用 qrcode.vue 生成二维码-一一网
vue3 使用 qrcode.vue 生成二维码
vue3 使用 qrcode.vue 生成二维码
4年前 2650
搜索
开启精彩搜索
世界，您好！-一一网
3.7W+人已阅读
世界，您好！
TOP1
番茄社区无限观看+付费视频破解教程-一一网
番茄社区无限观看+付费视频破解教程
5年前3.2W+人已阅读
TOP2
香蕉视频v3.8.3_VIP会员破解教程-一一网
香蕉视频v3.8.3_VIP会员破解教程
5年前3.1W+人已阅读
TOP3
[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网
密码保护：[桜井宁宁]COS和泉纱雾超可爱写真福利集
5年前2.8W+人已阅读
TOP4
[桜井宁宁] 爆乳奶牛少女cos写真-一一网
密码保护：[桜井宁宁] 爆乳奶牛少女cos写真
5年前2.8W+人已阅读
TOP5
快猫v1.1.7会员破解版_最新快猫vip破解教程大全-一一网
快猫v1.1.7会员破解版_最新快猫vip破解教程大全
5年前2.7W+人已阅读
TOP6
标签云
默认路由黑裙黑群晖麦克风车机鸿蒙系统鸿蒙系统鸿蒙OS鸿蒙驱动软件驱动题库音频剪辑音乐剪辑面板面具静态雷石集群随机阿里云