增加菜单跳转交互
parent
589f138941
commit
5f273fce15
|
|
@ -15,6 +15,7 @@ import '@ui/base/link.js'
|
|||
import '@ui/form/input.js'
|
||||
import '@ui/form/switch.js'
|
||||
import '@ui/modal/layer.js'
|
||||
import '@ui/views/tag.js'
|
||||
import '@ui/nav/pager.js'
|
||||
|
||||
import extIcons from '/lib/ext-icon.js'
|
||||
|
|
|
|||
|
|
@ -96,6 +96,8 @@ class Aside extends Component {
|
|||
|
||||
render() {
|
||||
let path = this.#path
|
||||
let list = this.$store.categories
|
||||
let paths = list.slice(4).map(it => it.path)
|
||||
|
||||
return html`
|
||||
<aside class="container">
|
||||
|
|
@ -108,7 +110,7 @@ class Aside extends Component {
|
|||
<wc-icon name="home"></wc-icon>
|
||||
<router-link>装机必备</router-link>
|
||||
</li>
|
||||
${this.$store.categories.slice(0, 3).map(
|
||||
${list.slice(1, 4).map(
|
||||
it => html`
|
||||
<li class="item ${path === it.path ? 'active' : ''}">
|
||||
<wc-icon name=${it.icon}></wc-icon>
|
||||
|
|
@ -116,9 +118,15 @@ class Aside extends Component {
|
|||
</li>
|
||||
`
|
||||
)}
|
||||
<li class="item ${path === '/cate/all' ? 'active' : ''}">
|
||||
<li
|
||||
class="item ${path === list[0].path || paths.includes(path)
|
||||
? 'active'
|
||||
: ''}"
|
||||
>
|
||||
<wc-icon name="menu"></wc-icon>
|
||||
<router-link :to=${{ path: '/cate/all' }}>全部分类</router-link>
|
||||
<router-link :to=${{ path: list[0].path }}
|
||||
>${list[0].name}</router-link
|
||||
>
|
||||
</li>
|
||||
</menu>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import{css as o,html as r,Component as e}from"wkit";import"../base/icon.js";const c={type:"scale"};class a extends e{static props={closable:!1};static styles=[o`:host{display:inline-flex}.container{display:flex;align-items:center;width:auto;height:32px;padding:0 10px;gap:3px;font-size:var(--wc-tag-font, 12px);border:1px solid var(--wc-tag-border-color, var(--color-grey-1));border-radius:3px;background:var(--wc-tag-background, var(--color-plain-1));white-space:nowrap;-webkit-user-select:none;user-select:none}.close{padding:3px;display:inline-flex;--wc-icon-size: 8px;line-height:1;border-radius:50%;cursor:pointer}.close:hover{background:var(--color-grey-2);color:#fff}`,o`:host([size=s]) .container{height:20px;padding:0 6px}:host([size=m]) .container{height:24px;padding:0 8px}`,o`:host([type=primary]) .container{border-color:var(--color-teal-a);background:#ecf5ff;color:var(--color-teal-3)}:host([type=primary]) .close:hover{color:#fff;background:var(--color-teal-1)}:host([type=info]) .container{border-color:var(--color-blue-a);background:#ecf5ff;color:var(--color-blue-3)}:host([type=info]) .close:hover{color:#fff;background:var(--color-blue-1)}:host([type=success]) .container{border-color:var(--color-green-a);background:#f0f9eb;color:var(--color-green-3)}:host([type=success]) .close:hover{color:#fff;background:var(--color-green-1)}:host([type=warning]) .container{border-color:var(--color-orange-a);background:#fdf6ec;color:var(--color-orange-3)}:host([type=warning]) .close:hover{color:#fff;background:var(--color-orange-1)}:host([type=danger]) .container{border-color:var(--color-red-a);background:#fef0f0;color:var(--color-red-3)}:host([type=danger]) .close:hover{color:#fff;background:var(--color-red-1)}`];#o(){this.$refs.tag.$animate(!0).then(t=>this.remove()),this.$emit("close")}render(){return r`
|
||||
<main class="container" ref="tag" #animation=${c}>
|
||||
import{css as o,html as r,Component as e}from"wkit";import"../base/icon.js";const a={type:"scale"};class c extends e{static props={closable:!1};static styles=[o`:host{display:inline-flex}.container{display:flex;align-items:center;width:auto;height:var(--wc-tag-height, 32px);padding:var(--wc-tag-padding, 0 10px);gap:3px;font-size:var(--wc-tag-font, 12px);border:1px solid var(--wc-tag-border-color, var(--color-grey-1));border-radius:3px;background:var(--wc-tag-background, var(--color-plain-1));white-space:nowrap;-webkit-user-select:none;user-select:none}.close{padding:3px;display:inline-flex;--wc-icon-size: 8px;line-height:1;border-radius:50%;cursor:pointer}.close:hover{background:var(--color-grey-2);color:#fff}`,o`:host([size=small]) .container{height:24px;padding:0 8px}`,o`:host([type=primary]) .container{border-color:var(--color-teal-a);background:#ecf5ff;color:var(--color-teal-3)}:host([type=primary]) .close:hover{color:#fff;background:var(--color-teal-1)}:host([type=info]) .container{border-color:var(--color-blue-a);background:#ecf5ff;color:var(--color-blue-3)}:host([type=info]) .close:hover{color:#fff;background:var(--color-blue-1)}:host([type=success]) .container{border-color:var(--color-green-a);background:#f0f9eb;color:var(--color-green-3)}:host([type=success]) .close:hover{color:#fff;background:var(--color-green-1)}:host([type=warning]) .container{border-color:var(--color-orange-a);background:#fdf6ec;color:var(--color-orange-3)}:host([type=warning]) .close:hover{color:#fff;background:var(--color-orange-1)}:host([type=danger]) .container{border-color:var(--color-red-a);background:#fef0f0;color:var(--color-red-3)}:host([type=danger]) .close:hover{color:#fff;background:var(--color-red-1)}`];#o(){this.$refs.tag.$animate(!0).then(n=>this.remove()),this.$emit("close")}render(){return r`
|
||||
<main class="container" ref="tag" #animation=${a}>
|
||||
<slot></slot>
|
||||
${this.closable?r`<span class="close" @click=${this.#o}
|
||||
><wc-icon name="close"></wc-icon
|
||||
></span>`:""}
|
||||
</main>
|
||||
`}}a.reg("tag");
|
||||
`}}c.reg("tag");
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ export default createStore({
|
|||
powerAppShow: false,
|
||||
|
||||
categories: [
|
||||
{ name: '全部分类', icon: 'menu', path: '/cate/all' },
|
||||
{ name: '办公教育', icon: 'client', path: '/cate/work' },
|
||||
{ name: '游戏娱乐', icon: 'game', path: '/cate/game' },
|
||||
{ name: '编程软件', icon: 'code', path: '/cate/coding' },
|
||||
|
|
|
|||
|
|
@ -99,9 +99,24 @@ class Home extends Component {
|
|||
}
|
||||
}
|
||||
`,
|
||||
css``
|
||||
css`
|
||||
.category {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--color-plain-1);
|
||||
|
||||
wc-tag {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
`
|
||||
]
|
||||
|
||||
#path = '/'
|
||||
|
||||
#hide() {
|
||||
this.$store.storeAppShow = false
|
||||
}
|
||||
|
|
@ -111,22 +126,42 @@ class Home extends Component {
|
|||
watch('$store.storeAppShow', v => {
|
||||
this.$animate(!v)
|
||||
})
|
||||
watch('$router.path', r => {
|
||||
this.#path = r.path
|
||||
this.$requestUpdate()
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
let path = this.#path
|
||||
|
||||
return html`
|
||||
<main class="container">
|
||||
<wc-titlebar
|
||||
minimize
|
||||
maximize
|
||||
@close=${this.#hide}
|
||||
@minimize=${this.#hide}
|
||||
></wc-titlebar>
|
||||
<div class="body">
|
||||
<wc-aside class="sidebar"></wc-aside>
|
||||
|
||||
<div class="content">
|
||||
<div class="wrapper">
|
||||
<wc-slider></wc-slider>
|
||||
${path === '/'
|
||||
? html`<wc-slider></wc-slider>`
|
||||
: html`
|
||||
<menu class="category">
|
||||
${this.$store.categories.map(
|
||||
it =>
|
||||
html`<wc-tag
|
||||
size="small"
|
||||
type=${it.path === path ? 'info' : ''}
|
||||
@click=${ev => this.$router.push({ path: it.path })}
|
||||
>${it.name}</wc-tag
|
||||
> `
|
||||
)}
|
||||
</menu>
|
||||
`}
|
||||
|
||||
<wc-list :list=${range(10)}></wc-list>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue