feat:增加添加书签功能

src/App.vue

@@ -55,7 +55,7 @@
       </div>
     </div>
   </div>
-  <Dialog v-model="isDetailVisible" @closeViews="closeViews" />
+  <Dialog class="my-dialog" v-model="isDetailVisible" @closeViews="closeViews" :selectType="activeIndex" @fresh="search"/>
 </template>
 
 <script>
@@ -64,7 +64,19 @@ import { myData } from './assets/Json/印象笔记.js'
 import { watch } from '@vue/runtime-core'
 import Dialog from './components/Dialog.vue'
 import gsap from 'gsap'
-var rowData = myData
+var rowData = []
+function getData(fn = () => {}) {
+  // 数据持久化
+  if (localStorage.getItem('BOOKMARK')) {
+    console.log('持久化数据')
+    rowData = JSON.parse(localStorage.getItem('BOOKMARK'))
+  } else {
+    localStorage.setItem('BOOKMARK', JSON.stringify(myData))
+    rowData = myData
+  }
+  fn()
+}
+getData()
 export default {
   components: { Dialog },
   name: 'kestrel-bookmark',
@@ -72,10 +84,13 @@ export default {
     // 扁平化数组
     const flatten = (arr, result = []) => {
       for (const item of arr) {
-        Array.isArray(item.children) ? flatten(item.children, result) : result.push(item)
+        Array.isArray(item.children)
+          ? flatten(item.children, result)
+          : result.push(item)
       }
       return result
     }
+
     const data = reactive({
       activeIndex: 0,
       data: rowData,
@@ -95,25 +110,32 @@ export default {
         )
       }
     )
-    // 标签类别选择
+    // 书签类别选择
     const selectType = (item, index) => {
       data.bookMark = item.children
       data.activeIndex = index
     }
-    // 标签跳转
+    // 书签跳转
     const navigate = (v) => window.open(v.url, '_target')
 
-    // 新增
+    // 新增书签
     const add = () => (data.isDetailVisible = !data.isDetailVisible)
 
     // 关闭弹窗事件
     const closeViews = (v) => (data.isDetailVisible = v)
+    const search = async () => {
+      console.log('---->')
+      await getData(() => {
+        data.bookMark = rowData[data.activeIndex].children
+      })
+    }
     return {
       ...toRefs(data),
       selectType,
       navigate,
       add,
-      closeViews
+      closeViews,
+      search
     }
   },
   methods: {

src/components/Dialog.vue

@@ -1,16 +1,48 @@
 <template>
-  <el-dialog title="提示" :visible="isDetailVisible" width="30%" :before-close="handleClose">
+  <el-dialog custom-class="my-dialog" title="新增书签" :visible="isDetailVisible" width="758px">
-    <span>这是一段信息</span>
+    <el-form status-icon ref="refruleForm" :rules="rules" :model="ruleForm" label-width="100px" size="small">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="书签名称" prop="title">
+            <el-input v-model="ruleForm.title" placeholder="请输入书签名称"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="书签类别" prop="type">
+            <el-select v-model="ruleForm.type" placeholder="请选择书签类别" style="width:100%">
+              <el-option v-for="(item,index) in BOOKMARK" :value="item" :key="index"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="LOGO地址" prop="logo">
+            <el-input v-model="ruleForm.logo" placeholder="请输入LOGO地址"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="访问地址" prop="url">
+            <el-input v-model="ruleForm.url" placeholder="请输入访问绝对地址"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="书签描述" prop="desc">
+            <el-input type="textarea" clearable placeholder="请输入书签描述" v-model="ruleForm.desc" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="closeViews">取 消</el-button>
-        <el-button type="primary" @click="closeViews">确 定</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
       </span>
     </template>
   </el-dialog>
 </template>
 <script>
 import gsap from 'gsap'
+import { reactive, ref } from '@vue/reactivity'
+import { nextTick } from '@vue/runtime-core'
 export default {
   model: {
     value: 'isDetailVisible',
@@ -20,14 +52,65 @@ export default {
     isDetailVisible: {
       type: Boolean,
       default: false
+    },
+    selectType: {
+      type: Number,
+      default: 0
     }
   },
   setup(props, context) {
-    const closeViews = () => {
+    const isBOOKMARK = JSON.parse(localStorage.getItem('BOOKMARK'))
+    const BOOKMARK = isBOOKMARK ? isBOOKMARK.map((v) => v.type) : []
+    const ruleForm = reactive({
+      title: '',
+      type: '',
+      desc: '',
+      url: '',
+      logo: ''
+    })
+    // 定义校验规则 表单代码中必须以 :rules 接收
+    const rules = {
+      title: [{ required: true, message: '请输入书签名称', trigger: 'blur' }],
+      type: [{ required: true, message: '请选择书签类别', trigger: 'change' }]
+    }
+    const refruleForm = ref(null)
+    // 确定按钮的格式
+    console.log('--->', isBOOKMARK)
+    const submitForm = () => {
+      refruleForm.value.validate((valid) => {
+        if (valid) {
+          console.log(isBOOKMARK)
+          const myData = isBOOKMARK.map((v) => {
+            if (v.type === ruleForm.type) {
+              v.children.push({ ...ruleForm })
+            }
+            return v
+          })
+          console.log(myData)
+          localStorage.setItem('BOOKMARK', JSON.stringify(myData))
+          context.emit('fresh')
+          closeViews()
+        } else {
+          return false
+        }
+      })
+    }
+    function closeViews() {
+      refruleForm.value.resetFields()
       context.emit('closeViews', false)
     }
+    // 书签类别
+    nextTick(() => {
+      ruleForm.type = isBOOKMARK ? BOOKMARK[props.selectType] : ''
+    })
+
     return {
-      closeViews
+      ruleForm,
+      closeViews,
+      submitForm,
+      refruleForm,
+      rules,
+      BOOKMARK
     }
   },
   methods: {
@@ -56,65 +139,14 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.card-s {
+.my-dialog {
-  position: fixed;
+  background: red;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 2000;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  overflow: auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
-.tel-cont {
+.my-dialog /deep/.el-dialog__header {
-  width: 40%;
+  border-bottom: 1px solid #eee !important;
-  min-width: 600px;
+}
-  min-height: 440px;
+.my-dialog /deep/.el-dialog__title {
-  position: relative;
-  margin-top: 0px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-  box-sizing: border-box;
-  .el-dialog__header {
-    padding: 20px 20px 10px;
-    width: 100%;
-    border-bottom: 1px solid #eee;
-    .el-dialog__title {
-      line-height: 24px;
-      font-size: 18px;
-      color: #303133;
-    }
-    .el-dialog__headerbtn {
-      position: absolute;
-      top: 20px;
-      right: 20px;
-      padding: 0;
-      background: transparent;
-      border: none;
-      outline: none;
-      cursor: pointer;
   font-size: 16px;
-    }
+  color: #e03b5d;
-  }
-}
-.list-complete-item {
-  transition: all 0.8s ease;
-  display: inline-block;
-  margin-right: 10px;
-}
-
-.list-complete-enter-from,
-.list-complete-leave-to {
-  opacity: 0;
-  transform: translateY(30px);
-}
-
-.list-complete-leave-active {
-  position: absolute;
 }
 </style>