blog的前端代码
view | history | commit | commitdiff
inleft
2022-01-14 56a4b88b16b5f86a2a697018a3e2546d3abf73e3
commit | author | age
ad2b70 1 <template>
56a4b8 2     <div class="layui-row">
ad2b70 3         <a-row type="flex" justify="start">
L 4             <a-col v-bind="showSmall">
56a4b8 5                 <router-link to="/main1">Home »</router-link>
ad2b70 6             </a-col>
L 7             <a-col v-bind="showSmall">
56a4b8 8                 <router-link to="/main2">乐谱搜索 »</router-link>
ad2b70 9             </a-col>
L 10             <a-col v-bind="showSmall">
56a4b8 11                 <router-link to="/main3">动漫搜索 »</router-link>
I 12             </a-col>
13             <a-col v-bind="showMain">
14                 <router-link to="/tagInfo">关于我 »</router-link>
ad2b70 15             </a-col>
L 16             <a-col v-bind="showMain">
17                 <a-auto-complete v-bind="search" @select="onSelect" @search="onSearch" @change="onChange">
18                     <a-input>
19                         <a-icon slot="suffix" type="search" class="certain-category-icon" />
20                     </a-input>
21                 </a-auto-complete>
22             </a-col>
56a4b8 23             
ad2b70 24         </a-row>
56a4b8 25
I 26         <!--     <ul class="layui-nav ">
27                 <li class="layui-nav-item blog-displayIn-minScreen">
28                     <i class="layui-icon layui-icon-spread-left">Home</i>
29                 </li>
30                 <li class="layui-nav-item blog-displayIn-BidScreen">
31                     <legend> Home</legend>
32                 </li>
33                 <li class="layui-nav-item">
34                     <a href="javascript:;">文章<span class="layui-nav-more"></span></a>
35                     <dl class="layui-nav-child layui-anim layui-anim-upbit">
36                         <dd><a href="#">按时间线</a></dd>
37                         <dd><a href="#">按Tag</a></dd>
38                         <dd><a href="#">按热度</a></dd>
39                     </dl>
40                 </li>
41                 <li class="layui-nav-item"><a href="#">曲谱/曲库</a></li>
42                 <li class="layui-nav-item">
43                     <a href="javascript:;">动漫<span class="layui-nav-more"></span></a>
44                     <dl class="layui-nav-child layui-anim layui-anim-upbit">
45                         <dd><a href="#">番</a></dd>
46                         <dd><a href="#">电影</a></dd>
47                         <dd><a href="#">声优</a></dd>
48                     </dl>
49                 </li>
50                 <li class="layui-nav-item blog-displayIn-BidScreen"><a href="#">第九艺术</a></li>
51             </ul>
52             <ul class="layui-nav layui-layout-right">
53                 <li class="layui-nav-item blog-displayIn-BidScreen">
54                     <input type="text" placeholder="搜索一下" value="" class="layui-input">
55                 </li>
56                 <li class="layui-nav-item">
57                     <a href="javascript:;">
58                         <img src="http://t.inleft.com/share/media_photo/xigong.png" class="layui-nav-img">
59                         inleft
60                     </a>
61                     <dl class="layui-nav-child">
62                         <dd><a href="#">About</a></dd>
63                         <dd><a href="#">时间轴</a></dd>
64                     </dl>
65                 </li>
66             </ul> -->
ad2b70 67     </div>
L 68
69 </template>
70
71 <script>
72     export default {
73
74         data() {
75             return {
76                 search: {
77                     placeholder: "全局搜索..",
78                     allowClear: true,
79                     // autoFocus: true,
80                     backfill: true,
81                     dataSource: [],
82                 },
83                 showSmall: {
84                     xs: 6,
85                     sm: 6,
86                     md: 6,
87                     lg: 6,
88                     xl: 6,
89                     xxl: 6,
90                 },
91                 showMain: {
92                     xs: 0,
93                     sm: 0,
94                     md: 2,
95                     lg: 2,
96                     xl: 2,
97                     xxl: 2,
98                 }
99             }
100
101         },
102         watch: {
103             value(val) {
104                 console.log('值:', val);
105             },
106         },
107         methods: {
108             onSearch(searchText) {
109                 this.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)];
110                 console.log("补全..");
111             },
112             onSelect(value) {
113                 console.log('回车', value);
114             },
115             onChange(value) {
116                 console.log('修改', value);
117             },
118             keyListener(value) {
119                 console.log('ref', this.$refs.mySearch);
120                 console.log('键盘', value);
121             },
122         },
123     }
124 </script>
125
126 </script>
127
128 <style lang="less">
129
130 </style>