【无标题】记事本内容编写区

HTML

<div>
	<div>
		//标题
		<div>
			<input
      			type="text"
      			placeholder="标题..."
      			value="{{title}}"  //在data处定义title变量
      			maxlength="20"    //最多输入20 个字
      			onchange="getTitle"
    		/>
		</div>
		
		//内容
		<div>
			<textarea
      			placeholder="输入内容"
      			value="{{content}}"  //在data处定义content变量
      			onchange="getContent"
    		></textarea>
		</div>
		
		//标签
		<text>添加个标签吧~</text>
		<div>
			<text
        		class="{{label == '普通'?'common':''}}"  //在data处定义label变量，并写好默认值
        		onclick="changeLabel('普通')"
        	>普通</text>
      		<text
        		class="{{label == '重要'?'important':''}}"
        		onclick="changeLabel('重要')"
        	>重要</text>
      		<text
        		class="{{label == '待办'?' to-do':''}}"
        		onclick="changeLabel('待办')"
        	>待办</text>
		</div>
	</div>
	//完成按钮  opacity:颜色的透明度  当按钮canAdd可点击时透明度为1 否则为0.3  即30%
	<div>
		<text onclick="addMemo" style="opacity: {{canAdd ? '1' : '0.3'}};" >完成</text>
	</div>
</div>

JS

//引入文件
import { getMemoList, setMemoList } from '../../helper/data.js'
import router from '@system.router'
.......
data() {
    return {
      index: '',
      title: '',
      content: '',
      label: '普通'
    }
  },
.......
// 标题  οnchange="getTitle"
  getTitle(e) {      
    this.title = e.value
  },

// 内容   οnchange="getContent"
  getContent(e) {
    this.content = e.value
  },
//标签
    changeLabel(label) {
    this.label = label
  },
// 完成   οnclick="addMemo"
  computed: {
   canAdd() {
      if (this.title && this.content) {
        return true   //检测到有内容和标题时 “完成”按钮可点击 true  否则false
      } else {
        return false
      }
    }
  },
  .........
//异步操作
  async addMemo() {
    if (this.title && this.content) {
    
      const memoAdd= {
        title: this.title,
        content: this.content,
        label: this.label,
        timestamp: +new Date(),
        is_top:false,
      }
      
      const memoList = await getMemoList()
      if (this.index !== '') {
        memoList[this.index] = memoAdd
      } else {
        memoList.push(memoAdd)
      }
      
      setMemoList(memoList)
      router.back()
      
    }
  },