feat: update mentions

pull/1845/head
tangjinzhou 2020-03-04 17:37:53 +08:00
parent 16e075502e
commit a98f513a24
7 changed files with 23 additions and 16 deletions

View File

@ -1,5 +1,5 @@
module.exports = {
dev: {
componentName: 'upload', // dev components
componentName: 'mentions', // dev components
},
};

View File

@ -192,11 +192,6 @@ export default {
keydown: this.handleKeyDown,
change: noop,
},
directives: [
{
name: 'ant-input',
},
],
};
return <TextArea {...textareaProps} ref="input" />;
}

View File

@ -97,6 +97,11 @@ const ResizableTextArea = {
style,
class: cls,
on: omit(getListeners(this), 'pressEnter'),
directives: [
{
name: 'ant-input',
},
],
};
return (
<ResizeObserver onResize={this.resizeOnNextFrame} disabled={!(autoSize || autosize)}>

View File

@ -7,23 +7,23 @@ exports[`renders ./components/mentions/demo/basic.md correctly 1`] = `<div class
exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
<form class="ant-form ant-form-horizontal">
<div class="ant-row ant-form-item">
<div class="ant-col-5 ant-form-item-label"><label for="mentions_coders" title="Top coders" class="">Top coders</label></div>
<div class="ant-col-12 ant-form-item-control-wrapper">
<div class="ant-col ant-col-5 ant-form-item-label"><label for="mentions_coders" title="Top coders" class="">Top coders</label></div>
<div class="ant-col ant-col-12 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-mentions"><textarea rows="1" data-__meta="[object Object]" data-__field="[object Object]" id="mentions_coders"></textarea></div></span>
<!---->
</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col-5 ant-form-item-label"><label for="mentions_bio" title="Bio" class="ant-form-item-required">Bio</label></div>
<div class="ant-col-12 ant-form-item-control-wrapper">
<div class="ant-col ant-col-5 ant-form-item-label"><label for="mentions_bio" title="Bio" class="ant-form-item-required">Bio</label></div>
<div class="ant-col ant-col-12 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-mentions"><textarea rows="3" placeholder="You can use @ to ref user here" data-__meta="[object Object]" data-__field="[object Object]" id="mentions_bio"></textarea></div></span>
<!---->
</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col-12 ant-col-offset-5 ant-form-item-control-wrapper">
<div class="ant-col ant-col-12 ant-col-offset-5 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Submit</span></button><button type="button" class="ant-btn" style="margin-left: 8px;"><span>Reset</span></button></span>
<!---->
</div>

View File

@ -11,7 +11,7 @@ Basic usage.
```tpl
<template>
<a-mentions
defaultValue="@afc163"
v-model="value"
@change="onChange"
@select="onSelect"
>
@ -22,6 +22,11 @@ Basic usage.
</template>
<script>
export default {
data() {
return {
value: '@afc163',
}
},
methods: {
onSelect(option) {
console.log('select', option);

View File

@ -2,6 +2,7 @@ import Menu, { MenuItem } from '../../vc-menu';
import PropTypes from '../../_util/vue-types';
import { OptionProps } from './Option';
function noop() {}
export default {
name: 'DropdownMenu',
props: {
@ -18,8 +19,8 @@ export default {
activeIndex,
setActiveIndex,
selectOption,
onFocus,
onBlur,
onFocus = noop,
onBlur = noop,
} = this.mentionsContext;
const { prefixCls, options } = this.$props;
const activeOption = options[activeIndex] || {};

View File

@ -2,7 +2,6 @@ import omit from 'omit.js';
import KeyCode from '../../_util/KeyCode';
import BaseMixin from '../../_util/BaseMixin';
import {
getStyle,
getSlots,
hasProp,
getOptionProps,
@ -73,7 +72,8 @@ const Mentions = {
}
this.$emit('change', value);
},
onChange({ target: { value } }) {
onChange({ target: { value, composing } }) {
if (composing) return;
this.triggerChange(value);
},
onKeyDown(event) {
@ -283,6 +283,7 @@ const Mentions = {
<textarea
ref="textarea"
{...{
directives: [{ name: 'ant-input' }],
attrs: { ...inputProps, ...this.$attrs },
domProps: {
value,