调整“仅显示”链接的交互逻辑
This commit is contained in:
@@ -48,7 +48,8 @@
|
|||||||
<!-- 输入 -->
|
<!-- 输入 -->
|
||||||
<input
|
<input
|
||||||
v-model="searchEngine.keyword"
|
v-model="searchEngine.keyword"
|
||||||
class="input" type="text"
|
class="input"
|
||||||
|
type="text"
|
||||||
@blur="searchEngine.isFocus = false"
|
@blur="searchEngine.isFocus = false"
|
||||||
@focus="searchEngine.isFocus = true"
|
@focus="searchEngine.isFocus = true"
|
||||||
@keydown.enter.exact="searchEngineSubmit()"
|
@keydown.enter.exact="searchEngineSubmit()"
|
||||||
@@ -77,15 +78,21 @@
|
|||||||
:class="['search-type', { fade: searchEngine.isFocus }]"
|
:class="['search-type', { fade: searchEngine.isFocus }]"
|
||||||
>
|
>
|
||||||
<!-- 分类 -->
|
<!-- 分类 -->
|
||||||
<div v-for="(category, cIndex) in searchEngine.list" :key="cIndex" class="category">
|
<div
|
||||||
|
v-for="(category, cIndex) in searchEngine.list"
|
||||||
|
:key="cIndex"
|
||||||
|
class="category"
|
||||||
|
>
|
||||||
|
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<div class="title">{{ category.title }}</div>
|
<div class="title">{{ category.title }}</div>
|
||||||
|
|
||||||
<!-- 项 -->
|
<!-- 项 -->
|
||||||
<el-radio
|
<el-radio
|
||||||
v-for="item in category.list" :key="item.name"
|
v-for="item in category.list"
|
||||||
:label="item.name" class="shadow-2"
|
:key="item.name"
|
||||||
|
:label="item.name"
|
||||||
|
class="shadow-2"
|
||||||
>
|
>
|
||||||
<Icon :path="item.icon || 'website/default.svg'" size="1.2em" />
|
<Icon :path="item.icon || 'website/default.svg'" size="1.2em" />
|
||||||
<i class="name">{{ item.name }}</i>
|
<i class="name">{{ item.name }}</i>
|
||||||
@@ -99,8 +106,11 @@
|
|||||||
|
|
||||||
<!-- 链接搜索框 -->
|
<!-- 链接搜索框 -->
|
||||||
<el-input
|
<el-input
|
||||||
v-show="show.searchLink" v-model="searchLink.keyword"
|
v-show="show.searchLink"
|
||||||
class="link-search shadow-2" placeholder="搜索链接" clearable
|
v-model="searchLink.keyword"
|
||||||
|
class="link-search shadow-2"
|
||||||
|
placeholder="搜索链接"
|
||||||
|
clearable
|
||||||
>
|
>
|
||||||
<el-select slot="prepend" v-model="searchLink.type" placeholder="类型">
|
<el-select slot="prepend" v-model="searchLink.type" placeholder="类型">
|
||||||
<el-option label="全部" value="all"></el-option>
|
<el-option label="全部" value="all"></el-option>
|
||||||
@@ -111,13 +121,21 @@
|
|||||||
|
|
||||||
<!-- 链接列表树 -->
|
<!-- 链接列表树 -->
|
||||||
<el-tree
|
<el-tree
|
||||||
v-show="show.linkTree" ref="linkTree" class="link-tree shadow-2"
|
v-show="show.linkTree"
|
||||||
:data="currentLinks" node-key="id" empty-text=""
|
ref="linkTree"
|
||||||
:props="{ label: 'title', children: 'sub' }" :filter-node-method="searchLinkSubmit"
|
class="link-tree shadow-2"
|
||||||
:default-expand-all="false" :expand-on-click-node="true"
|
:data="currentLinks"
|
||||||
|
node-key="id"
|
||||||
|
empty-text=""
|
||||||
|
:props="{ label: 'title', children: 'sub' }"
|
||||||
|
:filter-node-method="searchLinkSubmit"
|
||||||
|
:default-expand-all="false"
|
||||||
|
:expand-on-click-node="true"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
slot-scope="{ node, data }" class="link-item" :title="data.update"
|
slot-scope="{ node, data }"
|
||||||
|
class="link-item"
|
||||||
|
:title="data.update"
|
||||||
@click="openLink(data.link, data.showOnly)"
|
@click="openLink(data.link, data.showOnly)"
|
||||||
@contextmenu.prevent="openDetail(data)"
|
@contextmenu.prevent="openDetail(data)"
|
||||||
>
|
>
|
||||||
@@ -148,7 +166,17 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="label">链接:</div>
|
<div class="label">链接:</div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<el-link type="primary" :href="linkDetail.link" target="_blank">{{ linkDetail.link }}</el-link>
|
<el-link
|
||||||
|
v-show="!linkDetail.linkCopy"
|
||||||
|
type="primary"
|
||||||
|
:href="linkDetail.link"
|
||||||
|
target="_blank"
|
||||||
|
>{{ linkDetail.link }}</el-link>
|
||||||
|
<input
|
||||||
|
v-show="linkDetail.linkCopy"
|
||||||
|
type="text"
|
||||||
|
:value="linkDetail.link"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@@ -207,6 +235,7 @@ export default {
|
|||||||
id: '',
|
id: '',
|
||||||
title: '',
|
title: '',
|
||||||
link: '',
|
link: '',
|
||||||
|
linkCopy: false,
|
||||||
update: ''
|
update: ''
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -260,7 +289,7 @@ export default {
|
|||||||
* @param {object} datas 当前链接的数据
|
* @param {object} datas 当前链接的数据
|
||||||
*/
|
*/
|
||||||
openDetail(datas) {
|
openDetail(datas) {
|
||||||
// 非链接
|
// 非链接 / 仅显示
|
||||||
if (datas.link === undefined) {
|
if (datas.link === undefined) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -270,6 +299,7 @@ export default {
|
|||||||
detail.id = datas.id;
|
detail.id = datas.id;
|
||||||
detail.title = datas.title;
|
detail.title = datas.title;
|
||||||
detail.link = datas.link;
|
detail.link = datas.link;
|
||||||
|
detail.linkCopy = datas.showOnly || false;
|
||||||
detail.update = datas.update || '无';
|
detail.update = datas.update || '无';
|
||||||
detail.show = true;
|
detail.show = true;
|
||||||
},
|
},
|
||||||
@@ -286,7 +316,11 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (showOnly) {
|
if (showOnly) {
|
||||||
window.prompt('请复制后手动在新标签页中打开', link);
|
this.$message({
|
||||||
|
duration: 5000,
|
||||||
|
message: '请在链接详情中复制后手动打开',
|
||||||
|
type: 'warning'
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
window.open(link, '_blank');
|
window.open(link, '_blank');
|
||||||
}
|
}
|
||||||
@@ -362,7 +396,6 @@ export default {
|
|||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.home-aside {
|
.home-aside {
|
||||||
// width: 18rem !important;
|
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
||||||
@@ -401,7 +434,7 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 40rem;
|
max-width: 40rem;
|
||||||
height: 2.8rem;
|
height: 2.8rem;
|
||||||
border-radius: .25rem;
|
border-radius: 0.25rem;
|
||||||
background-color: #FFF;
|
background-color: #FFF;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
@@ -427,7 +460,7 @@ export default {
|
|||||||
|
|
||||||
.btn-clear {
|
.btn-clear {
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
opacity: .5;
|
opacity: 0.5;
|
||||||
transition: opacity @transitionTime;
|
transition: opacity @transitionTime;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@@ -453,22 +486,22 @@ export default {
|
|||||||
transition: opacity calc(@transitionTime * 4);
|
transition: opacity calc(@transitionTime * 4);
|
||||||
|
|
||||||
&.fade {
|
&.fade {
|
||||||
opacity: .5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .category {
|
/deep/ .category {
|
||||||
padding: .5rem 0;
|
padding: 0.5rem 0;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
margin: .5rem 0;
|
margin: 0.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-radio {
|
.el-radio {
|
||||||
margin: .5rem;
|
margin: 0.5rem;
|
||||||
padding: .8rem 1rem;
|
padding: 0.8rem 1rem;
|
||||||
width: 15rem;
|
width: 15rem;
|
||||||
border-radius: .25rem;
|
border-radius: 0.25rem;
|
||||||
border-left: solid .2rem transparent;
|
border-left: solid 0.2rem transparent;
|
||||||
background-color: #FFF;
|
background-color: #FFF;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
@@ -497,13 +530,13 @@ export default {
|
|||||||
|
|
||||||
i {
|
i {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: .125rem 0;
|
padding: 0.125rem 0;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fn-icon {
|
.fn-icon {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-right: .4rem;
|
margin-right: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
@@ -512,8 +545,8 @@ export default {
|
|||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
margin-left: .5rem;
|
margin-left: 0.5rem;
|
||||||
font-size: .8rem;
|
font-size: 0.8rem;
|
||||||
color: #CCC;
|
color: #CCC;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -528,11 +561,12 @@ export default {
|
|||||||
z-index: 100;
|
z-index: 100;
|
||||||
top: 0;
|
top: 0;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
border-radius: .25rem;
|
border-radius: 0.25rem;
|
||||||
line-height: @height;
|
line-height: @height;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
> div, > input {
|
> div,
|
||||||
|
> input {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -543,7 +577,7 @@ export default {
|
|||||||
width: 4.5rem;
|
width: 4.5rem;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
padding: 0 .75rem;
|
padding: 0 0.75rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -555,8 +589,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.link-tree {
|
.link-tree {
|
||||||
padding: .5rem;
|
padding: 0.5rem;
|
||||||
border-radius: .25rem;
|
border-radius: 0.25rem;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
/deep/ .el-tree-node__content {
|
/deep/ .el-tree-node__content {
|
||||||
@@ -578,8 +612,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
margin-top: .2rem;
|
margin-top: 0.2rem;
|
||||||
opacity: .5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -603,5 +637,16 @@ export default {
|
|||||||
.text {
|
.text {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type="text"] {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
line-height: 1em;
|
||||||
|
font-size: inherit;
|
||||||
|
color: @colorSecondary;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Reference in New Issue
Block a user