Issue 05 mission interface

1. Task lists

src/pages/Todo.vue

Set the background color and fill the entire page

<template>
	<! Set the background color to gray and fill the entire page -->
  <q-page class="bg-grey-3 column">
    
  </q-page>
</template>
Copy the code

In the Quasar component library, find the component on the task list and copy the code

<template>
	<! Set the background color to gray and fill the entire page -->
  <q-page class="bg-grey-3 column">
    <! -- Check box Task list -->
    <q-list>
      <! -- Task Item -->
      <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>
Copy the code

Loops that bind data sources and list items

<template>
  <! Set the background color to gray and fill the entire page -->
  <q-page class="bg-grey-3 column">
    <! -- Check box Task list -->
    <q-list 
        class="bg-white"
        separator
        bordered>
        <! -- Task item V-for loop -->
      <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>
       <! -- Task name -->
          <q-item-label>{{task.title}}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>

<script>
    export default {
      // Task data source
      data() {
        return {
    // Task list
            tasks: [{title: 'learning'.done: true
                },
                {
                  title: 'eat'.done: false
                },
                {
                  title: 'sleep'.done: false}]}}}</script>
Copy the code

2. Delete a task

Add a style for completing tasks, remove lines and background colors

<template>
<! Set the background color to gray and fill the entire page -->
  <q-page class="bg-grey-3 column">
    <! -- Check box Task list -->
    <q-list 
        class="bg-white"
        separator
        bordered>
        <! -- Task item V-for loop -->
        <! -- @click adds a click event to the task item to change the task completion status -->
      <! - : class = "{' done bg - blue - 1: task. Done}" to the task item binding style -- -- >
      <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>
        <! -- Task name -->
          <q-item-label>{{task.title}}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>

<script>
	export default {
	  // Task data source
	  data() {
	    return {
          // Task list
                tasks: [{title: 'learning'.done: true
                    },
                    {
                      title: 'eat'.done: false
                    },
                    {
                      title: 'sleep'.done: false}]}}}</script>

<style lang="scss">// Sets the underline style when the task item completes.done {
    .q-item__label {
      text-decoration: line-through;
      color: #bbbbbb; }}</style>
Copy the code

Add delete button

<template>
  <! Set the background color to gray and fill the entire page -->
  <q-page class="bg-grey-3 column">
    <! -- Check box Task list -->
    <q-list 
        class="bg-white"
        separator
        bordered>
      <! -- Task item V-for loop -->
      <! -- @click adds a click event to the task item to change the task completion status -->
      <! - : class = "{' done bg - blue - 1: task. Done}" to the task item binding style -- -- >
      <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>
          <! -- Task name -->
          <q-item-label>{{task.title}}</q-item-label>
        </q-item-section>
          <! Delete button -->
          <! -- v-if add a judgment -->
          <q-item-section v-if="task.done" side>
          <! Delete button -->
              <q-btn
                flat
                round
                dense
                color="primary"
                icon="delete" />
        </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>...Copy the code

Add a method to remove a button

<template>
  <! Set the background color to gray and fill the entire page -->
  <q-page class="bg-grey-3 column">
    <! -- Check box Task list -->
    <q-list 
        class="bg-white"
        separator
        bordered>
        <! -- Task item V-for loop -->
        <! -- @click adds a click event to the task item to change the task completion status -->
        <! - : class = "{' done bg - blue - 1: task. Done}" to the task item binding style -- -- >
      <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>
            <! -- Task name -->
            <q-item-label>{{task.title}}</q-item-label>

            </q-item-section>
            <! Delete button -->
            <! -- v-if add a judgment -->
            <q-item-section v-if="task.done" side>
              <! Delete button -->
              <! -- @click trigger delete task method -->
              <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 {
  // Task data source
  data() {
    return {
      newTask: ' '.tasks: [{title: 'learning'.done: true
         },
         {
           title: 'eat'.done: false
         },
         {
           title: 'sleep'.done: false}}},// deleteTask deleteTask method
  methods: {
    deleteTask(index) {
        this.tasks.splice(index, 1)}}}</script>

Copy the code

When you delete a task, a dialog box is triggered

Pick a dialog in the Quasar plug-in and copy the code

<template>
	<! Set the background color to gray and fill the entire page -->
  <q-page class="bg-grey-3 column">
    <! -- Check box Task list -->
    <q-list 
      class="bg-white"
      separator
      bordered>
      <! -- Task item V-for loop -->
      <! -- @click adds a click event to the task item to change the task completion status -->
      <! - : class = "{' done bg - blue - 1: task. Done}" to the task item binding style -- -- >
      <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>
        <! -- Task name -->
          <q-item-label>{{task.title}}</q-item-label>
        </q-item-section>
        
       <q-item-section v-if="task.done" side>
       <! Delete button -->
        <! -- @click trigger delete task method -->
          <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 {
  // Task data source
  data() {
    return {
      newTask: ' '.tasks: [{title: 'learning'.done: true
         },
         {
           title: 'eat'.done: false
         },
         {
           title: 'sleep'.done: false}}},// deleteTask deleteTask method
  // When the delete button is clicked, the dialog box is triggered
  methods: {
    deleteTask(index) {
        this.$q.dialog({
        title: 'tip'.message: 'Are you sure to delete it? '.cancel: true.persistent: true
      }).onOk(() = > {
        // Click the confirm button in the dialog box to delete the task
        this.tasks.splice(index, 1)
        // After deletion, prompt
        this$q.n otify (''Task deleted'')})},}}</script>
Copy the code

Register dialog plugin

quasar.conf.js

Framework: {...// Quasar plugins
      plugins: ['Dialog'.'Notify']},Copy the code

3. Add tasks

Add the task input box. In the Quasar component library, find the appropriate input box and copy the code

<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>
Copy the code

src/pages/Todo.vue

Paste the copy of the input box code into the task list page and remove unwanted elements

<template>
	<! Set the background color to gray and fill the entire page -->
  <q-page class="bg-grey-3 column">
    <! -- New task, Task input box -->
    <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>
    <! -- Check box Task list -->
    <q-list 
      class="bg-white"
      separator
      bordered>
      <! -- Task item V-for loop -->
      <! -- @click adds a click event to the task item to change the task completion status -->
      <! - : class = "{' done bg - blue - 1: task. Done}" to the task item binding style -- -- >
      <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>
            <! -- Task name -->
            <q-item-label>{{task.title}}</q-item-label>
            </q-item-section>

               <! Delete button -->
               <! -- v-if add a judgment -->
	       <q-item-section v-if="task.done" side>
                 <! -- @click trigger delete task method -->
                  <q-btn
                    @click.stop="deleteTask(index)"
                    flat
                    round
                    dense
                    color="primary"
                    icon="delete" />
               </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>
Copy the code

Adjust the input box style, width calss= “col”, background color bG-color =”white”

<! -- New task -->
    <div class="row q-pa-sm bg-primary">
      <! -- Input box component, input box properties square,filled-->
      <! -- class='col' -->
      <q-input
        v-model="text"
        class="col"
        filled
        square
        bg-color="white"
        placeholder="Input task"
        dense>
        <template v-slot:append>
          <! -- How to trigger a new task -->
          <q-btn
            round
            dense
            flat
            icon="add" />
        </template>
      </q-input>
    </div>
Copy the code

The effect is as follows:

Bind data sources to create new tasks

html

<template>
  <q-page class="bg-grey-3 column">
    <! -- New task -->
    <div class="row q-pa-sm bg-primary">
      <! -- Input box component, input box properties square,filled-->
      <! -- class='col' -->
      <! -- Bind data source v-model= "newTask" -->
      <! -- Set the method to trigger a new task when you press Enter
      <q-input
        v-model="newTask"
        @keyup.enter="addTask"
        class="col"
        filled
        square
        bg-color="white"
        placeholder="Input task"
        dense>
        <template v-slot:append>
          <! -- Click the + icon to trigger the method addTask-->
          <q-btn
            @click="addTask"
            round
            dense
            flat
            icon="add" />
        </template>
      </q-input>
    </div>.</q-page>
</template>
Copy the code

js

export default {
  // Task data source
  data() {
    return {
      newTask: ' '.tasks: [
        / / {
        // title: 'learn ',
        // done: true
        // },
        / / {
        //   title: '吃饭',
        // done: false
        // },
        / / {
        // title: 'sleep ',
        // done: false
        // }]}},// deleteTask deleteTask method
  // Plug-in: dialog box, notify box
  methods: {
    deleteTask(index) {
      this.$q.dialog({
        title: 'tip'.message: 'Are you sure to delete it? '.cancel: true.persistent: true
      }).onOk(() = > {
        // console.log('>>>> OK')
        this.tasks.splice(index, 1)
        this.$q.notify('Task deleted')})},// The method to add tasks
    addTask() {
      this.tasks.push({
        title: this.newTask,
        done: false
      })
      // Empty the input field
      this.newTask = ' '}}}Copy the code

4. Interface when the task list is empty

html

The No Tasks window is displayed only when the task list is empty

<template>
  <q-page class="bg-grey-3 column">
    <! -- New task -->
    <div class="row q-pa-sm bg-primary">.</div>

    <! -- Task list -->
    <q-list
      class="bg-white"
      separator
      bordered>.</q-list>
    <! Display style when task list is empty -->
    <! -- v-if="! Tasks. length Task list is empty "-->
    <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>
Copy the code

CSS styles

Set the opacity to 0.5

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

</style>
Copy the code

5. Complete code of todo.vue interface

<template>
  <q-page class="bg-grey-3 column">
    <! -- New task -->
    <div class="row q-pa-sm bg-primary">
      <! -- Input box component, input box properties square,filled-->
      <! -- class='col' -->
      <q-input
        v-model="newTask"
        @keyup.enter="addTask"
        class="col"
        filled
        square
        bg-color="white"
        placeholder="Input task"
        dense>
        <template v-slot:append>
          <! -- How to trigger a new task -->
          <q-btn
            @click="addTask"
            round
            dense
            flat
            icon="add" />
        </template>
      </q-input>
    </div>

    <! Check the use of separator -->
    <q-list
      class="bg-white"
      separator
      bordered>
      <! -- for loop data source -->
      <! -- Clickable property -->
      <! Bind a done style depending on whether the task is clicked.
      <! -- Bg-blue-1 added a background color -->
      <! -- index 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>
        <! -- Check box -->
        <q-item-section avatar>
          <! -- class="no-pointer-events "-->
          <q-checkbox
            v-model="task.done"
            class="no-pointer-events"
            color="primary" />
        </q-item-section>
        <! -- Task name -->
        <q-item-section>
          <q-item-label>{{ task.title }}</q-item-label>
        </q-item-section>
        <! Delete button -->
        <q-item-section
          v-if='task.done'
          side>
          <! -- notice @click.stop -->
          <q-btn
            @click.stop="deleteTask(index)"
            flat
            round
            dense
            color="primary"
            icon="delete" />
        </q-item-section>
      </q-item>
    </q-list>
    <! Display style when task list is empty -->
    <! -- v-if="! Tasks. length Task list is empty "-->
    <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 {
  // Task data source
  data() {
    return {
      newTask: ' '.tasks: [
        / / {
        // title: 'learn ',
        // done: true
        // },
        / / {
        //   title: '吃饭',
        // done: false
        // },
        / / {
        // title: 'sleep ',
        // done: false
        // }]}},// deleteTask deleteTask method
  // Plug-in: dialog box, notify box
  methods: {
    deleteTask(index) {
      this.$q.dialog({
        title: 'tip'.message: 'Are you sure to delete it? '.cancel: true.persistent: true
      }).onOk(() = > {
        // console.log('>>>> OK')
        this.tasks.splice(index, 1)
        this.$q.notify('Task deleted')})},// The method to add tasks
    addTask() {
      this.tasks.push({
        title: this.newTask,
        done: false
      })
      // Empty the input field
      this.newTask = ' '}}}</script>

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

</style>
Copy the code