ホーム>プログラミング関連>その他のソースコード
ダウンロード

vue-検索パネル

英語 | 简体中文

vue-search-panel は候補を含む検索コンポーネントです

コンテンツ

  • 特徴
  • 例
  • インストール
  • 使用法
  • API
  • 参照

特徴

  • 入力単語に基づいて候補をフィルタリングし、カスタム ルールをサポート
  • スロットごとに提案の要素をカスタマイズする
  • カスタムUIのサポート
  • 設定パネルの位置をサポート (上/下/左/右/静的)
  • VsCodeのような多機能パネルに拡張

例

ライブデモ

リンク： https://theoxiong.github.io/vue-search-panel/

デフォルトのUI

デフォルトUI

カスタムUI

UIのカスタマイズ

インストール

 $   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キーを介して提案オブジェクトにアクセスします。

サンプルコード： 

 <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

小道具でUIをカスタマイズします。
color/borderColor/backgroundColor/width/height を設定できます。
詳細については、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

API

属性

パラメータ説明タイプオプションの値デフォルト値
値 / v モデル双方向バインディング値弦— —
プレースホルダー入力のプレースホルダー弦— —
幅パネルの幅弦— 50%
身長パネルの高さ弦— 300ピクセル
トップパネルの余白上部弦— 0ピクセル
底マージンパネルの底部弦— 0ピクセル
左パネルの左マージン弦— 0ピクセル
右パネルの右マージン弦— 0ピクセル
修理済みビューポートに対して相対的に配置されるかどうかブール値—真実
配置ビューポートを基準としたパネルの配置を指定します (fiexd 値が false の場合は無視されます)弦上/下/左/右トップ
フェッチ提案入力候補を取得するメソッド。提案の準備ができたら、callback(data:[]) を呼び出して提案を返します。関数(クエリ文字列、cb) — —
closeOnPressEscape ESCを押してパネルを閉じるかどうかブール値—真実
closeOnSelect選択時にパネルを閉じるかどうかブール値—真実
クリアオンクローズパネルを閉じたときに入力値をクリアするかどうかブール値—真実
selectWhenUnmatched一致しない場合に入力時に選択イベントを発行するかどうかブール値—間違い
トリガーオンフォーカス入力フォーカス時に候補を表示するかどうかブール値—真実
ハイライト最初の項目最初の項目を強調表示するかどうかブール値—真実
値の色提案アイテムの色 (スコープ付きスロットがない場合)弦— #606266
スクロールバーの色スクロールバーの色弦— #DFDFDF
スクロールバーの不透明度スクロールバーの不透明度番号— 0.8
パネル背景パネルの背景色弦— #FFFFFF
パネル境界半径パネルの境界半径弦— 0ピクセル
パネルボックスシャドウボックスパネルの影の色弦— rgba(0, 0, 0, 0.3)
ハイライトされた色ハイライトされたときの提案項目の色弦— #F5F7FA
ホバーされた色カーソルを置いたときの提案項目の色弦— #C5C7CA
プレースホルダー効果プレースホルダーテキストの色弦明るい/暗いライト
入力色入力テキストの色弦— #606266
入力背景入力フィールドの背景色弦— #FFFFFF
inputBorderColor入力フィールドの境界線の色弦— #DCDFE6
inputBorderColorHoveringカーソルを置いたときの入力フィールドの境界線の色弦— #B0B3BB
inputBorderColorFocusedフォーカスされたときの入力フィールドの境界線の色弦— #575F96

メソッド

メソッド名説明パラメータ
見せるパネルを開ける—
近いパネルを閉じます—
フォーカス入力入力要素にフォーカスを当てる—
getInputElement入力要素を取得します—

イベント

イベント名説明パラメータ
開けるパネルが開いたときにトリガー—
開かれたパネルを開くアニメーションが終了するとトリガーされます—
近いパネルが閉じるとトリガーされます—
閉まっているパネルを閉じるアニメーションが終了するとトリガーされます—
集中入力要素がフォーカスされたときにトリガーされます—
ぼかし入力要素がぼやけたときにトリガーされます—
選択する提案がクリックされたときにトリガーされます提案がクリックされる

スロット

スコープ付きスロット

入力候補のカスタム コンテンツ。スコープ パラメーターは{ item }です。

名前付きスロット

名前説明
アイテムに応じて提案の上部にあるコンテンツ

参照

  • VSコード
  • 要素UI
拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて