icon.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938
  1. <template>
  2. <view>
  3. <view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
  4. <view class="search-form round">
  5. <text class="cuIcon-search"></text>
  6. <input type="text" placeholder="搜索cuIcon" confirm-type="search" @input="searchIcon"></input>
  7. </view>
  8. </view>
  9. <view class="cu-list grid col-3">
  10. <view class="cu-item" v-for="(item,index) in cuIcon" :key="index" v-if="item.isShow">
  11. <text class="lg text-gray" :class="'cuIcon-' + item.name"></text>
  12. <text>{{item.name}}</text>
  13. </view>
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. data() {
  20. return {
  21. CustomBar: this.CustomBar,
  22. cuIcon: [{
  23. name: 'appreciate',
  24. isShow: true
  25. }, {
  26. name: 'check',
  27. isShow: true
  28. }, {
  29. name: 'close',
  30. isShow: true
  31. }, {
  32. name: 'edit',
  33. isShow: true
  34. }, {
  35. name: 'emoji',
  36. isShow: true
  37. }, {
  38. name: 'favorfill',
  39. isShow: true
  40. }, {
  41. name: 'favor',
  42. isShow: true
  43. }, {
  44. name: 'loading',
  45. isShow: true
  46. }, {
  47. name: 'locationfill',
  48. isShow: true
  49. }, {
  50. name: 'location',
  51. isShow: true
  52. }, {
  53. name: 'phone',
  54. isShow: true
  55. }, {
  56. name: 'roundcheckfill',
  57. isShow: true
  58. }, {
  59. name: 'roundcheck',
  60. isShow: true
  61. }, {
  62. name: 'roundclosefill',
  63. isShow: true
  64. }, {
  65. name: 'roundclose',
  66. isShow: true
  67. }, {
  68. name: 'roundrightfill',
  69. isShow: true
  70. }, {
  71. name: 'roundright',
  72. isShow: true
  73. }, {
  74. name: 'search',
  75. isShow: true
  76. }, {
  77. name: 'taxi',
  78. isShow: true
  79. }, {
  80. name: 'timefill',
  81. isShow: true
  82. }, {
  83. name: 'time',
  84. isShow: true
  85. }, {
  86. name: 'unfold',
  87. isShow: true
  88. }, {
  89. name: 'warnfill',
  90. isShow: true
  91. }, {
  92. name: 'warn',
  93. isShow: true
  94. }, {
  95. name: 'camerafill',
  96. isShow: true
  97. }, {
  98. name: 'camera',
  99. isShow: true
  100. }, {
  101. name: 'commentfill',
  102. isShow: true
  103. }, {
  104. name: 'comment',
  105. isShow: true
  106. }, {
  107. name: 'likefill',
  108. isShow: true
  109. }, {
  110. name: 'like',
  111. isShow: true
  112. }, {
  113. name: 'notificationfill',
  114. isShow: true
  115. }, {
  116. name: 'notification',
  117. isShow: true
  118. }, {
  119. name: 'order',
  120. isShow: true
  121. }, {
  122. name: 'samefill',
  123. isShow: true
  124. }, {
  125. name: 'same',
  126. isShow: true
  127. }, {
  128. name: 'deliver',
  129. isShow: true
  130. }, {
  131. name: 'evaluate',
  132. isShow: true
  133. }, {
  134. name: 'pay',
  135. isShow: true
  136. }, {
  137. name: 'send',
  138. isShow: true
  139. }, {
  140. name: 'shop',
  141. isShow: true
  142. }, {
  143. name: 'ticket',
  144. isShow: true
  145. }, {
  146. name: 'back',
  147. isShow: true
  148. }, {
  149. name: 'cascades',
  150. isShow: true
  151. }, {
  152. name: 'discover',
  153. isShow: true
  154. }, {
  155. name: 'list',
  156. isShow: true
  157. }, {
  158. name: 'more',
  159. isShow: true
  160. }, {
  161. name: 'scan',
  162. isShow: true
  163. }, {
  164. name: 'settings',
  165. isShow: true
  166. }, {
  167. name: 'questionfill',
  168. isShow: true
  169. }, {
  170. name: 'question',
  171. isShow: true
  172. }, {
  173. name: 'shopfill',
  174. isShow: true
  175. }, {
  176. name: 'form',
  177. isShow: true
  178. }, {
  179. name: 'pic',
  180. isShow: true
  181. }, {
  182. name: 'filter',
  183. isShow: true
  184. }, {
  185. name: 'footprint',
  186. isShow: true
  187. }, {
  188. name: 'top',
  189. isShow: true
  190. }, {
  191. name: 'pulldown',
  192. isShow: true
  193. }, {
  194. name: 'pullup',
  195. isShow: true
  196. }, {
  197. name: 'right',
  198. isShow: true
  199. }, {
  200. name: 'refresh',
  201. isShow: true
  202. }, {
  203. name: 'moreandroid',
  204. isShow: true
  205. }, {
  206. name: 'deletefill',
  207. isShow: true
  208. }, {
  209. name: 'refund',
  210. isShow: true
  211. }, {
  212. name: 'cart',
  213. isShow: true
  214. }, {
  215. name: 'qrcode',
  216. isShow: true
  217. }, {
  218. name: 'remind',
  219. isShow: true
  220. }, {
  221. name: 'delete',
  222. isShow: true
  223. }, {
  224. name: 'profile',
  225. isShow: true
  226. }, {
  227. name: 'home',
  228. isShow: true
  229. }, {
  230. name: 'cartfill',
  231. isShow: true
  232. }, {
  233. name: 'discoverfill',
  234. isShow: true
  235. }, {
  236. name: 'homefill',
  237. isShow: true
  238. }, {
  239. name: 'message',
  240. isShow: true
  241. }, {
  242. name: 'addressbook',
  243. isShow: true
  244. }, {
  245. name: 'link',
  246. isShow: true
  247. }, {
  248. name: 'lock',
  249. isShow: true
  250. }, {
  251. name: 'unlock',
  252. isShow: true
  253. }, {
  254. name: 'vip',
  255. isShow: true
  256. }, {
  257. name: 'weibo',
  258. isShow: true
  259. }, {
  260. name: 'activity',
  261. isShow: true
  262. }, {
  263. name: 'friendaddfill',
  264. isShow: true
  265. }, {
  266. name: 'friendadd',
  267. isShow: true
  268. }, {
  269. name: 'friendfamous',
  270. isShow: true
  271. }, {
  272. name: 'friend',
  273. isShow: true
  274. }, {
  275. name: 'goods',
  276. isShow: true
  277. }, {
  278. name: 'selection',
  279. isShow: true
  280. }, {
  281. name: 'explore',
  282. isShow: true
  283. }, {
  284. name: 'present',
  285. isShow: true
  286. }, {
  287. name: 'squarecheckfill',
  288. isShow: true
  289. }, {
  290. name: 'square',
  291. isShow: true
  292. }, {
  293. name: 'squarecheck',
  294. isShow: true
  295. }, {
  296. name: 'round',
  297. isShow: true
  298. }, {
  299. name: 'roundaddfill',
  300. isShow: true
  301. }, {
  302. name: 'roundadd',
  303. isShow: true
  304. }, {
  305. name: 'add',
  306. isShow: true
  307. }, {
  308. name: 'notificationforbidfill',
  309. isShow: true
  310. }, {
  311. name: 'explorefill',
  312. isShow: true
  313. }, {
  314. name: 'fold',
  315. isShow: true
  316. }, {
  317. name: 'game',
  318. isShow: true
  319. }, {
  320. name: 'redpacket',
  321. isShow: true
  322. }, {
  323. name: 'selectionfill',
  324. isShow: true
  325. }, {
  326. name: 'similar',
  327. isShow: true
  328. }, {
  329. name: 'appreciatefill',
  330. isShow: true
  331. }, {
  332. name: 'infofill',
  333. isShow: true
  334. }, {
  335. name: 'info',
  336. isShow: true
  337. }, {
  338. name: 'forwardfill',
  339. isShow: true
  340. }, {
  341. name: 'forward',
  342. isShow: true
  343. }, {
  344. name: 'rechargefill',
  345. isShow: true
  346. }, {
  347. name: 'recharge',
  348. isShow: true
  349. }, {
  350. name: 'vipcard',
  351. isShow: true
  352. }, {
  353. name: 'voice',
  354. isShow: true
  355. }, {
  356. name: 'voicefill',
  357. isShow: true
  358. }, {
  359. name: 'friendfavor',
  360. isShow: true
  361. }, {
  362. name: 'wifi',
  363. isShow: true
  364. }, {
  365. name: 'share',
  366. isShow: true
  367. }, {
  368. name: 'wefill',
  369. isShow: true
  370. }, {
  371. name: 'we',
  372. isShow: true
  373. }, {
  374. name: 'lightauto',
  375. isShow: true
  376. }, {
  377. name: 'lightforbid',
  378. isShow: true
  379. }, {
  380. name: 'lightfill',
  381. isShow: true
  382. }, {
  383. name: 'camerarotate',
  384. isShow: true
  385. }, {
  386. name: 'light',
  387. isShow: true
  388. }, {
  389. name: 'barcode',
  390. isShow: true
  391. }, {
  392. name: 'flashlightclose',
  393. isShow: true
  394. }, {
  395. name: 'flashlightopen',
  396. isShow: true
  397. }, {
  398. name: 'searchlist',
  399. isShow: true
  400. }, {
  401. name: 'service',
  402. isShow: true
  403. }, {
  404. name: 'sort',
  405. isShow: true
  406. }, {
  407. name: 'down',
  408. isShow: true
  409. }, {
  410. name: 'mobile',
  411. isShow: true
  412. }, {
  413. name: 'mobilefill',
  414. isShow: true
  415. }, {
  416. name: 'copy',
  417. isShow: true
  418. }, {
  419. name: 'countdownfill',
  420. isShow: true
  421. }, {
  422. name: 'countdown',
  423. isShow: true
  424. }, {
  425. name: 'noticefill',
  426. isShow: true
  427. }, {
  428. name: 'notice',
  429. isShow: true
  430. }, {
  431. name: 'upstagefill',
  432. isShow: true
  433. }, {
  434. name: 'upstage',
  435. isShow: true
  436. }, {
  437. name: 'babyfill',
  438. isShow: true
  439. }, {
  440. name: 'baby',
  441. isShow: true
  442. }, {
  443. name: 'brandfill',
  444. isShow: true
  445. }, {
  446. name: 'brand',
  447. isShow: true
  448. }, {
  449. name: 'choicenessfill',
  450. isShow: true
  451. }, {
  452. name: 'choiceness',
  453. isShow: true
  454. }, {
  455. name: 'clothesfill',
  456. isShow: true
  457. }, {
  458. name: 'clothes',
  459. isShow: true
  460. }, {
  461. name: 'creativefill',
  462. isShow: true
  463. }, {
  464. name: 'creative',
  465. isShow: true
  466. }, {
  467. name: 'female',
  468. isShow: true
  469. }, {
  470. name: 'keyboard',
  471. isShow: true
  472. }, {
  473. name: 'male',
  474. isShow: true
  475. }, {
  476. name: 'newfill',
  477. isShow: true
  478. }, {
  479. name: 'new',
  480. isShow: true
  481. }, {
  482. name: 'pullleft',
  483. isShow: true
  484. }, {
  485. name: 'pullright',
  486. isShow: true
  487. }, {
  488. name: 'rankfill',
  489. isShow: true
  490. }, {
  491. name: 'rank',
  492. isShow: true
  493. }, {
  494. name: 'bad',
  495. isShow: true
  496. }, {
  497. name: 'cameraadd',
  498. isShow: true
  499. }, {
  500. name: 'focus',
  501. isShow: true
  502. }, {
  503. name: 'friendfill',
  504. isShow: true
  505. }, {
  506. name: 'cameraaddfill',
  507. isShow: true
  508. }, {
  509. name: 'apps',
  510. isShow: true
  511. }, {
  512. name: 'paintfill',
  513. isShow: true
  514. }, {
  515. name: 'paint',
  516. isShow: true
  517. }, {
  518. name: 'picfill',
  519. isShow: true
  520. }, {
  521. name: 'refresharrow',
  522. isShow: true
  523. }, {
  524. name: 'colorlens',
  525. isShow: true
  526. }, {
  527. name: 'markfill',
  528. isShow: true
  529. }, {
  530. name: 'mark',
  531. isShow: true
  532. }, {
  533. name: 'presentfill',
  534. isShow: true
  535. }, {
  536. name: 'repeal',
  537. isShow: true
  538. }, {
  539. name: 'album',
  540. isShow: true
  541. }, {
  542. name: 'peoplefill',
  543. isShow: true
  544. }, {
  545. name: 'people',
  546. isShow: true
  547. }, {
  548. name: 'servicefill',
  549. isShow: true
  550. }, {
  551. name: 'repair',
  552. isShow: true
  553. }, {
  554. name: 'file',
  555. isShow: true
  556. }, {
  557. name: 'repairfill',
  558. isShow: true
  559. }, {
  560. name: 'taoxiaopu',
  561. isShow: true
  562. }, {
  563. name: 'weixin',
  564. isShow: true
  565. }, {
  566. name: 'attentionfill',
  567. isShow: true
  568. }, {
  569. name: 'attention',
  570. isShow: true
  571. }, {
  572. name: 'commandfill',
  573. isShow: true
  574. }, {
  575. name: 'command',
  576. isShow: true
  577. }, {
  578. name: 'communityfill',
  579. isShow: true
  580. }, {
  581. name: 'community',
  582. isShow: true
  583. }, {
  584. name: 'read',
  585. isShow: true
  586. }, {
  587. name: 'calendar',
  588. isShow: true
  589. }, {
  590. name: 'cut',
  591. isShow: true
  592. }, {
  593. name: 'magic',
  594. isShow: true
  595. }, {
  596. name: 'backwardfill',
  597. isShow: true
  598. }, {
  599. name: 'playfill',
  600. isShow: true
  601. }, {
  602. name: 'stop',
  603. isShow: true
  604. }, {
  605. name: 'tagfill',
  606. isShow: true
  607. }, {
  608. name: 'tag',
  609. isShow: true
  610. }, {
  611. name: 'group',
  612. isShow: true
  613. }, {
  614. name: 'all',
  615. isShow: true
  616. }, {
  617. name: 'backdelete',
  618. isShow: true
  619. }, {
  620. name: 'hotfill',
  621. isShow: true
  622. }, {
  623. name: 'hot',
  624. isShow: true
  625. }, {
  626. name: 'post',
  627. isShow: true
  628. }, {
  629. name: 'radiobox',
  630. isShow: true
  631. }, {
  632. name: 'rounddown',
  633. isShow: true
  634. }, {
  635. name: 'upload',
  636. isShow: true
  637. }, {
  638. name: 'writefill',
  639. isShow: true
  640. }, {
  641. name: 'write',
  642. isShow: true
  643. }, {
  644. name: 'radioboxfill',
  645. isShow: true
  646. }, {
  647. name: 'punch',
  648. isShow: true
  649. }, {
  650. name: 'shake',
  651. isShow: true
  652. }, {
  653. name: 'move',
  654. isShow: true
  655. }, {
  656. name: 'safe',
  657. isShow: true
  658. }, {
  659. name: 'activityfill',
  660. isShow: true
  661. }, {
  662. name: 'crownfill',
  663. isShow: true
  664. }, {
  665. name: 'crown',
  666. isShow: true
  667. }, {
  668. name: 'goodsfill',
  669. isShow: true
  670. }, {
  671. name: 'messagefill',
  672. isShow: true
  673. }, {
  674. name: 'profilefill',
  675. isShow: true
  676. }, {
  677. name: 'sound',
  678. isShow: true
  679. }, {
  680. name: 'sponsorfill',
  681. isShow: true
  682. }, {
  683. name: 'sponsor',
  684. isShow: true
  685. }, {
  686. name: 'upblock',
  687. isShow: true
  688. }, {
  689. name: 'weblock',
  690. isShow: true
  691. }, {
  692. name: 'weunblock',
  693. isShow: true
  694. }, {
  695. name: 'my',
  696. isShow: true
  697. }, {
  698. name: 'myfill',
  699. isShow: true
  700. }, {
  701. name: 'emojifill',
  702. isShow: true
  703. }, {
  704. name: 'emojiflashfill',
  705. isShow: true
  706. }, {
  707. name: 'flashbuyfill',
  708. isShow: true
  709. }, {
  710. name: 'text',
  711. isShow: true
  712. }, {
  713. name: 'goodsfavor',
  714. isShow: true
  715. }, {
  716. name: 'musicfill',
  717. isShow: true
  718. }, {
  719. name: 'musicforbidfill',
  720. isShow: true
  721. }, {
  722. name: 'card',
  723. isShow: true
  724. }, {
  725. name: 'triangledownfill',
  726. isShow: true
  727. }, {
  728. name: 'triangleupfill',
  729. isShow: true
  730. }, {
  731. name: 'roundleftfill-copy',
  732. isShow: true
  733. }, {
  734. name: 'font',
  735. isShow: true
  736. }, {
  737. name: 'title',
  738. isShow: true
  739. }, {
  740. name: 'recordfill',
  741. isShow: true
  742. }, {
  743. name: 'record',
  744. isShow: true
  745. }, {
  746. name: 'cardboardfill',
  747. isShow: true
  748. }, {
  749. name: 'cardboard',
  750. isShow: true
  751. }, {
  752. name: 'formfill',
  753. isShow: true
  754. }, {
  755. name: 'coin',
  756. isShow: true
  757. }, {
  758. name: 'cardboardforbid',
  759. isShow: true
  760. }, {
  761. name: 'circlefill',
  762. isShow: true
  763. }, {
  764. name: 'circle',
  765. isShow: true
  766. }, {
  767. name: 'attentionforbid',
  768. isShow: true
  769. }, {
  770. name: 'attentionforbidfill',
  771. isShow: true
  772. }, {
  773. name: 'attentionfavorfill',
  774. isShow: true
  775. }, {
  776. name: 'attentionfavor',
  777. isShow: true
  778. }, {
  779. name: 'titles',
  780. isShow: true
  781. }, {
  782. name: 'icloading',
  783. isShow: true
  784. }, {
  785. name: 'full',
  786. isShow: true
  787. }, {
  788. name: 'mail',
  789. isShow: true
  790. }, {
  791. name: 'peoplelist',
  792. isShow: true
  793. }, {
  794. name: 'goodsnewfill',
  795. isShow: true
  796. }, {
  797. name: 'goodsnew',
  798. isShow: true
  799. }, {
  800. name: 'medalfill',
  801. isShow: true
  802. }, {
  803. name: 'medal',
  804. isShow: true
  805. }, {
  806. name: 'newsfill',
  807. isShow: true
  808. }, {
  809. name: 'newshotfill',
  810. isShow: true
  811. }, {
  812. name: 'newshot',
  813. isShow: true
  814. }, {
  815. name: 'news',
  816. isShow: true
  817. }, {
  818. name: 'videofill',
  819. isShow: true
  820. }, {
  821. name: 'video',
  822. isShow: true
  823. }, {
  824. name: 'exit',
  825. isShow: true
  826. }, {
  827. name: 'skinfill',
  828. isShow: true
  829. }, {
  830. name: 'skin',
  831. isShow: true
  832. }, {
  833. name: 'moneybagfill',
  834. isShow: true
  835. }, {
  836. name: 'usefullfill',
  837. isShow: true
  838. }, {
  839. name: 'usefull',
  840. isShow: true
  841. }, {
  842. name: 'moneybag',
  843. isShow: true
  844. }, {
  845. name: 'redpacket_fill',
  846. isShow: true
  847. }, {
  848. name: 'subscription',
  849. isShow: true
  850. }, {
  851. name: 'loading1',
  852. isShow: true
  853. }, {
  854. name: 'github',
  855. isShow: true
  856. }, {
  857. name: 'global',
  858. isShow: true
  859. }, {
  860. name: 'settingsfill',
  861. isShow: true
  862. }, {
  863. name: 'back_android',
  864. isShow: true
  865. }, {
  866. name: 'expressman',
  867. isShow: true
  868. }, {
  869. name: 'evaluate_fill',
  870. isShow: true
  871. }, {
  872. name: 'group_fill',
  873. isShow: true
  874. }, {
  875. name: 'play_forward_fill',
  876. isShow: true
  877. }, {
  878. name: 'deliver_fill',
  879. isShow: true
  880. }, {
  881. name: 'notice_forbid_fill',
  882. isShow: true
  883. }, {
  884. name: 'fork',
  885. isShow: true
  886. }, {
  887. name: 'pick',
  888. isShow: true
  889. }, {
  890. name: 'wenzi',
  891. isShow: true
  892. }, {
  893. name: 'ellipse',
  894. isShow: true
  895. }, {
  896. name: 'qr_code',
  897. isShow: true
  898. }, {
  899. name: 'dianhua',
  900. isShow: true
  901. }, {
  902. name: 'cuIcon',
  903. isShow: true
  904. }, {
  905. name: 'loading2',
  906. isShow: true
  907. }, {
  908. name: 'btn',
  909. isShow: true
  910. }]
  911. };
  912. },
  913. methods: {
  914. searchIcon(e) {
  915. let key = e.detail.value.toLowerCase();
  916. let list = this.cuIcon;
  917. for (let i = 0; i < list.length; i++) {
  918. let a = key;
  919. let b = list[i].name.toLowerCase();
  920. if (b.search(a) != -1) {
  921. list[i].isShow = true
  922. } else {
  923. list[i].isShow = false
  924. }
  925. }
  926. this.cuIcon = list
  927. }
  928. }
  929. }
  930. </script>
  931. <style>
  932. page {
  933. padding-top: 50px;
  934. }
  935. </style>