成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue編寫的移動端條件搜索條組件

Ethan815 / 2003人閱讀

摘要：編寫的移動端條件搜索條組件利用開發(fā)的移動端條件搜索條組件，方便在移動端進(jìn)行多條件下搜索，提高用戶的體驗(yàn)度，高速提取用戶所要瀏覽的搜索條件，以便提供更精確的用戶瀏覽內(nèi)容。顯示彈框一級目錄，當(dāng)時，其值為。

vue-filter-bar

vue編寫的移動端條件搜索條組件

Introduction 
利用vue開發(fā)的移動端條件搜索條組件，方便在移動端進(jìn)行多條件下搜索，提高用戶的體驗(yàn)度，高速提取用戶所要瀏覽的搜索條件，以便提供更精確的用戶瀏覽內(nèi)容。在使用過程中，希望開發(fā)者給予更多的建議和批評，使之更加完善，提供更好的服務(wù)。
Example

More Example 
cd demo
npm i
npm run dev
Use Setup Install vue-filter-bar 
npm i vue-filter-bar --save
Vue mount 
// import
import FilterBar from "vue-filter-bar"

export default {
  components: {
    FilterBar
  }
}
Use in SPA
Data Structure

data.js

Data Params

top(Number, default: 0): 篩選條離頂部的距離。

name(String, default: ""): 按鈕名稱。

icon(String, default: ""): 按鈕icon (棄用)。

value(String, default: ""): 按鈕的值。

type(String, default: ""): 區(qū)分篩選按鈕，當(dāng)type="filter"時，列表為篩選模式。

showTabHeader(Boolean, default: true): 顯示彈框一級目錄， 當(dāng)type="filter"時，其值為false。

defaultIcon(String, default: ""): 按鈕默認(rèn)icon。

selectIcon(String, default: ""): 按鈕被選中icon。

selectIndex(Number, default: 0): 序號，當(dāng)type="filter"時，其值為-1。

detailList(Array, default:[]): 二級目錄左側(cè)列表數(shù)據(jù)。

list(Array, default: []): 二級目錄右側(cè)列表數(shù)據(jù)。

API

bar-menus(Array, default: []): 按鈕相關(guān)數(shù)據(jù)的入口。

showDialog(Function, return: Object): 顯示按鈕相對應(yīng)的彈框時調(diào)用。

closeDialog(Function, return: Object): 彈框消失時調(diào)用。

changeTab(Function, return: Object): 切換彈框一級目錄時調(diào)用。

changeMainItem(Function, return: Object): 選擇二級目錄左側(cè)列表時調(diào)用。

changeSelect(Function, return: Array): 返回最終結(jié)果。(注：篩選結(jié)果的value返回json對象)

Issues

篩選返回數(shù)據(jù)類型

篩選條件返回的數(shù)據(jù)是json對象，及下圖中：

對應(yīng)的value值是對象類型，需使用for in循環(huán)去獲取數(shù)據(jù)。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101126.html

相關(guān)文章

  • 如何用vue打造一個移動端音樂播放器

    摘要：寫在前面沒錯，這就是慕課網(wǎng)上的那個音樂播放器，后臺是某音樂播放器的線上接口扒取，雖然這類項(xiàng)目寫的人很多，但不得不說這還是個少有的適合提升的好項(xiàng)目，做這個項(xiàng)目除了想寫一個比較大并且功能復(fù)雜的項(xiàng)目，主要原因是要拿它來應(yīng)對面試，也確實(shí)對我的業(yè)務(wù)能 寫在前面 沒錯，這就是慕課網(wǎng)上的那個vue音樂播放器，后臺是某音樂播放器的線上接口扒取，雖然這類項(xiàng)目寫的人很多，但不得不說這還是個少有的適合vu...

    lanffy 評論0 收藏0

  • Vue.js 實(shí)踐（2）：實(shí)現(xiàn)多條件篩選、搜索、排序及分頁的表格功能

    摘要：基礎(chǔ)布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應(yīng)較為強(qiáng)烈的原因。 與上周的第一篇實(shí)踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時也將對filter功能與computed屬性進(jìn)行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...

    Profeel 評論0 收藏0

  • Vue.js 實(shí)踐（2）：實(shí)現(xiàn)多條件篩選、搜索、排序及分頁的表格功能

    摘要：基礎(chǔ)布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應(yīng)較為強(qiáng)烈的原因。 與上周的第一篇實(shí)踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時也將對filter功能與computed屬性進(jìn)行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...

    ChanceWong 評論0 收藏0

  • vue.js 移動端音樂app（一） 基礎(chǔ)組件 scroll

    一、 基礎(chǔ)實(shí)現(xiàn) （1）功能 對 better-scroll 插件的基本封裝，實(shí)現(xiàn)移動端的滾動 （2）實(shí)現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項(xiàng)之一 （1）取值： 1 滾動的時候會派發(fā) scroll 事件，會截流。 2 滾動的時候?qū)崟r派發(fā) scroll 事件，不會截流。 3 除了實(shí)時派發(fā) scroll 事件，在 swipe 的情況...

    wqj97 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<