vue组件模板_Vue组件提供有关定制模板的建议

vue组件模板

v建议 (v-suggestions)

Automatic suggestions with custom templates.

具有自定义模板的自动建议。

View demo 查看演示 Download Source 下载源

安装 (Installation)

# npm
npm install v-suggestion

# yarn
yarn add v-suggestion

import Suggestions from 'v-suggestions'
import 'v-suggestions/dist/v-suggestions.css' // you can import the stylesheets also (optional)
Vue.use(Suggestions)

Component supports Vue 2.1.0+ version. v-suggetions uses slot-scope based templates for customizing suggestions.

组件支持Vue 2.1.0+版本。 v-suggetions使用基于插槽范围的模板来定制建议。

用户指南 (User Guide)

Property	Type	Description
v-model	String	an empty or predefined string as search query
onInputChange	Function	When the search query is changed, this function will be trigerred. The function should return an array of objects for the Component to render. It can also return a Promise instead of a set of objects. AJAX calls or delays can be addressed.
onItemSelected	Function (optional)	When user selects (clicks or presses enter on an item), this function will be called
options	Object	A set of options for customization of the component
options.debounce	Integer	A delay in milliseconds between each "onInputChange" events. If unspecified, it will be ignored. Comes in handy for ajax requests. See examples.
options.placeholder	string	A placeholder string for search (optional)
options.inputClass	string	Override classnames given to the input text element (optional)

属性	类型	描述
模型	串	空或预定义的字符串作为搜索查询
onInputChange	功能	更改搜索查询后，将触发此功能。 该函数应返回对象数组，以便Component呈现。 它还可以返回一个Promise而不是一组对象。 可以解决AJAX呼叫或延迟。
onItemSelected	功能(可选)	当用户选择(单击或按下项目上的Enter)时，将调用此功能
选项	目的	一组用于自定义组件的选项
options.debounce	整数	每个“ onInputChange”事件之间的延迟(以毫秒为单位)。 如果未指定，它将被忽略。 可用于处理ajax请求。 参见示例。
options.placeholder	串	用于搜索的占位符字符串(可选)
options.inputClass	串	覆盖输入文本元素的类名(可选)

简单的例子 (Simple Example)

<suggestions
    v-model="query"
    :options="options"
    :onInputChange="onCountryInputChange">

export default {
  data () {
    let countries = ['Afghanistan', 'Åland Islands', 'Albania', 'Algeria', 'American Samoa', 'AndorrA', 'Angola', 'Anguilla', 'Antarctica', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Aruba', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize']
    return {
      query: '',
      countries: countries,
      selectedCountry: null,
      options: {}
    }
  },
  methods: {
    onCountryInputChange (query) {
      if (query.trim().length === 0) {
        return null
      }
      // return the matching countries as an array
      return this.countries.filter((country) => {
        return country.toLowerCase().includes(query.toLowerCase())
      })
    },
    onCountrySelected (item) {
      this.selectedCountry = item
    },
    onSearchItemSelected (item) {
      this.selectedSearchItem = item
    }
  }
}

带有自定义模板的基于Ajax的结果(Duckduckgo API) (Ajax based results with custom template (Duckduckgo API))

<suggestions
  v-model="searchQuery"
  :options="searchOptions"
  :onItemSelected="onSearchItemSelected"
  :onInputChange="onInputChange">
  <div slot="item" slot-scope="props" class="single-item">
    <template v-if="props.item.Icon && props.item.Icon.URL">
      <div class="image-wrap" :style="{'backgroundImage': 'url('+ props.item.Icon.URL + ')' }"></div>
    </template>
    <span class="name">{{props.item.Text}}</span>
  </div>
</suggestions>

export default {
  data () {
    return {
      searchQuery: '',
      selectedSearchItem: null,
      options: {}
    }
  },
  methods: {
    onInputChange (query) {
      if (query.trim().length === 0) {
        return null
      }
      const url = `http://api.duckduckgo.com/?q=${query}&format=json&pretty=1`
      return new Promise(resolve => {
        axios.get(url).then(response => {
          const items = []
          response.data.RelatedTopics.forEach((item) => {
            if (item.Text) {
              items.push(item)
            } else if (item.Topics && item.Topics.length > 0) {
              item.Topics.forEach(topic => {
                items.push(topic)
              })
            }
          })
          resolve(items)
        })
      })
    },
    onSearchItemSelected (item) {
      this.selectedSearchItem = item
    }
  }
}

翻译自: https://vuejsexamples.com/vue-component-for-suggestions-with-custom-templates/

vue组件模板