feat: update mentions
parent
16e075502e
commit
a98f513a24
|
@ -1,5 +1,5 @@
|
|||
module.exports = {
|
||||
dev: {
|
||||
componentName: 'upload', // dev components
|
||||
componentName: 'mentions', // dev components
|
||||
},
|
||||
};
|
||||
|
|
|
@ -192,11 +192,6 @@ export default {
|
|||
keydown: this.handleKeyDown,
|
||||
change: noop,
|
||||
},
|
||||
directives: [
|
||||
{
|
||||
name: 'ant-input',
|
||||
},
|
||||
],
|
||||
};
|
||||
return <TextArea {...textareaProps} ref="input" />;
|
||||
}
|
||||
|
|
|
@ -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)}>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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] || {};
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue