feat:增加添加书签功能

This commit is contained in:
CN32479-詹红柱 2021-08-14 16:18:44 +08:00
parent 1f216d9324
commit 2c5ba8a454
3 changed files with 124 additions and 4488 deletions

View File

@ -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: {

File diff suppressed because one or more lines are too long

View File

@ -1,16 +1,48 @@
<template>
<el-dialog title="提示" :visible="isDetailVisible" width="30%" :before-close="handleClose">
<span>这是一段信息</span>
<el-dialog custom-class="my-dialog" title="新增书签" :visible="isDetailVisible" width="758px">
<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 {
position: fixed;
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;
.my-dialog {
background: red;
}
.tel-cont {
width: 40%;
min-width: 600px;
min-height: 440px;
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;
}
}
.my-dialog /deep/.el-dialog__header {
border-bottom: 1px solid #eee !important;
}
.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;
.my-dialog /deep/.el-dialog__title {
font-size: 16px;
color: #e03b5d;
}
</style>