修改了vue3 <script setup>留言板

Лунная ночь

<template>
  <button class="edit_view_checkbox">
    <input type="checkbox" v-model="editshowInput" value="编辑" />
  </button>
  <div class="editshowInput" v-if="editshowInput">
    <div class="textarea_addItem">
      <textarea placeholder="请输入备注内容" v-model="newItem"></textarea>
      <button @click="addItem">添加</button>
    </div>
    <button class="">完成 <input type="checkbox" v-model="finishshowInput" value="完成" /></button>
  </div>
  <div class="text">
    <div v-for="(item, index) in items" :key="index" :class="{ finish: item.finish }">
      <button @click="toggleFinish(index)" v-if="finishshowInput">
        {{ item.finish ? '取消' : '完成' }}
      </button>
      <button @click="edit(index)" v-if="finishshowInput">修改</button>
      <span v-show="oindex == index ? true : false" class="textarea_alter">
        <textarea v-model="newItem"></textarea>
        <button @click="csu">提交</button>
      </span>
      <span class="content_text">
        <button class="IndexNumber">{{ index + 1 }}</button>
        {{ item.name }}
        {{ item.finish ? '(已完成)' : '' }}
        <button @click="removeItem(index)" v-if="finishshowInput" class="del_btn">删除</button>
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const editshowInput = ref(false)
const finishshowInput = ref(false)

const newItem = ref('')
const items = ref([])
const oindex = ref(-1)

const addItem = () => {
  items.value.push({ name: newItem.value, finish: false })
  saveTodo()
  newItem.value = ''
}
const removeItem = (index) => {
    if (confirm('确定要删除所选?')) {
      items.value.splice(index, 1)
      saveTodo()
    }
  }
const edit = (index) => {
  if (newItem.value === '' || false) {
    newItem.value = items.value[index].name

    oindex.value = index
  } else {
    newItem.value = ''
    oindex.value = -1
  }
}
const csu = () => {
  if (oindex.value === -1) {
    return
  }
  items.value[oindex.value].name = newItem.value
  oindex.value = -1
  newItem.value = ''
  saveTodo()
}

const toggleFinish = (index) => {
  items.value[index].finish = !items.value[index].finish
  saveTodo()
}

const saveTodo = () => {
  try {
    localStorage.setItem('jottings', JSON.stringify(items.value))
  } catch (error) {
    console.error('Failed to save todo items to localStorage:', error)
    // 可以添加适当的错误处理逻辑,比如向用户显示错误信息
  }
}

const loadTodo = () => {
  try {
    const savedItems = JSON.parse(localStorage.getItem('jottings'))
    if (savedItems) {
      items.value = savedItems
    }
  } catch (error) {
    console.error('Failed to load todo items from localStorage:', error)
    // 可以添加适当的错误处理逻辑,比如向用户显示错误信息
  }
}

onMounted(() => {
  loadTodo()
})
</script>

<style scoped>
.edit_view_checkbox {
  position: absolute;
  transform: translate(-130px, 110px);
  margin: 0px 10px;
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  z-index: 1;
  background-color: #14475693;
  box-shadow:
    inset 4px 4px 4px rgba(255, 255, 255, 0.6),
    inset -4px -4px 5px rgba(0, 0, 0, 0.6);
  border: 0px solid black;
 
  & :active {
    box-shadow:
      inset -2px -2px 3px rgba(255, 255, 255, 0.6),
      inset 2px 2px 3px rgba(0, 0, 0, 0.6);
  }
  input::after {
    content: '编辑';
    width: 100%;
    height: 100%;
    /* border: 2px solid #e9f504; */
    position: absolute;
    left: -3px;
    top: 12px;
    border-radius: 50%;
    font-size: 50px;
    color: #e9f504;
  }
  input:checked::after {

height: 20%;
width: 40px;
border-top: none;
border-right: none;
border-radius: 0;
transform: rotate(-45deg);
transition: all 0.5s ease-in-out;
/* 行高 */
line-height: 50px;
}
}

.editshowInput {
  display: flex;
  gap: 10px;
  .textarea_addItem {
    display: flex;
  }
}
.text {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;

  .textarea_alter {
    display: flex;
  }
  .content_text {
    /* color: hsla(160, 100%, 37%, 1); */
    color: rgb(255, 255, 255);

    text-shadow: 1px 1px 1px #000;

    .IndexNumber {
      font-size: 25px;
    }
    .del_btn {
      margin-right: 30px;
    }
  }
}
.finish {
  text-decoration: line-through;
  box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.916);
  background-color: rgb(191, 210, 255);
  color: #ffffff;
  border-radius: 50px;
  text-shadow: 1px 1px 1px #030303;
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
</style>

图片背景:

body {
  // 设置背景图片
  // background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg);
  background: url('../assets/img/10.jpg') no-repeat center center fixed;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  /* background-position: center 70px;  垂直方向向下偏移80像素 */
}

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3中,`<script setup>`是一个新的语法糖,它可以更简洁地编写组件的逻辑部分。通过`<script setup>`,你可以在组件中使用Composition API,而无需显式地导入和使用`import { ... } from 'vue'`。 下面是使用`<script setup>`的基本用法: 1. 首先,在Vue 3的单文件组件中,将`<script>`标签替换为`<script setup>`。 2. 在`<script setup>`中,你可以直接使用Composition API提供的函数和响应式变量,无需显式导入。例如,你可以直接使用`ref`、`reactive`、`computed`等函数。 3. 在`<script setup>`中,你可以使用`defineProps`和`defineEmits`来定义组件的属性和事件。这样可以更方便地声明和使用组件的属性和事件。 4. 在`<script setup>`中,你可以使用`onXXX`的方式来定义组件的生命周期钩子函数。例如,你可以使用`onMounted`、`onUpdated`等函数。 下面是一个简单的示例,展示了如何使用`<script setup>`: ```vue <template> <div> <p>{{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script setup> import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } </script> ``` 在上面的示例中,我们使用了`<script setup>`来定义了一个计数器组件。通过`ref`函数创建了一个响应式变量`count`,并定义了一个`increment`函数来增加计数器的值。在模板中,我们直接使用了`count`变量和`increment`函数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值