需求实战一

组件来源

• ant-design-vue
• Button 按钮
• Progress 进度条

效果展示

代码展示

<template>
    <ARow>
        <ACol>
            <div style="padding:30px">    <a-progress type="circle" :percent="number" />
            </div>
            <div style="padding:30px 0 30px 50px">    <a-button type="primary" @click="addNumber">增加数值</a-button>
            </div>
                <div style="padding:30px 0 30px 50px">
                <a-button type="primary" @click="minNumber">增加数值</a-button>
                </div>
        </ACol>
    </ARow>
</template>
<script setup lang="ts">
const number=ref(80);
const addNumber = () => {
number.value=number.value+10;
};
const minNumber = () => {
number.value=number.value-10;
};
</script>

代码解读

需求实战二

组件来源

• ant-design-vue
• Button 按钮
• Progress 进度条
• Slider 滑动输入条
• Space 间距

效果展示

代码展示

<template>
    <ARow style="display: flex; justify-content: center; align-items: center; ">
    <ACol >
            <div style="display: flex; justify-content: center; align-items: center; padding: 30px 0;">
                    <a-progress type="circle" :percent="number" />
                </div>
            <div style="display: flex; justify-content: center; align-items: center; padding: 30px 0;">
                <div style="padding:0 10px 0 0">
                <a-button type="primary" @click="addNumber">增加百分之十</a-button>
                </div>
                <div style="padding:0 0 0 10px">
                <a-button type="primary" @click="minNumber">减少百分之十</a-button>
                </div>
            </div>
            <div style="padding: 30px 0;">
                    <a-slider id="test" v-model:value="number" :disabled="disabled" />
                </div>
            <div style="display: flex; justify-content: center; align-items: center; padding: 30px 0;">
            <a-space :size="number">
                <a-button type="primary">Button</a-button>
                <a-button type="primary">Button</a-button>
                <a-button type="primary">Button</a-button>
                <a-button type="primary">Button</a-button>
            </a-space>
            </div>
        </ACol>
    </ARow>
</template>
<script setup lang="ts">
const number=ref(80);
const disabled=ref(false);
const addNumber = () => {
number.value=number.value+10;
};
const minNumber = () => {
number.value=number.value-10;
};
</script>

代码解读

需求实战三

组件来源

• JS代码

效果展示

代码展示

<template>
    <div>
        <h1>To Do List</h1>
        <input v-model="newTodo" placeholder="Add a new todo" />
        
        <button @click="addTodo">Add</button>
        <ul>
            <li style="padding:5px" v-for="(todo, index) in todos" :key="index">
                {{ todo }}
                <button @click="deleteTodo(index)">Delete</button>
            </li>
        </ul>
    </div>
</template>
<script setup lang="ts">
const todos = ref<string[]>([]);
const newTodo = ref<string>('');
const addTodo = () => {
    if (newTodo.value !== '') {
        todos.value.push(newTodo.value);
        newTodo.value = '';
    }
};
const deleteTodo = (index: number) => {
    todos.value.splice(index, 1);
};
</script>

代码解读

需求实战四

组件来源

• ant-design-vue
• Button 按钮
• Input 输入框

代码解读

效果展示

代码展示

<template>
    <div>
        <h1>列表展示</h1>
        <input v-model="newTodo" placeholder="新增内容" />
        &nbsp&nbsp&nbsp
        <a-button type="primary" @click="addTodo">新增</a-button>
        <div style="padding:10px 0 0 0">
            <input v-model="searchQuery" placeholder="查询内容" />
            <ul>
            <li style="padding:5px 0 0 0; display: flex; align-items: center;" v-for="(todo, index) in filteredTodos" :key="index">
                {{"【"+(index+1)+"】"+ todo }}&nbsp&nbsp&nbsp
                <a-button type="primary" danger @click="deleteTodo(index)">删除</a-button>
                &nbsp&nbsp&nbsp
                <a-button type="primary" @click="editTodo(index)">编辑</a-button>
                <br>
                <br>
            </li>
        </ul>
        </div>
    </div>
</template>
<script setup lang="ts">
const todos = ref<string[]>([]);
const newTodo = ref<string>('');
const searchQuery = ref<string>('');
const addTodo = () => {
    if (newTodo.value !== '') {
        todos.value.push(newTodo.value);
        newTodo.value = '';
    }
};
const deleteTodo = (index: number) => {
    todos.value.splice(index, 1);
};
const editTodo = (index: number) => {
    const newContent = prompt("Enter new content:");
    if (newContent !== null) {
        todos.value[index] = newContent;
    }
};
const filteredTodos = computed(() => {
    return todos.value.filter(todo => {
        return todo.toLowerCase().includes(searchQuery.value.toLowerCase());
    });
});
</script>

代码解读