mirror of https://github.com/ElemeFE/element
Docs: add algolia search
parent
f93798446e
commit
9dcc4eb0b7
|
@ -13,3 +13,4 @@ fe.element/element-ui
|
|||
.npmrc
|
||||
coverage
|
||||
waiter.config.js
|
||||
build/bin/algolia-key.js
|
||||
|
|
|
@ -0,0 +1,52 @@
|
|||
'use strict';
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const algoliasearch = require('algoliasearch');
|
||||
const slugify = require('transliteration').slugify;
|
||||
const key = require('./algolia-key');
|
||||
|
||||
const client = algoliasearch('9NLTR1QH8B', key);
|
||||
|
||||
['zh-CN', 'en-US'].forEach(lang => {
|
||||
const indexName = lang === 'zh-CN' ? 'element-zh' : 'element-en';
|
||||
const index = client.initIndex(indexName);
|
||||
index.clearIndex(err => {
|
||||
if (err) return;
|
||||
fs.readdir(path.resolve(__dirname, `../../examples/docs/${ lang }`), (err, files) => {
|
||||
if (err) return;
|
||||
let indices = [];
|
||||
files.forEach(file => {
|
||||
const component = file.replace('.md', '');
|
||||
const content = fs.readFileSync(path.resolve(__dirname, `../../examples/docs/${ lang }/${ file }`), 'utf8');
|
||||
const matches = content
|
||||
.replace(/:::[\s\S]*?:::/g, '')
|
||||
.replace(/```[\s\S]*?```/g, '')
|
||||
.match(/#{2,4}[^#]*/g)
|
||||
.map(match => match.replace(/\n+/g, '\n').split('\n').filter(part => !!part))
|
||||
.map(match => {
|
||||
const length = match.length;
|
||||
if (length > 2) {
|
||||
const desc = match.slice(1, length).join('');
|
||||
return [match[0], desc];
|
||||
}
|
||||
return match;
|
||||
});
|
||||
|
||||
indices = indices.concat(matches.map(match => {
|
||||
const isComponent = match[0].indexOf('###') < 0;
|
||||
const title = match[0].replace(/#{2,4}/, '').trim();
|
||||
const index = { component, title };
|
||||
index.ranking = isComponent ? 2 : 1;
|
||||
index.anchor = slugify(title);
|
||||
index.content = (match[1] || title).replace(/<[^>]+>/g, '');
|
||||
return index;
|
||||
}));
|
||||
});
|
||||
|
||||
index.addObjects(indices, (err, res) => {
|
||||
console.log(err, res);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 8.3 KiB |
|
@ -314,6 +314,9 @@
|
|||
|
||||
<!-- nav -->
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<algolia-search></algolia-search>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
active-class="active"
|
||||
|
@ -391,6 +394,7 @@
|
|||
</template>
|
||||
<script>
|
||||
import ThemePicker from './theme-picker.vue';
|
||||
import AlgoliaSearch from './search.vue';
|
||||
import bus from '../bus';
|
||||
import compoLang from '../i18n/component.json';
|
||||
import { version } from 'main/index.js';
|
||||
|
@ -409,7 +413,10 @@
|
|||
};
|
||||
},
|
||||
|
||||
components: { ThemePicker },
|
||||
components: {
|
||||
ThemePicker,
|
||||
AlgoliaSearch
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route.path': {
|
||||
|
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<el-autocomplete
|
||||
v-model="query"
|
||||
size="small"
|
||||
popper-class="algolia-search"
|
||||
:fetch-suggestions="querySearch"
|
||||
:placeholder="placeholder"
|
||||
:trigger-on-focus="false"
|
||||
@select="handleSelect">
|
||||
<template scope="props">
|
||||
<p class="algolia-search-title" v-if="props.item.title">
|
||||
<span v-html="props.item.highlightedCompo"></span>
|
||||
<span class="algolia-search-separator">></span>
|
||||
<span v-html="props.item.title"></span>
|
||||
</p>
|
||||
<p
|
||||
class="algolia-search-content"
|
||||
v-if="props.item.content"
|
||||
v-html="props.item.content"></p>
|
||||
<img
|
||||
class="algolia-search-logo"
|
||||
src="../assets/images/search-by-algolia.svg"
|
||||
alt="algolia-logo"
|
||||
v-if="props.item.img">
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.algolia-search {
|
||||
width: 450px !important;
|
||||
|
||||
.el-autocomplete-suggestion__list {
|
||||
position: static !important;
|
||||
padding-bottom: 31px;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: solid 1px #ebebeb;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #dfe4ed;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
text-align: right;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
height: 17px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-highlight {
|
||||
color: #409EFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.algolia-search-title {
|
||||
font-size: 14px;
|
||||
margin: 6px 0;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.algolia-search-separator {
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.algolia-search-content {
|
||||
font-size: 12px;
|
||||
margin: 6px 0;
|
||||
line-height: 2.4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import algoliasearch from 'algoliasearch';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
index: null,
|
||||
query: ''
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
lang() {
|
||||
return this.$route.meta.lang;
|
||||
},
|
||||
|
||||
placeholder() {
|
||||
return this.lang === 'zh-CN' ? '搜索文档' : 'Search';
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
lang() {
|
||||
this.initIndex();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
initIndex() {
|
||||
const client = algoliasearch('9NLTR1QH8B', 'a75cbec97cda75ab7334fed9219ecc57');
|
||||
this.index = client.initIndex(`element-${ this.lang === 'zh-CN' ? 'zh' : 'en' }`);
|
||||
},
|
||||
|
||||
querySearch(query, cb) {
|
||||
if (!query) return;
|
||||
this.index.search({ query, hitsPerPage: 6 }, (err, res) => {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
if (res.hits.length > 0) {
|
||||
cb(res.hits.map(hit => {
|
||||
let content = hit._highlightResult.content.value.replace(/\s+/g, ' ');
|
||||
const highlightStart = content.indexOf('<span class="algolia-highlight">');
|
||||
if (highlightStart > -1) {
|
||||
const highlightEnd = content.lastIndexOf('</span>');
|
||||
const startEllipsis = highlightStart - 15 > 0;
|
||||
const endEllipsis = highlightEnd + 22 < content.length;
|
||||
content = (startEllipsis ? '...' : '') +
|
||||
content.slice(Math.max(0, highlightStart - 15), Math.min(highlightEnd + 22, content.length)) +
|
||||
(endEllipsis ? '...' : '');
|
||||
} else if (content.indexOf('|') > -1) {
|
||||
content = '';
|
||||
}
|
||||
return {
|
||||
anchor: hit.anchor,
|
||||
component: hit.component,
|
||||
highlightedCompo: hit._highlightResult.component.value,
|
||||
title: hit._highlightResult.title.value,
|
||||
content
|
||||
};
|
||||
}).concat({
|
||||
img: true
|
||||
}));
|
||||
} else {
|
||||
cb([]);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleSelect(val) {
|
||||
if (val.img) return;
|
||||
const component = val.component || '';
|
||||
const anchor = val.anchor;
|
||||
this.$router.push(`/${ this.lang }/component/${ component }${ anchor ? `#${ anchor }` : '' }`);
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.initIndex();
|
||||
}
|
||||
};
|
||||
</script>
|
|
@ -1676,7 +1676,7 @@ Search and select options with a keyword.
|
|||
| expand-trigger | trigger mode of expanding current item | string | click / hover | click |
|
||||
| show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true |
|
||||
| filterable | whether the options can be searched | boolean | — | — |
|
||||
| debounce | debounce delay when typing filter keyword, in millisecond | number | — | 300 |
|
||||
| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
|
||||
| change-on-select | whether selecting an option of any level is permitted | boolean | — | false |
|
||||
| size | size of Input | string | large / small / mini | — |
|
||||
|
||||
|
|
|
@ -381,13 +381,13 @@ This feature is at alpha stage. Feedback welcome.
|
|||
| start-placeholder | placeholder for the start date in range mode | string | — | — |
|
||||
| end-placeholder | placeholder for the end date in range mode | string | — | — |
|
||||
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
|
||||
| format | format of the input box | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
|
||||
| format | format of the displayed value in the input box | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
|
||||
| align | alignment | left/center/right | left |
|
||||
| popper-class | custom class name for DatePicker's dropdown | string | — | — |
|
||||
| picker-options | additional options, check the table below | object | — | {} |
|
||||
| range-separator | range separator | string | — | '-' |
|
||||
| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
|
||||
| value-format | optional, format of bounded value | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
|
||||
| name | same as `name` in native input | string | — | — |
|
||||
|
||||
### Picker Options
|
||||
|
@ -396,7 +396,7 @@ This feature is at alpha stage. Feedback welcome.
|
|||
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
|
||||
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
|
||||
| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
|
||||
| onPick | a callback that triggers when the seleted date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - |
|
||||
| onPick | a callback that triggers when the selected date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - |
|
||||
|
||||
### shortcuts
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|
@ -408,11 +408,11 @@ This feature is at alpha stage. Feedback welcome.
|
|||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| change | triggers when user confirms the value | component's bounded value |
|
||||
| change | triggers when user confirms the value | component's binding value |
|
||||
| blur | triggers when Input blurs | (event: Event) |
|
||||
| focus | triggers when Input focuses | (event: Event) |
|
||||
|
||||
### Methods
|
||||
| Method | Description | Parameters |
|
||||
|------|--------|-------|
|
||||
| focus | focus the Input component | - |
|
||||
| focus | focus the Input component | — |
|
||||
|
|
|
@ -246,13 +246,13 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
|||
| start-placeholder | placeholder for the start date in range mode | string | — | — |
|
||||
| end-placeholder | placeholder for the end date in range mode | string | — | — |
|
||||
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
|
||||
| format | format of the picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
|
||||
| format | format of the displayed value in the input box | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
|
||||
| align | alignment | left/center/right | left |
|
||||
| popper-class | custom class name for DateTimePicker's dropdown | string | — | — |
|
||||
| picker-options | additional options, check the table below | object | — | {} |
|
||||
| range-separator | range separator | string | - | '-' |
|
||||
| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
|
||||
| value-format | optional, format of bounded value | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
|
||||
| name | same as `name` in native input | string | — | — |
|
||||
|
||||
### Picker Options
|
||||
|
@ -271,11 +271,11 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
|||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| change | triggers when user confirms the value | component's bounded value |
|
||||
| change | triggers when user confirms the value | component's binding value |
|
||||
| blur | triggers when Input blurs | (event: Event) |
|
||||
| focus | triggers when Input focuses | (event: Event) |
|
||||
|
||||
### Methods
|
||||
| Method | Description | Parameters |
|
||||
|------|--------|-------|
|
||||
| focus | focus the Input component | - |
|
||||
| focus | focus the Input component | — |
|
||||
|
|
|
@ -1,11 +0,0 @@
|
|||
# Components Document
|
||||
|
||||
<script>
|
||||
import { addClass } from 'examples/dom/class.js';
|
||||
|
||||
module.exports = {
|
||||
ready() {
|
||||
addClass(this.$el.parentNode, 'no-toc')
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -160,7 +160,7 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
|
|||
|size | size of the component | string | large/small| — |
|
||||
|disabled| whether the component is disabled | boolean | — | false |
|
||||
|controls| whether to enable the control buttons | boolean | — | true |
|
||||
|debounce| debounce delay when typing, in millisecond | number | — | 300 |
|
||||
|debounce| debounce delay when typing, in milliseconds | number | — | 300 |
|
||||
|controls-position | position of the control buttons | string | right | - |
|
||||
|name | same as `name` in native input | string | — | — |
|
||||
|label | label text | string | — | — |
|
||||
|
|
|
@ -657,6 +657,7 @@ Attribute | Description | Type | Options | Default
|
|||
| props | configuration options, see the following table | object | — | — |
|
||||
|icon | icon name | string | — | — |
|
||||
|value | binding value | string | — | — |
|
||||
| debounce | debounce delay when typing, in milliseconds | number | — | 300 |
|
||||
|fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — |
|
||||
| popper-class | custom class name for autocomplete's dropdown | string | — | — |
|
||||
| trigger-on-focus | whether show suggestions when input focus | boolean | — | true |
|
||||
|
|
|
@ -214,7 +214,7 @@ Selecting a range of values is supported.
|
|||
| vertical | vertical mode | boolean | — | false |
|
||||
| height | Slider height, required in vertical mode | String | — | — |
|
||||
| label | label for screen reader | String | — | — |
|
||||
|debounce| debounce delay when typing, in millisecond, works when `show-input` is true | number | — | 300 |
|
||||
|debounce| debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |
|
||||
|
||||
## Events
|
||||
| Event Name | Description | Parameters |
|
||||
|
|
|
@ -391,13 +391,13 @@
|
|||
| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
|
||||
| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
|
||||
| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
|
||||
| format | 输入框的时间日期格式 | string | 年 `yyyy`,月 `MM`,日 `dd`,小时 `HH`,分 `mm`,秒 `ss` | yyyy-MM-dd |
|
||||
| format | 显示在输入框中的格式 | string | 年 `yyyy`,月 `MM`,日 `dd`,小时 `HH`,分 `mm`,秒 `ss` | yyyy-MM-dd |
|
||||
| align | 对齐方式 | string | left, center, right | left |
|
||||
| popper-class | DatePicker 下拉框的类名 | string | — | — |
|
||||
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
|
||||
| range-separator | 选择范围时的分隔符 | string | — | '-' |
|
||||
| default-value | 可选,选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — |
|
||||
| value-format | 可选,绑定值的格式 | string | 年 `yyyy`,月 `MM`,日 `dd`,小时 `HH`,分 `mm`,秒 `ss` | — |
|
||||
| value-format | 可选,绑定值的格式。不指定则绑定值为 Date 对象 | string | 年 `yyyy`,月 `MM`,日 `dd`,小时 `HH`,分 `mm`,秒 `ss` | — |
|
||||
| name | 原生属性 | string | — | — |
|
||||
|
||||
### Picker Options
|
||||
|
@ -406,7 +406,7 @@
|
|||
| shortcuts | 设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
|
||||
| disabledDate | 设置禁用状态,参数为当前日期,要求返回 Boolean | Function | — | — |
|
||||
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
|
||||
| onPick | 选中日期后会执行的回调,只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | - | - |
|
||||
| onPick | 选中日期后会执行的回调,只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | — | — |
|
||||
|
||||
### Shortcuts
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
@ -417,11 +417,11 @@
|
|||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| change | 用户确认选定的值时触发 | 组件绑定值 |
|
||||
| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致,可受 `value-format` 控制 |
|
||||
| blur | 当 input 失去焦点时触发 | (event: Event) |
|
||||
| focus | 当 input 获得焦点时触发 | (event: Event) |
|
||||
|
||||
### Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | 使 input 获取焦点 | - |
|
||||
| focus | 使 input 获取焦点 | — |
|
||||
|
|
|
@ -245,13 +245,13 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生,`Picker Options` 或者其
|
|||
| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
|
||||
| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
|
||||
| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
|
||||
| format | 时间日期格式化 | string | 年 `yyyy`,月 `MM`,日 `dd`,小时 `HH`,分 `mm`,秒 `ss` | yyyy-MM-dd |
|
||||
| format | 显示在输入框中的格式 | string | 年 `yyyy`,月 `MM`,日 `dd`,小时 `HH`,分 `mm`,秒 `ss` | yyyy-MM-dd |
|
||||
| align | 对齐方式 | string | left, center, right | left |
|
||||
| popper-class | DateTimePicker 下拉框的类名 | string | — | — |
|
||||
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
|
||||
| range-separator | 选择范围时的分隔符 | string | - | '-' |
|
||||
| default-value | 可选,选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — |
|
||||
| value-format | 可选,绑定值的格式 | string | 年 `yyyy`,月 `MM`,日 `dd`,小时 `HH`,分 `mm`,秒 `ss` | — |
|
||||
| value-format | 可选,绑定值的格式。不指定则绑定值为 Date 对象 | string | 年 `yyyy`,月 `MM`,日 `dd`,小时 `HH`,分 `mm`,秒 `ss` | — |
|
||||
| name | 原生属性 | string | — | — |
|
||||
|
||||
### Picker Options
|
||||
|
@ -270,11 +270,11 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生,`Picker Options` 或者其
|
|||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| change | 用户确认选定的值时触发 | 组件绑定值 |
|
||||
| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致,可受 `value-format` 控制 |
|
||||
| blur | 当 input 失去焦点时触发 | (event: Event) |
|
||||
| focus | 当 input 获得焦点时触发 | (event: Event) |
|
||||
|
||||
### Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | 使 input 获取焦点 | - |
|
||||
| focus | 使 input 获取焦点 | — |
|
||||
|
|
|
@ -1,11 +0,0 @@
|
|||
# 组件说明文档
|
||||
|
||||
<script>
|
||||
import { addClass } from 'examples/dom/class.js';
|
||||
|
||||
module.exports = {
|
||||
ready() {
|
||||
addClass(this.$el.parentNode, 'no-toc')
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -813,7 +813,8 @@ export default {
|
|||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| disabled | 禁用 | boolean | — | false |
|
||||
| props | 配置选项,具体见下表 | object | — | — |
|
||||
| value | 必填值输入绑定值 | string | — | — |
|
||||
| value | 必填值,输入绑定值 | string | — | — |
|
||||
| debounce | 获取输入建议的去抖延时 | number | — | 300 |
|
||||
| fetch-suggestions | 返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | — | — |
|
||||
| popper-class | Autocomplete 下拉列表的类名 | string | — | — |
|
||||
| trigger-on-focus | 是否在输入框 focus 时显示建议列表 | boolean | — | true |
|
||||
|
@ -822,6 +823,7 @@ export default {
|
|||
| name | 原生属性 | string | — | — |
|
||||
| select-when-unmatched | 在输入没有任何匹配建议的情况下,按下回车是否触发 `select` 事件 | boolean | — | false |
|
||||
| label | 输入框关联的label文字 | string | — | — |
|
||||
|
||||
### props
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| -------- | ----------------- | ------ | ------ | ------ |
|
||||
|
|
|
@ -28,6 +28,10 @@
|
|||
"test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
|
||||
"test:watch": "npm run build:theme && karma start test/unit/karma.conf.js"
|
||||
},
|
||||
"faas": {
|
||||
"domain": "element",
|
||||
"public": "examples/element-ui"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:ElemeFE/element.git"
|
||||
|
@ -54,6 +58,7 @@
|
|||
"vue": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"algoliasearch": "^3.24.5",
|
||||
"babel-cli": "^6.14.0",
|
||||
"babel-core": "^6.14.0",
|
||||
"babel-loader": "^6.2.5",
|
||||
|
|
|
@ -33,6 +33,7 @@
|
|||
visible-arrow
|
||||
:class="[popperClass ? popperClass : '']"
|
||||
ref="suggestions"
|
||||
placement="bottom-start"
|
||||
:id="id">
|
||||
<li
|
||||
v-for="(item, index) in suggestions"
|
||||
|
@ -51,6 +52,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import debounce from 'throttle-debounce/debounce';
|
||||
import ElInput from 'element-ui/packages/input';
|
||||
import Clickoutside from 'element-ui/src/utils/clickoutside';
|
||||
import ElAutocompleteSuggestions from './autocomplete-suggestions.vue';
|
||||
|
@ -100,7 +102,11 @@
|
|||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
label: String
|
||||
label: String,
|
||||
debounce: {
|
||||
type: Number,
|
||||
default: 300
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
@ -152,13 +158,13 @@
|
|||
this.suggestions = [];
|
||||
return;
|
||||
}
|
||||
this.getData(value);
|
||||
this.debouncedGetData(value);
|
||||
},
|
||||
handleFocus(event) {
|
||||
this.activated = true;
|
||||
this.$emit('focus', event);
|
||||
if (this.triggerOnFocus) {
|
||||
this.getData(this.value);
|
||||
this.debouncedGetData(this.value);
|
||||
}
|
||||
},
|
||||
handleBlur(event) {
|
||||
|
@ -214,6 +220,9 @@
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
this.debouncedGetData = debounce(this.debounce, (val) => {
|
||||
this.getData(val);
|
||||
});
|
||||
this.$on('item-click', item => {
|
||||
this.select(item);
|
||||
});
|
||||
|
|
|
@ -129,14 +129,21 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="el-picker-panel__footer" v-if="showTime">
|
||||
<a
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
class="el-picker-panel__link-btn"
|
||||
@click="handleClear">{{ t('el.datepicker.clear') }}</a>
|
||||
<button
|
||||
type="button"
|
||||
class="el-picker-panel__btn"
|
||||
@click="handleConfirm()"
|
||||
:disabled="btnDisabled">{{ t('el.datepicker.confirm') }}</button>
|
||||
@click="handleClear">
|
||||
{{ t('el.datepicker.clear') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
size="mini"
|
||||
class="el-picker-panel__link-btn"
|
||||
:disabled="btnDisabled"
|
||||
@click="handleConfirm()">
|
||||
{{ t('el.datepicker.confirm') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
|
|
@ -112,14 +112,20 @@
|
|||
<div
|
||||
class="el-picker-panel__footer"
|
||||
v-show="footerVisible && currentView === 'date'">
|
||||
<a
|
||||
href="JavaScript:"
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
class="el-picker-panel__link-btn"
|
||||
@click="changeToNow">{{ t('el.datepicker.now') }}</a>
|
||||
<button
|
||||
type="button"
|
||||
class="el-picker-panel__btn"
|
||||
@click="confirm">{{ t('el.datepicker.confirm') }}</button>
|
||||
@click="changeToNow">
|
||||
{{ t('el.datepicker.now') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
size="mini"
|
||||
class="el-picker-panel__link-btn"
|
||||
@click="confirm">
|
||||
{{ t('el.datepicker.confirm') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
|
|
@ -95,6 +95,7 @@ export default function calcTextareaHeight(
|
|||
}
|
||||
height = Math.min(maxHeight, height);
|
||||
}
|
||||
|
||||
hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea);
|
||||
hiddenTextarea = null;
|
||||
return { height: height + 'px'};
|
||||
};
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
@include b(autocomplete-suggestion) {
|
||||
margin: 5px 0;
|
||||
box-shadow: $--box-shadow-light;
|
||||
border-radius: $--border-radius-base;
|
||||
|
||||
&.el-popper .popper__arrow {
|
||||
left: 24px !important;
|
||||
|
|
|
@ -28,6 +28,7 @@
|
|||
text-align: right;
|
||||
background-color: $--color-white;
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
@include e(shortcut) {
|
||||
|
@ -85,11 +86,7 @@
|
|||
}
|
||||
|
||||
@include e(link-btn) {
|
||||
cursor: pointer;
|
||||
color: $--color-primary;
|
||||
text-decoration: none;
|
||||
padding: 15px;
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.popper__arrow {
|
||||
|
|
105
yarn.lock
105
yarn.lock
|
@ -70,6 +70,10 @@ after@0.8.1:
|
|||
version "0.8.1"
|
||||
resolved "https://registry.yarnpkg.com/after/-/after-0.8.1.tgz#ab5d4fb883f596816d3515f8f791c0af486dd627"
|
||||
|
||||
agentkeepalive@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-2.2.0.tgz#c5d1bd4b129008f1163f236f86e5faea2026e2ef"
|
||||
|
||||
ajv-keywords@^1.0.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.2.0.tgz#676c4f087bfe1e8b12dca6fda2f3c74f417b099c"
|
||||
|
@ -81,6 +85,26 @@ ajv@^4.7.0:
|
|||
co "^4.6.0"
|
||||
json-stable-stringify "^1.0.1"
|
||||
|
||||
algoliasearch@^3.24.5:
|
||||
version "3.24.5"
|
||||
resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.24.5.tgz#15d1e6c6a059b8b357d7d40122d9841829acfd20"
|
||||
dependencies:
|
||||
agentkeepalive "^2.2.0"
|
||||
debug "^2.6.8"
|
||||
envify "^4.0.0"
|
||||
es6-promise "^4.1.0"
|
||||
events "^1.1.0"
|
||||
foreach "^2.0.5"
|
||||
global "^4.3.2"
|
||||
inherits "^2.0.1"
|
||||
isarray "^2.0.1"
|
||||
load-script "^1.0.0"
|
||||
object-keys "^1.0.11"
|
||||
querystring-es3 "^0.2.1"
|
||||
reduce "^1.0.1"
|
||||
semver "^5.1.0"
|
||||
tunnel-agent "^0.6.0"
|
||||
|
||||
align-text@^0.1.1, align-text@^0.1.3:
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
|
||||
|
@ -1104,22 +1128,7 @@ cheerio@^0.20.0:
|
|||
optionalDependencies:
|
||||
jsdom "^7.0.2"
|
||||
|
||||
chokidar@^1.0.0, chokidar@^1.4.1:
|
||||
version "1.6.1"
|
||||
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
|
||||
dependencies:
|
||||
anymatch "^1.3.0"
|
||||
async-each "^1.0.0"
|
||||
glob-parent "^2.0.0"
|
||||
inherits "^2.0.1"
|
||||
is-binary-path "^1.0.0"
|
||||
is-glob "^2.0.0"
|
||||
path-is-absolute "^1.0.0"
|
||||
readdirp "^2.0.0"
|
||||
optionalDependencies:
|
||||
fsevents "^1.0.0"
|
||||
|
||||
chokidar@^1.7.0:
|
||||
chokidar@^1.0.0, chokidar@^1.4.1, chokidar@^1.7.0:
|
||||
version "1.7.0"
|
||||
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
|
||||
dependencies:
|
||||
|
@ -1703,6 +1712,12 @@ debug@^2.1.1, debug@^2.2.0:
|
|||
dependencies:
|
||||
ms "0.7.2"
|
||||
|
||||
debug@^2.6.8:
|
||||
version "2.6.9"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
|
||||
dependencies:
|
||||
ms "2.0.0"
|
||||
|
||||
decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
|
||||
|
@ -1992,6 +2007,13 @@ entities@^1.1.1, entities@~1.1.1:
|
|||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
|
||||
|
||||
envify@^4.0.0:
|
||||
version "4.1.0"
|
||||
resolved "https://registry.yarnpkg.com/envify/-/envify-4.1.0.tgz#f39ad3db9d6801b4e6b478b61028d3f0b6819f7e"
|
||||
dependencies:
|
||||
esprima "^4.0.0"
|
||||
through "~2.3.4"
|
||||
|
||||
errno@^0.1.3:
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
|
||||
|
@ -2042,6 +2064,10 @@ es6-promise@^4.0.5, es6-promise@~4.0.3:
|
|||
version "4.0.5"
|
||||
resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.0.5.tgz#7882f30adde5b240ccfa7f7d78c548330951ae42"
|
||||
|
||||
es6-promise@^4.1.0:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.1.1.tgz#8811e90915d9a0dba36274f0b242dbda78f9c92a"
|
||||
|
||||
es6-set@~0.1.3:
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.4.tgz#9516b6761c2964b92ff479456233a247dc707ce8"
|
||||
|
@ -2199,6 +2225,10 @@ esprima@2.7.x, esprima@^2.1.0, esprima@^2.6.0, esprima@^2.7.1:
|
|||
version "2.7.3"
|
||||
resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
|
||||
|
||||
esprima@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
|
||||
|
||||
esprima@~3.1.0:
|
||||
version "3.1.2"
|
||||
resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.2.tgz#954b5d19321ca436092fa90f06d6798531fe8184"
|
||||
|
@ -2251,7 +2281,7 @@ eventie@^1:
|
|||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/eventie/-/eventie-1.0.6.tgz#d4ffc8b0c2b5e493c2aa1b22cbe918d3aee74437"
|
||||
|
||||
events@^1.0.0:
|
||||
events@^1.0.0, events@^1.1.0:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
|
||||
|
||||
|
@ -2854,6 +2884,13 @@ global@^4.3.0:
|
|||
min-document "^2.19.0"
|
||||
process "~0.5.1"
|
||||
|
||||
global@^4.3.2:
|
||||
version "4.3.2"
|
||||
resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
|
||||
dependencies:
|
||||
min-document "^2.19.0"
|
||||
process "~0.5.1"
|
||||
|
||||
globals@^9.0.0, globals@^9.14.0:
|
||||
version "9.14.0"
|
||||
resolved "https://registry.yarnpkg.com/globals/-/globals-9.14.0.tgz#8859936af0038741263053b39d0e76ca241e4034"
|
||||
|
@ -3638,6 +3675,10 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
|
|||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
|
||||
|
||||
isarray@^2.0.1:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.2.tgz#5aa99638daf2248b10b9598b763a045688ece3ee"
|
||||
|
||||
isbinaryfile@^3.0.0:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.1.tgz#6e99573675372e841a0520c036b41513d783e79e"
|
||||
|
@ -4021,6 +4062,10 @@ load-json-file@^1.0.0:
|
|||
pinkie-promise "^2.0.0"
|
||||
strip-bom "^2.0.0"
|
||||
|
||||
load-script@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
|
||||
|
||||
loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0.2.5, loader-utils@^0.2.7, loader-utils@~0.2.2, loader-utils@~0.2.5:
|
||||
version "0.2.16"
|
||||
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
|
||||
|
@ -4622,6 +4667,10 @@ ms@0.7.2:
|
|||
version "0.7.2"
|
||||
resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
|
||||
|
||||
ms@2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
|
||||
|
||||
multipipe@^0.1.0, multipipe@^0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/multipipe/-/multipipe-0.1.2.tgz#2a8f2ddf70eed564dff2d57f1e1a137d9f05078b"
|
||||
|
@ -4862,7 +4911,7 @@ object-hash@^1.1.4:
|
|||
version "1.1.5"
|
||||
resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.1.5.tgz#bdd844e030d0861b692ca175c6cab6868ec233d7"
|
||||
|
||||
object-keys@^1.0.10, object-keys@^1.0.8:
|
||||
object-keys@^1.0.10, object-keys@^1.0.11, object-keys@^1.0.8, object-keys@~1.0.0:
|
||||
version "1.0.11"
|
||||
resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
|
||||
|
||||
|
@ -5904,7 +5953,7 @@ query-string@^4.1.0:
|
|||
object-assign "^4.1.0"
|
||||
strict-uri-encode "^1.0.0"
|
||||
|
||||
querystring-es3@^0.2.0:
|
||||
querystring-es3@^0.2.0, querystring-es3@^0.2.1:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
|
||||
|
||||
|
@ -6077,6 +6126,12 @@ reduce-function-call@^1.0.1:
|
|||
dependencies:
|
||||
balanced-match "^0.4.2"
|
||||
|
||||
reduce@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/reduce/-/reduce-1.0.1.tgz#14fa2e5ff1fc560703a020cbb5fbaab691565804"
|
||||
dependencies:
|
||||
object-keys "~1.0.0"
|
||||
|
||||
regenerate@^1.2.1:
|
||||
version "1.3.2"
|
||||
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
|
||||
|
@ -6304,6 +6359,10 @@ rx-lite@^3.1.2:
|
|||
version "3.1.2"
|
||||
resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
|
||||
|
||||
safe-buffer@^5.0.1:
|
||||
version "5.1.1"
|
||||
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
|
||||
|
||||
saladcss-bem@^0.0.1:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/saladcss-bem/-/saladcss-bem-0.0.1.tgz#72070014ff3f6a49a6872cfcb3946c7758f40fc2"
|
||||
|
@ -6887,7 +6946,7 @@ through2@^2.0.0:
|
|||
readable-stream "^2.1.5"
|
||||
xtend "~4.0.1"
|
||||
|
||||
through@^2.3.6, through@~2.3.6:
|
||||
through@^2.3.6, through@~2.3.4, through@~2.3.6:
|
||||
version "2.3.8"
|
||||
resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
|
||||
|
||||
|
@ -6975,6 +7034,12 @@ tty-browserify@0.0.0:
|
|||
version "0.0.0"
|
||||
resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
|
||||
|
||||
tunnel-agent@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
|
||||
dependencies:
|
||||
safe-buffer "^5.0.1"
|
||||
|
||||
tunnel-agent@~0.4.1:
|
||||
version "0.4.3"
|
||||
resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
|
||||
|
|
Loading…
Reference in New Issue