首頁>編程相關>其他源碼
下載

vue 搜尋面板

英語 | 簡體中文

vue-search-panel 是一個帶有建議的搜尋元件

內容

  • 特徵
  • 例子
  • 安裝
  • 用法
  • 應用程式介面
  • 參考

特徵

  • 根據輸入詞過濾建議，支援自訂規則
  • 按插槽自訂建議的元素
  • 支援自訂使用者介面
  • 支援配置面板位置（上/下/左/右/靜態）
  • 擴展到多功能面板，如VsCode

例子

現場演示

連結： https://theoxiong.github.io/vue-search-panel/

預設使用者介面

預設使用者介面

自訂使用者介面

客製化使用者介面

安裝

 $   npm install vue-search-panel --save

用法

導入模組

 import VueSearchPanel from 'vue-search-panel'

登記

全球註冊

 Vue.use(VueSearchPanel)

本地註冊

 <script>
export default {
  components: { VueSearchPanel }
}
</script>

基本用法

  • 呼叫show方法打開面板。
  • 按一下外部或按 ESC 鍵關閉面板。

範例程式碼： 

 <template>
  <div class="demo-comp">
    <button @click="onOpen">Open Panel</button>
    <div>Selected: {{ selected }}</div>
    <vue-search-panel
      v-model="value"
      :fetch-suggestions="getSuggestions"
      @select="onSelect"
      ref="searchPanel"
    >
    </vue-search-panel>
  </div>
</template>

<script>
import VueSearchPanel from 'vue-search-panel'
const testData = [
  { key: 'test-data-1', value: 'test data 1' },
  { key: 'test-data-2', value: 'test data 2' },
  { key: 'test-data-3', value: 'test data 3' }
]

export default {
  name: 'DemoComp',
  data () {
    return {
      value: '',
      selected: ''
    }
  },
  methods: {
    onOpen () {
      this.$refs.searchPanel.show()
    },
    onSelect (item) {
      this.selected = item.value
    },
    getSuggestions (query, cb) {
      cb(query ? testData.filter(item => { return item.value.includes(query) }) : testData)
    }
  },
  components: { VueSearchPanel }
}
</script>

客製化建議

透過scoped slot自訂建議的元素，透過item key 存取建議物件。

範例程式碼： 

 <template>
  <div class="demo-comp">
    <button @click="onOpen">Open Panel</button>
    <div>Selected: {{ selected }}</div>
    <vue-search-panel
      v-model="value"
      :fetch-suggestions="getSuggestions"
      @select="onSelect"
      ref="searchPanel"
    >
      <div class="demo-search-item" slot-scope="{ item }">
        <span class="search-item-value">{{ item.value }}</span>
        <span class="search-item-time">{{ item.time }}</span>
      </div>
    </vue-search-panel>
  </div>
</template>

<script>
import VueSearchPanel from 'vue-search-panel'

export default {
  name: 'DemoComp',
  data () {
    return {
      value: '',
      selected: '',
      testData: []
    }
  },
  mounted () {
    for (let i = 0; i < 20; i++) {
      this.testData.push({
        key: `data-${i}`,
        value: `Test data ${i + 1}`,
        time: new Date(Math.random() * 1000000000000).toLocaleDateString()
      })
    }
  },
  methods: {
    onOpen () {
      this.$refs.searchPanel.show()
    },
    onSelect (item) {
      this.selected = item.value
    },
    getSuggestions (query, cb) {
      cb(query ? this.testData.filter(item => { return item.value.includes(query) }) : this.testData)
    }
  },
  components: { VueSearchPanel }
}
</script>

<style scoped>
.demo-search-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 20px;
}
.search-item-value{
  font-size: 14px;
  color: #555;
}
.search-item-time{
  font-size: 12px;
  color: #aaa;
  width: 80px;
}

</style>

自訂使用者介面

透過道具自訂 UI。
顏色/邊框顏色/背景顏色/寬度/高度可以配置。
有關更多詳細信息，請參閱 API。

範例程式碼： 

 <template>
  <div class="demo-comp">
    <button @click="onOpen">Open Panel</button>
    <div>Selected: {{ selected }}</div>
    <vue-search-panel
      v-model="value"
      width="640px"
      height="400px"
      scrollBarColor="#aaaaaa"
      inputColor="#cccccc"
      inputBackground="#555555"
      inputBorderColor="#666666"
      inputBorderColorHovering="#999999"
      inputBorderColorFocused="#bbbbbb"
      placeholderEffect="dark"
      panelBackground="#333333"
      panelBoxShadow="rgba(0, 0, 0, 0.6)"
      highlightedColor="#444444"
      hoveredColor="#666666"
      :fetch-suggestions="getSuggestions"
      @select="onSelect"
      ref="searchPanel"
    >
      <div class="demo-search-item" slot-scope="{ item }">
        <span class="search-item-value">{{ item.value }}</span>
        <span class="search-item-time">{{ item.time }}</span>
      </div>
    </vue-search-panel>
  </div>
</template>

<script>
import VueSearchPanel from 'vue-search-panel'

export default {
  name: 'DemoComp',
  data () {
    return {
      value: '',
      selected: '',
      testData: []
    }
  },
  mounted () {
    for (let i = 0; i < 20; i++) {
      this.testData.push({
        key: `data-${i}`,
        value: `Test data ${i + 1}`,
        time: new Date(Math.random() * 1000000000000).toLocaleDateString()
      })
    }
  },
  methods: {
    onOpen () {
      this.$refs.searchPanel.show()
    },
    onSelect (item) {
      this.selected = item.value
    },
    getSuggestions (query, cb) {
      cb(query ? this.testData.filter(item => { return item.value.includes(query) }) : this.testData)
    }
  },
  components: { VueSearchPanel }
}
</script>

<style scoped>
.demo-search-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 20px;
}
.search-item-value{
  font-size: 14px;
  color: #999;
}
.search-item-time{
  font-size: 12px;
  color: #777;
  width: 80px;
}

</style>

配置面板位置

  • fixed屬性用於面板的位置，當值為true時，面板相對於視窗定位，當值為false時，面板會根據文件的正常流程定位。
  • placement屬性用於指定面板相對於視窗的位置，可選值是top/bottom/left/right

當 fiexd 值為 false 時，放置屬性將被忽略

範例程式碼： 

 <template>
  <div class="demo-comp">
    <button @click="onOpen('top')" :disabled="disabled" :class="{'is-disabled': disabled}">Open at top</button>
    <button @click="onOpen('bottom')" :disabled="disabled" :class="{'is-disabled': disabled}">Open at bottom</button>
    <button @click="onOpen('left')" :disabled="disabled" :class="{'is-disabled': disabled}">Open at left</button>
    <button @click="onOpen('right')" :disabled="disabled" :class="{'is-disabled': disabled}">Open at right</button>
    <button @click="onOpen('inner')" :disabled="disabled" :class="{'is-disabled': disabled}">Open at inner</button>
    <div>Selected: {{ selected }}</div>
    <vue-search-panel
      v-model="value"
      :placement="placement"
      :fixed="fixed"
      :fetch-suggestions="getSuggestions"
      @open="onPanelOpen"
      @closed="onPanelClosed"
      @select="onSelect"
      ref="searchPanel"
    >
    </vue-search-panel>
  </div>
</template>

<script>
import VueSearchPanel from 'vue-search-panel'
const testData = [
  { key: 'test-data-1', value: 'test data 1' },
  { key: 'test-data-2', value: 'test data 2' },
  { key: 'test-data-3', value: 'test data 3' }
]

export default {
  name: 'DemoComp',
  data () {
    return {
      value: '',
      selected: '',
      placement: 'top',
      fixed: true,
      disabled: false
    }
  },
  methods: {
    onOpen (position) {
      if (position === 'inner') {
        this.fixed = false
      } else {
        this.fixed = true
        this.placement = position
      }
      this.$refs.searchPanel.show()
    },
    onPanelOpen () {
      this.disabled = true
    },
    onPanelClosed () {
      this.disabled = false
    },
    onSelect (item) {
      this.selected = item.value
    },
    getSuggestions (query, cb) {
      cb(query ? testData.filter(item => { return item.value.includes(query) }) : testData)
    }
  },
  components: { VueSearchPanel }
}
</script>

<style scoped>
.demo-comp{
  margin: 20px;
  width: 600px;
}
.is-disabled,
.is-disabled:active,
.is-disabled:focus,
.is-disabled:hover{
  cursor:not-allowed;
  background-color:#e4e4ee;
}
</style>

擴大

可擴展為多功能面板，如搜尋/最近/命令，如VsCode
直播球幕：https://theoxiong.github.io/vue-search-panel/

對於開發者： 

 npm install
npm run dev

應用程式介面

屬性

範圍描述類型可選值預設值
值/v 模型雙向綁定值細繩— —
佔位符輸入的佔位符細繩— —
寬度面板寬度細繩— 50%
高度面板高度細繩— 300像素
頂部面板的邊距頂部細繩— 0像素
底部面板的邊距底部細繩— 0像素
左邊面板左邊距細繩— 0像素
正確的面板的邊距右側細繩— 0像素
固定的是否相對於視窗定位布林值—真的
放置指定面板相對於視窗的位置（當 fiexd 值為 false 時忽略）細繩上/下/左/右頂部
獲取建議一種獲取輸入建議的方法。當建議準備好時，調用回調（data：[]）返回它們函數（查詢字串，cb） — —
closeOnPressEscape按ESC鍵是否關閉面板布林值—真的
選擇時關閉是否關閉選擇面板布林值—真的
關閉時清除面板關閉時是否清除輸入值布林值—真的
選擇不匹配時當沒有匹配時是否在輸入時發出選擇事件布林值—錯誤的
觸發焦點輸入焦點時是否顯示建議布林值—真的
反白顯示第一項是否突出顯示第一項布林值—真的
值顏色建議項目的顏色（當沒有作用域插槽時）細繩— #606266
捲動條顏色捲軸的顏色細繩— #DFDFDF
捲軸不透明度滾動條的不透明度數位— 0.8
面板背景面板的背景顏色細繩— #FFFFFF
面板邊框半徑面板邊框半徑細繩— 0像素
面板框陰影面板的boxShadow顏色細繩— RGBA(0, 0, 0, 0.3)
突出顯示顏色突出顯示時建議項目的顏色細繩— #F5F7FA
懸停顏色懸停時建議項目的顏色細繩— #C5C7CA
佔位符效果佔位符文字的顏色細繩亮/暗光
輸入色彩輸入文字的顏色細繩— #606266
輸入背景輸入欄位的背景顏色細繩— #FFFFFF
輸入邊框顏色輸入欄位的邊框顏色細繩— #DCFE6
輸入邊框顏色懸停懸停時輸入欄位的邊框顏色細繩— #B0B3BB
輸入邊框顏色焦點對焦時輸入欄位的邊框顏色細繩— #575F96

方法

方法名稱描述參數
展示打開面板—
關閉關閉面板—
焦點輸入聚焦輸入元素—
取得輸入元素取得輸入元素—

活動

活動名稱描述參數
打開面板打開時觸發—
打開面板開啟動畫結束時觸發—
關閉面板關閉時觸發—
關閉面板關閉動畫結束時觸發—
重點當輸入元素聚焦時觸發—
模糊當輸入元素模糊時觸發—
選擇點擊建議時觸發建議被點擊

老虎機

作用域插槽

輸入建議的自訂內容，範圍參數為{ item }

命名槽

姓名描述
項目上建議頂部的內容

參考

  • VS程式碼
  • 元素使用者介面
展開
附加信息
相關應用
爲您推薦
相關資訊 全部