vlambda博客
学习文章列表

"dependencies": {
  "vue": "^2.6.11"
}

"devDependencies": {
  "svelte": "^3.0.0"
}

npx degit sveltejs/template svelte-app

npm install

npm run dev

<script>
 // 编写网页交互行为
</script>

<div>
 <!-- 编写页面内容结构 -->
</div>

<style>
 /* 编写 CSS 样式 */
</style>

<script>
  // 定义变量
  export let title; // 标题
  export let content; // 内容
  export let creationTime; // 创建日期
  export let index = 0; // 卡片序号

  // 删除卡片
  function doDelete() { }
</script>

<div class={`card bg-color-${index % 5}`}>
  <div class="title">
    {title} <span class="del-btn" on:click={doDelete}>x</span>
  </div>
  <div class="content">{content}</div>
  <div class="creationTime">{creationTime}</div>
</div>

<style>
  .card {
    padding: 1rem;
    margin: 1rem;
    color: #fff;
    border-radius: 0.5rem;
  }

  /* 省略... */

  /* 当鼠标移到卡片上，展示删除按钮 */
  .card:hover .del-btn {
    opacity: 1;
  }
</style>

<script>
  // 在 src 目录下新建 utils 工具类，编写获取当前日期的函数
  import {getNowDateFormat} from "./utils";

  // 定义变量
  let title = ''; // 标题
  let content = ''; // 内容

  // 添加卡片
  function doAdd() { }

  // 导出笔记
  function doExport() { }
</script>

<div class="add-card">
  <div class="input-wrapper">
    <input class="input-title" type="text" placeholder="输入标题" bind:value={title} />
    <textarea class="input-content" placeholder="输入内容" bind:value={content}></textarea>
  </div>
  <button class="add-btn" on:click={doAdd}>添加</button>
  <button class="export-btn" on:click={doExport}>导出</button>
</div>

<style>
  /* 操作面板固定在页面底部 */
  .add-card {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem;
    background-image: linear-gradient(135deg, #FEC163 10%, #DE4313 100%);
    display: flex;
  }

  .input-wrapper {
    flex: 4; /* 使用 Flex 布局 */
  }

  /* 省略... */

  .add-btn, .export-btn {
    flex: 1;
    margin-left: 1rem;
    color: #666;
  }
</style>

<script>
  import Card from "./Card.svelte";
  import AddCard from "./AddCard.svelte";
</script>

<div id="app">
  {#each $cards as card, i}
    <Card {...card} index={i}/>
  {/each}
  <AddCard/>
</div>

import {writable} from "svelte/store";

export const cards = writable([]);

<script>
  import {cards} from './store'; // 引入 cards
  import Card from "./Card.svelte";
  import AddCard from "./AddCard.svelte";
</script>

<div id="app">
  {#each $cards as card, i}
    <Card {...card} index={i}/>
  {/each}
  <AddCard/>
</div>

<script>
  // 引入状态
  import {cards} from './store';
  import {getNowDateFormat} from "./utils";

  let title = '';
  let content = '';

  function doAdd() {
    // 校验
    if (!title || !content) {
      alert('标题和内容必须都填！');
      return;
    }

    // 更新卡片状态，追加一个新卡片
    cards.update(item => {
      item = [...item, {
        title,
        content,
        creationTime: getNowDateFormat()
      }];
      return item;
    })
  }
</script>

<script>
  import {cards} from "./store";

  // 删除卡片
  function doDelete() {
    cards.update(item => {
      item.splice(index, 1);
      return item;
    })
  }
</script>